はてなブログ

【はてなブログ】トップページがカード型で表示されるZENO-TEALの設定方法

 

はてなブログお役立ち記事です。

 

当ブログは、はてなブログ出身でして、その際、ZENO-TEALというテーマを使用していました。

 

ZENO-TEALをダウンロードする

 

忘備録も兼ねて、ダウンロードからカスタマイズまで実際にやったことをこの記事にまとめます。

 

 

ZENO-TEALの特徴

 

なんといっても一番の特徴は、トップページがカード型で表示されること!

 

こういうデザインに憧れてたんですよね~。

(上の画像は作業中の画面をスクショしたため、デザインの良さが伝わらない残念な仕様になってます…)

 

ZENO-TEALはレスポンシブ対応だそうです。

 

ありがたい!

 

ZENO-TEALインストール前にやっておくべきこと

 

デザインの特性上、インストール前にやっておくべきことが2つありまして、①画像の挿入②続きを読む(moreタグ)の挿入です。

 

①画像の挿入

各記事の一番最初に画像を挿入します。

 

アイキャッチ画像を設定していても、各記事の一番最初に挿入した画像がトップページに表示される画像となります。

 

もし画像を挿入していなかった場合は、Hatena Blogのロゴの画像が表示されます。

 

これ↓↓

 

 

②moreタグの挿入

これは必須です!!

 

画像とmoreタグの間(だいたい3~4行)の文章がトップページに表示されます。

 

moreタグは次のとおりです。

 

<p><!– more –></p>

 

もしmoreタグがなければ、トップページから各記事へリンクがつながらず、記事が読めない状況になってしまいますので、注意が必要です。

 

ZENO-TEALインストール後にやるべきこと

 

こちらもデザインの特性上やるべきことが2つありまして、①トップページの表示形式を全文形式に設定②トップページの記事数を偶数に設定することです。

 

①全文形式に設定

トップページをカード型で表示するため、表示形式を全文形式にします。

 

ちなみに一覧形式にするとこうなります。

 

 

めちゃくちゃですね。

 

②トップページの記事数を偶数に設定

 

トップページの記事は、横に2つ並んで表示されるので、奇数にすると空白が生まれてしまうんですね。

 

個人的には偶数の方が見ばえいいかなと思います。

 

ZENO-TEALのカスタマイズ

グローバルナビゲーションの表示とかその他いろいろ、細かいけど重要なカスタマイズです。

 

①タイトル下にグローバルナビゲーションバーを表示

 

ぼくはこのブログによく出てくるカテゴリをセットしました。

 

なお、詳細はカスタマイズ2:タイトル下にグローバルナビゲーションバーを表示を参考にしてください。

 

②テーマの色を変更

デフォルトでは、メインに「TEAL」、グローバルヘッダーにTEALよりちょっと濃いめ、メニューにTEALちょっと薄めの色が設定されているそうです。

 

ぼくはオレンジ系の色に変更してみました。

 

 

  • 濃いめ:#ff8c00
  • メイン:#ffa500
  • 薄 め:#ffdead

 

なお、詳細はカスタマイズ5:全体のテーマカラーを変更するを参考にしてください。

 

③h2見出し固定の解除

デフォルト仕様では、画面をスクロールするとh2見出しが追いかけてくるんですね。

 

おしゃれすぎる!!

 

おしゃれすぎて僕のブログのテーマにはマッチしなかったので、解除しました…。

 

なお、詳細はh2見出しが画面最上部に固定されるのを解除する方法を参考にしてください。

 

最後に

トップページがカード型で表示されるZENO-TEAL。とても気に入っています。

 

もっと記事数が増えたら、タイトル下におすすめ記事入れたりフッターいじったりしようかな。