ZENO-TEALをカスタマイズした事のまとめ
このブログは「素」で使っていますが、自分管理のその他ブログでは「ZENO-TEAL」を導入したのでカスタマイズした事のまとめ。
はじめに「ZENO-TEAL」とは？ですが、知っている方も多いと思いますが、トップページを「カード型」にレイアウトしたテーマです。
基本的にテーマとして完成されていますので、カスタマイズする必要は無いと思います。
特に新規に始めるならZENO-TEALの仕様にあった構成にすれば良いのですが、運用中のブログの場合やはりある程度はカスタマイズした方が違和感無く馴染ませる事が出来ると思います。
そんな中で自分がカスタマイズした事の備忘録です・・・
と言ってもたいした事はしていないので参考になるかはわかりませんが逆にこれくらいなら出来そうって事を紹介したいと思います。
１．「続きを読む」を入れる
いきなり根本的な事ですが、これをしないとリンクが機能しません。
という事で600ページ程の全てのページに挿入しました。。。
合わせて関連記事をミリアードからはてな製のものに変更しました。
ミリアードは関連記事を抽出するシステムはすばらしいと思いますが、表示に時間がかかる事があるのでどうしても気になっていました。
そしてはてな製の関連記事に過去記事を表示させる為には一度「更新」する必要があった為一石二鳥です。
ただし、カスタマイズとは話がそれますが、続きを読むを挿入する際は少し注意して欲しいです。
どうやらGoogleの検索結果には続きを読むまでの文章が表示されるようです。検索結果は全文を考慮しているはずですが、自分のサイトの表示が面積が少なくなってしまって注目されにくくなる可能性があります。
この件に関しては自分の環境、サイト構成によっても変わると思うので、そんな事もある程度に思って下さい。
２．テーマカラーの変更
はい、これもそんな事くらいの一つです。。。
ただ今までのイメージカラー的なものがあると思うので変更です。
ただし、今までは「なんとなく」色味をあわせていたのですが、これを機にある程度整った色使いにしました。
参考にしたサイトはデモサイト内で紹介されていたここを使用しています。
Color - Style - Material Design
３．グローバルナビゲーション
こちらはデモサイト内で導入方法が説明されている事もあり使用しています。
ただし前述のようにそこそこ運営しているブログという事もありカテゴリ数も結構あります。
このまま使用すると、それぞれの幅が狭くなる（最大5個くらい？特にスマホ表示では顕著です）又はカットしなければならない為そこそこ悩んだのですが、ま～ま～ベストかなと思う形で使用しています。
それは２段で使用するという事です。
２段で使用する為の方法は２回書くだけ。それだけです。
なのでヘッダー内にこんな感じに貼り付ければ表示されます
<div id="zeno-menu">
<ul class="zeno-menu">
<li><a href="">SAMPLE1</a></li>
<li><a href="">SAMPLE2</a></li>
<li><a href="">SAMPLE3</a></li>
<li><a href="">SAMPLE4</a></li>
</ul>
</div>
<div id="zeno-menu">
<ul class="zeno-menu">
<li><a href="">SAMPLE5</a></li>
<li><a href="">SAMPLE6</a></li>
<li><a href="">SAMPLE7</a></li>
<li><a href="">SAMPLE8</a></li>
</ul>
</div>
最初はうまくいくか心配でしたが、特に問題無いようです。
ただし、このまま使用すると少し専有面積が大きくなるので「高さ」を変更しています。
/*zeno-menu 高さ */
.zeno-menu li a{padding:0.6em 0;}
導入イメージはこんな感じです
追記・・・
本家さんの方でグローバルメニューのカスタマイズが追加されました。
多段形式という事でフッターと同じような感じで、メニューをレスポンシブ対応させ、ウィンドウ幅に応じて1段に表示させる数を変化させています。
例としてメニューが６個の場合幅に応じて１段に３個の２列、２個の３列といった感じで表示個数が変わります。
ただ、メニュー数が多い場合特に注意したいと思う事はメニューだけで画面がいっぱいになってしまう事です。
又項目が奇数の場合は見た目も良くないと思うので、作成時点で幅を変えた時のイメージを考えてある程度調整した方が良いと思います。
４．フッター
こちらも基本機能として用意されています。
<div class="three-footer">
<div class="footer-1">1つ目の内容</div>
<div class="footer-2">2つ目の内容</div>
<div class="footer-3">3つ目の内容</div>
</div>
three-footerというクラス名からも分かる通り３分割されたフッターがレスポンシブ対応で画面幅によって折り返して表示されます。
但し３分割しても、そんなに書く事ないやという場合は２つにしても問題なく動作します。
<div class="three-footer">
<div class="footer-1">1つ目の内容</div>
<div class="footer-2">2つ目の内容</div>
</div>
これで簡単なサイト紹介とカテゴリリンクをフッターに設置しました。
これもイメージはこうなります。
５．画像の余白の設定
これは画像を複数並べた際の見栄えの関係だと思いますが、画像にマージン（余白）が設定されていたので余白を０にしました。
.page-entry .entry-content td .hatena-fotolife{
margin:0 0 0 0;}
これは画像を表組の中に入れて使う事が結構ある為見栄えの関係で変更しました。
ただし自分ではテーマのCSSとにらめっこしてもうまくいかなかったので質問させてもらっています。
まとめ
その他部分（見出しとか、サイドバーの高さとか）もカスタマイズしていますが、ZENO-TEAL固有の部分に関してのカスタマイズはこれくらいだと思います。
とりあえずZENO-TEALをカスタマイズしてみたいと思う方はデモサイトをコメント欄を含めて良く読んでみる事をお勧めします。
本文ではわからなかった部分もコメント欄を含めるとわかって来る事が結構あると思います。
