はてなブログ改造計画:ブログテーマZENO-TEALを導入しました

f:id:iGCN:20170517205829j:plain

さて

以前から手を付けようと思っていたブログデザインの変更ですが、なかなか重い腰が上がらなかったのが、ここ数日はてなブログオフィシャルのソーシャルボタン周囲の読み込みが遅いことにイライラが爆発して、本日一気呵成にデザインの変更を行ってみました。

ブログテーマZENO-TEALを導入

今回のデザイン変更で一番大きな点はブログテーマのZENO-TEALを導入したことです。

ZENO-TEALはトップページにブログカード形式で記事一覧が表示される、最近人気のテーマです。以前のデザインに比べぐっとお洒落な雰囲気になったように思います。

使用上の注意として、

  • 各記事の冒頭に必ず画像を置く
  • 画像のサイズは16:9のアスペクト比が好ましい
  • 必ず記事中に「続きを読む」を入れておく必要がある

などがあります。

特に「続きを読む」を入れておかないと、カードの部分にカーソルをあわせてもリンクが貼られていないという状態になってしまうので、今日はひたすら過去記事に「続きを読む」を入れる作業に追われていました。

レスポンシブ対応なので、スマホでもカード形式の綺麗なデザインが表示されていて、個人的には満足です。ただし、手持ちのiPhone SEとiPad Pro 9.7でしか確認できていないので、表示の不具合があったらぜひ教えて下さい。

ヘッダ画像はサンティアゴ・ベルナベウ

ちなみにヘッダ画像はサンティアゴ・ベルナベウでチャンピオンズリーグを観戦した時に撮ったパノラマ画像です。手持ちの画像の中から横幅の長い画像を探して使っただけで、深い理由はありません。PCで見ると左右に余白がでちゃっていてカッコ悪いので、今後変更するかもしれません。

グローバルナビゲーションの設置

公式ブログ等を参考にしながら、グローバルナビゲーションを設置しました。記事数の多い5つのカテゴリを表示していますが、今後はカテゴリ分けの見直しも含めて抜本的な改革が必要かなと思っています。

参考にした記事:

http://www.hitsujisystem.com/entry/zenoteal_custom

お勧め記事

これも公式ブログを参考にしながら、タイトル下にお勧め記事を表示させています。PCでは5記事、スマホだと2記事が表示される筈です。この部分は、定期的に表示される記事を見直していきたいなと思っています。

オススメ記事の画像は【223px×125px】にリサイズすればキレイに表示されるはずですので、参考にどうぞ。

アイキャッチ画像をリサイズして新たに用意するのがちょっと大変でした。

ソーシャルボタンの設置

今回一番重要だったのが、ソーシャルボタンの表示です。ZENO-TEAL公式ブログのこちらの記事を参考にして設置しました。表示でもたつくことがなくて満足です。

更新履歴を残しておく重要性

これまでいろんなカスタマイズをブログに施してきましたが、自分はhtmlもCSSも全く分からないので、その都度ブログカスタマイズの神々のブログ記事を参考にしながらコピペでカスタマイズしてきました。

更新履歴をどこにも残していなかったので、今回デザイン変更するにあたって、各所のhtmlやらcssやらが、どれが重要でどれが重要でないのかが全く分からず、困り果ててしまいました。

これからブログのカスタマイズを色々やろうとしている方は、ぜひ更新履歴をどこかに残しておくことをオススメいたします。

更新履歴 - Noblesse Oblige 2nd

さいごに

ZENO-TEALは比較的新しいテーマで使っている人も少ないので、はてなブログ内では目立つことが出来るんじゃないでしょうか。逆にカスタマイズ系の記事がまだまだ少ないので、カスタマイズの神々に多く使っていただきたいですね。

では