ブログをカスタマイズして、よりシンプルに

久々にブログのカスタマイズを行った。以前からワンカラムにしたいと思っていて、それを実行した次第。

以下、具体的な変更点と、その狙いについて。

全体のテーマ：よりシンプルに

以前は「CONTENTS」というブログテーマを使っていた。このテーマは、デフォルトでカエレバ・ヨメレバのデザインに対応していたり、グローバルメニューを設置できたりと至れり尽くせりのテーマだったが、そのために、あれもこれもとカスタマイズしていくうちにブログがごちゃごちゃしてしまった。

このため、前々から「ブログの不要な部分を削ぎ落としていこう」と計画していたのだが、どうせ不要な部分を減らすなら、いっそワンカラムにして、よりシンプルなデザインにしようと思った。

ブログテーマは、はてな公式の「Life」へ

はてなブログにはワンカラムのテーマがいろいろあるが、はてな公式の「Life」をチョイスした。

「Life」はデザインがすっきりしているだけでなく、レスポンシブデザインにも対応している点がいい。

実は「write」というテーマにするか悩んだのだが、公式のほうがカスタマイズしやすいだろうと思ったので、こっちにした。

メニュー欄はサイドバーにまとめた

これまでグローバルメニューで設置していたリンク集は、サイドバーの「メニュー」という項目にまとめた。

当初は、また新たにグローバルメニューを設置しようかと思ったのだが、どうせほとんどの人はグローバルメニューにアクセスすることはないし、だったらサイドバーでもいいかと思い直した。

結果として、以前よりも構成がシンプルになったと思う。

アドセンスは記事上と記事下の2箇所に

以前は「関連記事広告」も載せていたが、これを排除して、アドセンスは記事上と記事下に1つずつ、合計2つに絞った。

ついでに、SNSシェアボタンも記事下に1つだけにした。

カエレバ・ヨメレバのレスポンシブCSSを新たに追加

上述したとおり、「CONTENTS」にはデフォルトでカエレバ・ヨメレバのCSSが書かれていたが、テーマを新しくしたので、このCSSも新たに自分で追加する必要があった。

Googleで検索したところ、下記のブログのものを使わせていただくことに。こちらのデザインが一番「Life」とマッチすると感じたので。

カエレバ、ヨメレバをレスポンシブデザインにカスタマイズ | Rippoutai

その他

あとは目次のデザインを少しいじったり、各見出しを変更したりと細かい調整を行った。

ちなみにスマホからではわからないかもしれないが、背景画像も少々変更している。薄いグレイ色にしてみた。PC版の場合、このほうが真っ白な背景よりもブログを視認しやすくなったのではないだろうか。

というわけで、久々にブログのカスタマイズを行った話だった。

追記

その後、いくつか変更を行った。

まず、記事上のアドセンス広告はブログタイトルの下へ。これは、スマホで表示したとき、記事上にレスポンシブ広告を貼っていると「レクタングル（四角い大きな広告）」になってしまうため。現在のアドセンスの規約では記事上のレクタングルも禁止されていない（はず）のだが、自分で確認してみて「邪魔だなぁ……」と感じたので、移動させた。

それと、関連記事広告も復活させた。はてな公式の関連記事モジュールと、関連記事広告とでは表示されるコンテンツが異なり、やはり両方ともあったほうが直帰率が下がるのではないか、と思ったので。

今後も、気になる点があればちょこちょこ改善していくつもり。