誰でも出来る！はてなブログをカスタマイズするのに参考にしたサイトまとめ
みなさんこんにちは、現実に打ちひしがれています。ドメインも独自ドメインに変更して新規一転した管理人の、くぉ（@QuoQlish）です。
先日、暫く何もしていなかったブログのカスタマイズに着手してみました。参考になったサイトをまとめて紹介します。
使用したテンプレート
使用したテンプレートは公式のテーマストアで無償公開されている「Innocent」を利用しました。半月 (id:waitingmoon)さんという方が製作されている、シンプルな人気テーマです。
ブログをカスタマイズする場合はシンプルで構造が分かりやすく、カスタマイズしがいのありそうなテーマをお勧めします。
こちらのテーマは、シンプルなうえにスマートフォンやタブレットの対応もされているほか、公式でナビゲーションバーなどのカスタマイズも紹介しており、それだけも十分に素晴らしいテーマです。
さて、以下からはさらに細かいカスタマイズ方法をまとめていきます。
カスタマイズ詳細
ブログタイトル
はてなブログのテーマの多くは、ヘッダー部分に表示されるブログ名は左寄りに表示されるようになっています。これを中央にする方法が紹介されています。
見出し
テーマ自体にも見出しデザインはありますが、味気ないのでおしゃれな見出しに変更してみます。こちらのサイト様は見出しやそのほかのパーツのサンプルをCSSのコード付きで分かりやすく紹介しています。
はてなブログの「見たままモード」で使用する際は「大見出し」がh3タグでそれ以降はひとつずつ数字が減っていくので覚えておきましょう。
引用
文面を引用する際に使用するBlockquoteはこちらのサイトからCSSを拝借しています。そのままのコードでは利用できなかったので、クラス名を「blockquote」から「.entry-content blockquote」に変更して利用しました。
こんな感じになります
続きを読む
当ブログでは必ず「続きを読む」ボタンを設置しているのですが、おしゃれなものにしたかったのでこちらのサイトでのカスタマイズ方法を参考にしました。
SNS/シェアボタン
当サイトのあちらこちらに設置している、フォローや購読のボタン、シェアボタンはカスタマイズでおなじみの、id:ftmacchoさんのブログで紹介されているものを拝借。
ひきひーさんは、解説も丁寧で分かりやすく参考になります。ほかのカスタマイズ記事も素晴らしいものばかりなのでお勧めです。
関連記事表示
はてなブログのテンプレートには関連記事を表示する機能が備わっていません。しかし、外部のサービスなどを使うことで実現されています。
急上昇中の人気の高い、id:jimpeipeiさんがまとめて紹介されていました。この中で簡単に設置できる上に見た目がおしゃれな「Milliard関連ページプラグイン」を利用してみました。
アドセンス
当ブログではアドセンスを利用しています。はてなブログの設定では記事上や記事下に簡単に設置することが出来ますが、記事中に埋め込む方法がなかなか見つからないでいました。
上記のブログでは、見出しの直後に広告を挟むようにして文中に入れることを実現しているものになります。
配色
簡単にコピペ出来たり、誰でも利用できる便利なプラグインを工夫を凝らし製作されている方もいるおかげではてなブログは思った以上に簡単にカスタマイズできます。
しかし、いくらおしゃれなデザインにしても配色がダメだったらダサいサイトになっていまいます。
こちらのサイトでは、Webなどでも使える配色がまとめられているので色に困ったら覗いてみましょう。
くぉくんのまとめ
一般的なデザイン、カスタマイズからはてなブログらしいカスタマイズまで様々なものを紹介してみました。
はてなブログは、ユーザーによってカスタマイズの方法が模索されたり、Webに疎い人など、誰でもわかるように詳しい人が解説してくれているところも非常にポイントが高いです。
技術やセンスがなくても、オシャレに出来るのはブログサービスの一つの魅力だと思います。もともとWordpressを使っていたので、なめてましたはてなブログさん。
