現代版羊システム

為になることならないことなんでも書いていく雑記です。

『ZENO-TEAL』おすすめカスタマイズ方法9選!!

f:id:sheepsystem:20170616001830j:plain

最近追加された新テーマ『ZENO-TEAL』を知っていますか?

www.foxism.jp

こちらのブロガーが作成した新テーマ。

このブログもZENO-TEALを使用しています。

トップページが2列のカード型(カテゴリも表示される)など、シンプルかつおしゃれなテーマとなっています。

ワードプレスでは2列表示できるテーマはたくさんあったのですが、はてなブログでは今までありませんでした。
僕のもう一つのブログ『現代版ゲームシステム』でも2列表示にしているので、はてなでもなじみ深い2列表示できないかな考えていました。
そんなとき、このテーマを見つけ即導入しました。

ただ導入するだけでは、少しシンプルなので、オシャレにするため、他のブログと差別化を図るためカスタマイズしました。

そのカスタマイズをまとめて紹介します!

ブログタイトル

フォント変更

gattolibero.hatenablog.com

 こちらの記事を参考にフォントを変更してあります。

和風っぽく可愛さのあるフォントとなっています。

デザインCSSに導入したコードを載せておきます。

このままデザインCSSにコピペすれば導入完了です。

15行目でブログタイトルの大きさ
25行目でブログの説明の大きさを変更することができます。

タイトル背景画像の設定

テーマをそのまま導入すると、タイトルの背景は緑一色になっています。

シンプルでいいと思いますが、ちょっと寂しいしオシャレに欠ける…

ということで、背景を画像にしてみました。

以下のコードをデザインCSSにコピペしてください。

コピペしただけでは、僕のブログと同じくクローバーの画像が表示されます。
画像を変更したい場合は、10行目のURL部分を変更したい画像のURLに書き換えてください。

グローバルメニュー

タイトル下のメニューバー

 ヘッダーのタイトル下に以下のコードをコピペしてください

トップページURLとカテゴリURL、カテゴリ名を自分のブログ用に変更してください。

 先ほどのふい字に変更したい場合は以下のコードをデザインCSSにコピペしてください。

画面下固定メニューバー

 

www.hitsujisystem.com

 前回の記事で導入方法について説明しているので、こちらを参考にしてください。

サイドバー

フォント、文字の大きさ変更

こちらのコードをデザインCSSにコピペしてください。

フォントと文字の大きさ以外変える必要がない場合は、1~3行目と11行目、13行目以外消しても大丈夫です。

リンクをバナー画像に変更

 ブログを複数運営している人は、リンクを貼りたいですよね。ただ、サイドバーモジュールにあるリンクを使用すると文字だけのリンクになってしまい寂しいです。
そこで、リンクを画像にして装飾してしまおうというカスタマイズです。

サードバーのモジュールでHTMLを選択し、タイトル部分に『リンク』コード部分に以下のコードをコピペしてください。

リンク先URL、画像URL、リンク先名を自分のブログ用に変更してください。

 スマホ時サイドバー消去

スマホの時ってサイドバーが記事一覧、記事の下に表示されるので、あまり見る人はいないかと思います。固定バーを導入しているのなら読み込みの時間もかかるので、いっそのこと消してしまってもいいでしょう。

『スマートフォン』→『ヘッダ』→『タイトル下』のスマートフォン用にHTMLを設定するにチェックを付け、以下のコードをコピペしてください。

これで、スマホ時サイドバーが表示されないようになりました。

サイドバー固定

画面をスクロールしたときに、サイドバーが常に表示されるようにします。

以下のコードをフッタにコピペしてください。

後述するフッタの部分に被ることもあるので、人気記事を追従させる場合は表示させる記事数を減らしてください。

フッター

zeno-teal.hatenablog.com

この記事を参考にカスタマイズしました。このブログは、ZENO-TEAL製作者がカスタマイズ法を紹介しています。他にもカスタマイズ記事があるので、参考にどうぞ

まとめ

比較的新しいテーマなので、カスタマイズ記事が少なく、図らずしも同じようなテーマになってしまっている人もいるでしょう。

先ほど紹介した中には、ZENO-TEAL以外でも使えるカスタマイズもあります。良かったら導入してみてください。

今回のカスタマイズ記事を参考に自分のブログを差別化してみてはいかがでしょうか?

では('ω')ノ