はてなブログのデザインカスタマイズをしたので変更点と参考にした記事をまとめる
先月末に私もとうとうはてなブログPROに切り替えました。
せっかく有料ブログを始めることにしたので、この機会にブログのデザインや広告の貼り方などについてじっくり調べることにしました。
私はプログラミングに関する知識はあまり無いので、全てコピペでなんとかできる程度の変更しかしていません。よければ参考にしてください。
デザインカスタマイズについて
以前のブログのデザインを覚えている方はほとんどいないでしょうが、今回ブログのデザインについては思いっきり変更しました。
私のブログを訪れる方の7割強がスマホで閲覧しています。はてなブログPROにしたことでスマホ版のブログカスタマイズが可能となったため、色々変更を頑張りました。
テンプレートを変更（PC版）
以前はテンプレートの「Reach」を使用していました。シンプルかつ落ち着いた感じが割と好きでした。
ただこのテンプレの不満な点は、サイドバーが使いところです。サイドバーに広告などを貼ろうとすると、うまく白い部分に綺麗に収めるのが難しいのです。またサイドバーが左側というのも不満でした。
そこでテンプレートを「Blank」に変更しました。白がベースでシンプルなことと、サイドバー右側というのが気に入りました。サイドバーの細かい位置に悩まされることもありません。
グローバルメニューの設置（PC版・スマホ版）
グローバルメニューとはヘッダー部分にあるバーのことです。ブログの主なカテゴリーをいくつか載せています。
PC版の表示
スマホ版の表示
グローバルメニューの設置に関しては以下の記事が参考になりました。スマホ用の記事ですが、PC版についてもコピペで簡単に設置できました。
ヘッダー画像の設置（スマホ版）
スマホ版に関しては新しくヘッダー画像を作成し、載せることにしました。最初は良さげな画像でも探して貼ろうかと思いましたが、どうしてもごちゃごちゃした感じになってしまいました。
結局、パワポでちゃちゃっとシンプルな画像を作って載せるだけにしました。難しい設定なんてしていません。デザイン画面から画像をアップロードしただけです。
以前の表示
現在のヘッダー画像
SNSシェアボタンの設置（PC版・スマホ版）
シンプルなSNSシェアボタンを採用しました。デフォルトのシェアボタンよりもデザインが気に入っています。またデフォルトのボタンと比べて表示スピードが向上したのも良かったです。
これに関しては以下の記事が参考になりました。PC版とスマホ版それぞれについて、コードや張り付ける場所が詳しく書かれているので参考になります。
関連記事の表示（PC版）
記事の下に関連記事を表示できるようにしました。記事と同じカテゴリーの記事をランダムに表示してくれます。
これに関しては以下の記事を参考にしました。表示する記事数やコメントを変更する程度で、あとはコピペでOKでした。
「読者になる」ボタンの設置（スマホ版）
PC版ではプロフィールの横に勝手に表示されるのですが、スマホ版では表示されていません。私は一年近くこのことに気が付いていませんでした。
上でも書いたように、私の読者の大半はスマホから見てくれています。非常にもったいないことをしていました。
ということでスマホ版でも読者になるボタンを設置しました。コードは設定画面の以下の場所にあります。
ここにあるコードをデザイン画面の「記事」→「記事下」に張り付けるだけです。
奥の深いデザインカスタマイズ
今回思い切って色々変更しましたが、他の人のブログを見るとまだまだです。他にもやりたいことはたくさんあるのですが、これ以上デザインにばかりこだわってもきりがないし、とりあえずここまでにしておきます。
デザインにばかりこだわっても、肝心の中身が伴わなければ意味がありません。さらに記事数を増やしたら、またデザインにもこだわりたいと思います。
