Step By Step

20代会社員。人生を一歩ずつ、歩いています。

【スポンサーリンク】

無料でできるはてなブログのカスタマイズ21個

SPONSORED LINK

先日、50記事投稿して思ったことという記事を書きました。当ブログはご覧の通りはてなブログで運営していますが、未だはてなpro契約はしておらず、ブログテーマ(ブログ全体のデザインのこと)も無料のものを使わせてもらっています。

2ヶ月前はとっちらかったデザインでしたが、いろいろこねくり回すうちに、無料ながらも少しは綺麗になったかなと思っています。

とは言いつつ、そろそろはてなpro契約を検討していて、いい節目だと思ったのでここまでブログに施したカスタマイズをまとめてみました。全て無料でカスタマイズ可能なので、興味のある方の参考になれば幸いです。

当ブログのデザインは、偉大な先人の皆様によって成り立っています。いつもありがとうございます。どれも素敵なデザインばかりなので、うまく活かせていない部分があれば僕のセンスの問題ですね笑

ブログ全般

ブログ全体に関わるカスタマイズについてです。

1.ブログテーマ

CatNoseさん(id:tsukuruiroiro)が作成されたテーマ「DUDE」を使用させてもらっています

これ一発でかなりシュッとしたデザインに変更できます。ご本人のサイトで細かいカスタマイズについて解説いただいているので、上記リンク先を参考にして下さい。

2.ブログのトップページを一覧表示にする

head要素内に以下の記事でご紹介いただいているJava Scriptコードを追加しています。

トップページにアクセスがあったら、アーカイブページを表示するというコードになります。

ただし記事中でも言及いただいておりますが、Googleからの評価が下がる可能性があるとのことです。はてなProであれば設定画面から記事の一覧表示設定が可能なので、無料版を利用している場合の方法ですね。

3.レスポンシブデザイン

レスポンシブデザインとは、スマートフォンで閲覧した際でもPCと同じデザインを表示する設定のことです。crullerさん(id:cruller)の以下記事を参考にさせていただきました。

デザインCSSにコードを追記します。

4.記事中の文言を動的に変更するJavaScript

これはお遊び要素です。こちらもhead要素内にJavascriptのコードを記述していて、関数だけ記事中で呼び出す形にしています。実はこれを利用して、自己紹介記事の冒頭挨拶文言を閲覧した時間帯によって変更しています。

まったく告知していないので気づいている人はいないと思いますけど笑
バリエーションは以下6パターンなので、奇特な方は全パターン探してみてください!
5:00〜8:59
9:00〜11:59
12:00〜13:59
14:00〜17:59
18:00〜23:59
0:00〜4:59

もしかしたらページ読み込み速度に悪影響があるかもしれないので、気になる方は実施しない方が良いです。

記事内の要素カスタマイズ

記事中のデザインなどについてCSSをいじっている部分です。

5.パンくずリストの追加

はてなブログの設定に用意されています。[デザイン]-[スパナアイコン]-[記事]内にある「パンくずリスト」の項目にチェックを入れます。

6.目次のデザイン変更

はてな記法で[:contents]と入力すれば目次を自動生成できますが、デフォルトだとちょっと使い勝手が悪いです。

デザインがかっこよかったので以下の記事を参考にCSSいじっています。

目次を[隠す]⇄[表示する]の動的な切り替えは以下の記事を参考にさせていただきました。

7.カエレバ・ヨメレバの導入

ブロガーさんご用達のカエレバ・ヨメレバを利用させてもらっています。

8.カエレバ・ヨメレバのデザイン変更

少しCSSに手を入れています。以下の記事を参考にしました。

9.アプリーチの導入

アプリの紹介時に見栄えを良くするため、アプリーチを使わせてもらっています。

10.太字マーカー

<strong>タグで囲んだ文字を蛍光マーカーっぽくするデザインに変更しています。

11.引用ブロックの装飾

はてなブログのデフォルトの引用装飾をなんとかしたいなーと思い、以下の記事を参考に変更しました。

こんな感じのデザインです。

背景色と左端ボーダーのデザインを少しいじっています。

12.よく使うHTMLタグ

もはやデザインなのかわからなくなってきていますが、記事の区切りなんかに<hr>タグをよく使います。横に線が引かれます。↓こんな感じ


13.小見出し(h4タグ)のデザイン変更

DUDEのデフォルトはこれ「」なんですが、これ「」に変更しました。

はてなブログのWebフォント一覧はこちらの記事を参考にさせてもらいました。

14.文章の囲み枠を追加

サイドバーの記事紹介や、記事本文中の囲み枠で利用しています。

サイドバーのボタンっぽいやつはこんな感じです。
自己紹介

15.リンクを強調

リンクを枠で囲って強調するデザインを利用しています。

16.SNSシェアボタンのデザイン変更

SNSへのシェアボタンのデザインを変更しています。

↓こんな感じに。

17.各種フォローボタンのデザイン変更

サイドバーだけですが、はてな、Twitter、Feedlyのフォローボタンを追加しています。


そのほか導入ツール

ブログのデザインではありませんが導入しているツール類についてまとめておきます。

18.Google Analytics

ページごとのビュー数、直帰率、アクセス時間帯なんかを確認するのに使っています。

19.Google Search Console

40記事投稿したあたりで導入していたんですが、最近ようやく覗き始めました。記事ごとにアクセスされる検索キーワードを探っています。

追記分

初回投稿から追加したカスタマイズした分をここに追記していきます。

20.記事のカテゴリを階層化する

こちらの記事を参考に、カテゴリの階層化を行いました。カテゴリ整理は分類が難しいので、試行錯誤が必要ですね。

21.サイドバーにTwitterのタイムラインを埋め込み

Twitter公式からブログ埋め込み用のHTMLコードが取得できます。具体的な設定はこちらを参考にさせていただきました。

まとめ

数えてみたら全部で21個、もっとあるかと思いましたが意外とこんなもんですね。今後もデザイン関連で変更があれば、備忘録も兼ねて追記していければと思います。

重ねて、素晴らしいCSSやツール解説記事を公開いただいている偉大な先人の皆様に感謝いたします。


ではでは。



50記事書いたあたりで、はてなpro契約を検討しようかと思ってきました。
tempo96.hateblo.jp