はてなブログ-カスタマイズおすっ!つな(@tu_na_69)です(*‘∀‘)はてなブログのポップで爽やかなデザインテーマ「ZENO-TEAL」のカスタマイズのポイントをまとめました。記事を紹介してくれたサイトレトロポップなデザイン「ZENO-TEAL」はてなブログのデザインテーマを「Brooklyn」から「ZENO-TEAL」に変更しました。以前のデザインテーマ「Brooklyn」はこちら。pea-nut.hatenablog.comシンプルでクールな「Brooklyn」も気に入っていたのですが、利用している方も多くて変えたかったんですよね。デザインテーマ「ZENO-TEAL」は、おしゃれでポップで爽やかなデザインがポイント。カルピスっぽいところが気に入っています。デスクトップ画面はこちらです。スマホ画面がこちらです。トップページがおしゃれでコンパクトにまとまりました。「ZENO-TEAL」おすすめポイントと注意点トップページがカード式レイアウトになっていて、画像をアピールしながらすっきりと見せるハイセンスなデザイン。レスポンシブ対応デザインで、デスクトップとモバイルのデザインを統一することができます。おしゃれでウキウキなデザインテーマ「ZENO-TEAL」ですが、ひとつ大事な注意点があります。「ZENO-TEAL」は有料版PRO限定のデザインテーマだということです。無料版はてなブログをご利用の場合、アドセンスのポリシー違反になる恐れがあるそうです。詳しいことはわからないのですが、実際にやってみたらわかるかもしれませんね。いい子はマネしないでね。アドセンス違反を避けるため、「ZENO-TEAL」に関しては有料版PROのみで利用可能なデザインテーマとなっています。無料ブログをご利用の方はご注意ください。「ZENO-TEAL」をインストールする前に「ZENO-TEAL」には、いくつかの大事なポイントがあります。画像を記事の一番最初に入れること「続きを読む」を挿入することこのふたつのポイントは、「ZENO-TEAL」を使う上で絶対条件です。テーマをインストールする前に、すべての記事にこのポイントを整えておくことをおすすめします。この画像は、記事の編集画面です。1記事の最初に画像を入れるこの画像が、トップページに表示されます。「アイキャッチ画像」に別の画像を設定している場合でも、表示されるのは1記事の最初に入れた画像になります。サイズは16:9が望ましいとのことですが、別のサイズ画像でも、特に乱れや崩れはありません。つなろっくで使っている画像は、それぞれ適当なサイズですが、きれいに一覧表示されています。記事の一番最初に画像がない場合、代わりに「はてなブログ」的な画像が表示されます。↓こんな感じ画像が表示されない場合に表示される画像を、自分の好きな画像に変更することもできます。ZENO-TEAL2画像の下に文字を入れるトップページに表示したい文字を入力します。デスクトップで最大4行まで表示されます。モバイルではタイトルと画像のみ表示され、この文字は表示されません。3「続きを読む」を挿入するほどよい箇所に「続きを読む」を挿入してください。「続きを読む」を設定していないと、トップページからリンクができません(T_T)必ずすべての記事に「続きを読む」を設定してください。記事の準備ができてからテーマをインストールすることをおすすめします。「ZENO-TEAL」インストール後に設定すること「ZENO-TEAL」をインストールしたあと、次のふたつの設定をします。「ZENO-TEAL」をカード式レイアウトで表示するためには、トップページの表示形式を「全文表示」に設定する必要があります。「一覧形式」を選択していると、レイアウトはこんな感じです。あれれ?と思ったら全文表示に設定を変えてみてね。最初、ここに気が付かなくて手間どりました。「ZENO-TEAL」は、カードが二つ並んだレイアウトになっているため、トップページの表示される記事数を偶数に設定します。「ZENO-TEAL」カスタマイズのポイントここでは、当サイトで行ったカスタマイズをメモします。詳しくはZENO-TEALさんのサイトで紹介されています。h2見出しを追いかけない「ZENO-TEAL」では、記事中のh2見出しが最上部に固定されます。最初、おしゃれすぎて度肝を抜かれましたΣ(・ω・ノ)ノ!個人的には、スクロールして記事を読んでいると、h2見出しに追いかけられている感じがして、毎回ビックリしてしまうので、CSSを追加してこちらを解除しました。ZENO-TEALタイトル下に画像リンクを設定タイトル下におすすめの記事を画像リンクで挿入するカスタマイズを「ZENO-TEAL」さんのサイトで公開しています。ZENO-TEAL↑こちらのページで紹介されている方法だと、スマホ画面ではおすすめ記事がふたつしか表示されません。そこで以下↓のページのCSSと組み合わせることで、画像サイズを統一させてスマホでスクロール表示できるようにしてみました。ZENO-TEAL1↑このページから「デザイン」→「カスタマイズ」→「ヘッダ」→「タイトル下」にHTMLをコピペします。2「記事URL」「画像URL」「記事タイトル」を書き換えます。ここでは、カテゴリーページにリンクを入れて画像付きのナビゲーションバーにしてみました。「おすすめ記事」などのページを作って紹介するのもいいかな、と思ってます。3「デザイン」→「カスタマイズ」→「デザインCSS」にスマホスクロール用のCSSをコピペします。4「デザイン」→「カスタマイズ」→「デザインCSS」にタイトル部分の透明度と画像サイズを設定するCSSをコピペします。ZENO-TEAL画像のサイズが高さ250pxに固定されているのですが、少し大きかったので180pxに変更しました。なんとなく3のCSSの上に入れました。「ZENO-TEAL」に変更後ブログ100記事達成記念になにかやりたい!と思い切ってデザインテーマを変更してみました。pea-nut.hatenablog.com思い付きで変更したのですが、トップページがカード式デザインで表示されなかったり、画像が表示されなかったりと、あたふたしてしまう点もありました。「ZENO-TEAL」をインストールする前に、事前に設定しておけばよかったと感じたポイントもいくつかあったので、これからインストールを検討している方の参考になればうれしいです。ここでは、公式サイトで紹介されているカスタマイズのみ行いましたが、カスタマイズ次第でよりオリジナル感が出せると思います。テーマを変更した後で、サイトの表示速度が遅いような気がしています。次回は、サイト表示速度のチェック記事です!記事を紹介してくれたサイトこの記事が参考になったと以下のサイトで紹介していただきました。ありがとうございます。はてなブログのシンプ...2019-02-14はてなブログ「innocent」にCSSでトップページをカード型一覧形式にしてみました。(id:pea-nut)古着と旅と邦ロック、おいしいものが好き。趣味はブログデザイン。毎日楽しいことを見つけたい。注目記事おすすめブログ・サイト作りの基本となるデザインやHTMLやCSSが学べます。reserved.スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。