つなろっく

大学生つなの「イロトリドリでロックな毎日」ブログ

はてなブログのデザインテーマ「ZENO-TEAL」のカスタマイズ

f:id:pea-nut:20180615174045p:plain

おすっ!つなです(*‘∀‘)

はてなブログのポップで爽やかなデザインテーマ「ZENO-TEAL」のカスタマイズのポイントをまとめました。

レトロポップなデザイン「ZENO-TEAL」

はてなブログのデザインテーマを「Brooklyn」から「ZENO-TEAL」に変更しました。

以前のデザインテーマ「Brooklyn」はこちら。

pea-nut.hatenablog.com

シンプルでクールな「Brooklyn」も気に入っていたのですが、利用している方も多くて変えたかったんですよね。気分転換。

デザインテーマ「ZENO-TEAL」は、おしゃれでポップで爽やかなデザインがポイント。カルピスっぽいところが気に入っています。

デスクトップ画面はこちらです。

f:id:pea-nut:20180614161455p:plain

 

スマホ画面がこちらです。

f:id:pea-nut:20180614162133j:plain

トップページがおしゃれでコンパクトにまとまりました。

「ZENO-TEAL」おすすめポイントと注意点

 

トップページがカード式レイアウトになっていて、画像をアピールしながらすっきりと見せるハイセンスなデザイン。

レスポンシブ対応デザインで、デスクトップとモバイルのデザインを統一することができます。

おしゃれでウキウキなデザインテーマ「ZENO-TEAL」ですが、ひとつ大事な注意点があります。

「ZENO-TEAL」は有料版PRO限定のデザインテーマだということです。

無料版はてなブログをご利用の場合、アドセンスのポリシー違反になる恐れがあるそうです。詳しいことはわからないのですが、実際にやってみたらわかるかもしれませんね。←無責任。いい子はマネしないでね。

アドセンス違反を避けるため、「ZENO-TEAL」に関しては有料版PROのみで利用可能なデザインテーマとなっています。

無料ブログをご利用の方はご注意ください。

「ZENO-TEAL」をインストールする前に

「ZENO-TEAL」には、いくつかの大事なポイントがあります。

  • 画像を記事の一番最初に入れること
  • 「続きを読む」を挿入すること

このふたつのポイントは、「ZENO-TEAL」を使う上で絶対条件です。

テーマをインストールする前に、すべての記事にこのポイントを整えておくことをおすすめします。

この画像は、記事の編集画面です。

f:id:pea-nut:20180613164117p:plain

①記事の最初に画像を入れる

この画像が、トップページに表示されます。「アイキャッチ画像」に別の画像を設定している場合でも、表示されるのは①記事の最初に入れた画像になります。

サイズは16:9が望ましいとのことですが、別のサイズ画像でも、特に乱れや崩れはありません。つなろっくで使っている画像は、それぞれ適当なサイズですが、きれいに一覧表示されています。

記事の一番最初に画像がない場合、代わりに「はてなブログ」的な画像が表示されます。

  ↓こんな感じ

f:id:pea-nut:20180613165416p:plain

 

画像が表示されない場合に表示される画像を、自分の好きな画像に変更することもできます。

記事に画像がない時に表示されるデフォルト画像を変更する方法 - ZENO-TEAL

②画像の下に文字を入れる

トップページに表示したい文字を入力します。

デスクトップで最大4行まで表示されます。

モバイルではタイトルと画像のみ表示され、この文字は表示されません。

③「続きを読む」を挿入する

ほどよい箇所に「続きを読む」を挿入してください。「続きを読む」を設定していないと、トップページからリンクができません(T_T)

必ずすべての記事に「続きを読む」を設定してください。

 

記事の準備ができてからテーマをインストールすることをおすすめします。

「ZENO-TEAL」インストール後に設定すること

「ZENO-TEAL」をインストールしたあと、次のふたつの設定をします。

f:id:pea-nut:20180613170929p:plain

①全文表示

「ZENO-TEAL」をカード式レイアウトで表示するためには、トップページの表示形式を「全文表示」に設定する必要があります。

「一覧形式」を選択していると、レイアウトはこんな感じです。あれれ?と思ったら全文表示に設定を変えてみてね。

最初、ここに気が付かなくて手間どりました。

f:id:pea-nut:20180613170156p:plain

 

②トップページの記事数

「ZENO-TEAL」は、カードが二つ並んだレイアウトになっているため、トップページの表示される記事数を偶数に設定します。

「ZENO-TEAL」カスタマイズのポイント

ここでは、当サイトで行ったカスタマイズをメモします。詳しくは

ZENO-TEALさんのサイトで紹介されています。

h2見出しを追いかけない

「ZENO-TEAL」では、記事中のh2見出しが最上部に固定されます。

最初、おしゃれすぎて度肝を抜かれましたΣ(・ω・ノ)ノ!

個人的には、スクロールして記事を読んでいると、h2見出しに追いかけられている感じがして、毎回ビックリしてしまうので、CSSを追加してこちらを解除しました。

h2見出しが画面最上部に固定されるのを解除する方法 - ZENO-TEAL

タイトル下に画像リンクを設定

タイトル下におすすめの記事を画像リンクで挿入するカスタマイズを「ZENO-TEAL」さんのサイトで公開しています。

タイトル下のオススメ記事その2(画像サイズバラバラ対応版) - ZENO-TEAL

↑こちらのページで紹介されている方法だと、スマホ画面ではおすすめ記事がふたつしか表示されません。

そこで以下↓のページのCSSと組み合わせることで、画像サイズを統一させてスマホでスクロール表示できるようにしてみました。

タイトル下のオススメ記事その3(スマホ表示でスクロールできるようにする) - ZENO-TEAL

①↑このページから「デザイン」→「カスタマイズ」→「ヘッダ」→「タイトル下」にHTMLをコピペします。

②「記事URL」「画像URL」「記事タイトル」を書き換えます。ここでは、カテゴリーページにリンクを入れて画像付きのナビゲーションバーにしてみました。「おすすめ記事」などのページを作って紹介するのもいいかな、と思ってます。

③「デザイン」→「カスタマイズ」→「デザインCSS」にスマホスクロール用のCSSをコピペします。

④「デザイン」→「カスタマイズ」→「デザインCSS」にタイトル部分の透明度と画像サイズを設定するCSSをコピペします。

このCSSはこちらの記事から↓

タイトル下のオススメ記事その2(画像サイズバラバラ対応版) - ZENO-TEAL

 

画像のサイズが高さ250pxに固定されているのですが、少し大きかったので180pxに変更しました。

なんとなく③のCSSの上に入れました。

 

「ZENO-TEAL」に変更後

ブログ100記事達成記念になにかやりたい!と思い切ってデザインテーマを変更してみました。

pea-nut.hatenablog.com

思い付きで変更したのですが、トップページがカード式デザインで表示されなかったり、画像が表示されなかったりと、あたふたしてしまう点もありました。

「ZENO-TEAL」をインストールする前に、事前に設定しておけばよかったと感じたポイントもいくつかあったので、これからインストールを検討している方の参考になればうれしいです。

ここでは、公式サイトで紹介されているカスタマイズのみ行いましたが、カスタマイズ次第でよりオリジナル感が出せると思います。

 

テーマを変更した後で、サイトの表示速度が遅いような気がしています。次回は、サイト表示速度のチェック記事です!

記事を紹介してくれたサイト

この記事が参考になったと以下のサイトで紹介していただきました。ありがとうございます。

ブログのカスタマイズのお話(ZENO-TEAL) - いつまで田舎にいるの?