以前は「Haruni」というテーマを使用していましたが、トップページのカッコよさに惹かれ「ZENO-TEAL」というテーマに変更しました。
「ZENO-TEAL」の特徴はこんな感じです。
①「洗練されたデザイン性（wordpressの有料テーマ（18,000円)「stork」によく似てる）」
②「カード型」
③「レスポンシブ対応」
④「トップページ」のアイキャッチ画像がトリムされずに表示できる
⑤「Minimalizm」「Brooklyn」「haruni」に次ぐ第４位の人気（※２０１９年７月時点）
最も惹かれたのは、上記④『｢トップページ｣のアイキャッチ画像が、トリムされずに表示できる』ことです。
画像が切れてしまうのは「はてなブログの仕様」なので、｢しょうがないかなー｣と諦めていましたが、なんとこの「ZENO-TEAL」ではその問題が解消されていて驚きでした！
当記事では、私が｢ZENO-TEAL｣のカスタマイズ時に、参考にした記事をまとめました。これから｢カスタマイズ頑張ろう！｣という方に、お役立ち出来れば幸いです。
（１）｢ZENO-TEAL｣必須設定事項
｢ZENO-TEAL｣を使用するにあたり、初めに行わなくてはいけない｢必須設定事項｣が4つあります。
必須設定事項
【1】各記事の最上部に｢16:9｣のサイズで画像を設定
【2】アイキャッチ画像の直下に｢続きを読む｣を設定
【3】全文表示に設定
【4】偶数に設定
これらを行わないと、｢ZENO-TEAL｣の一番の特徴である｢カッコいいトップページ｣がガタガタに崩れてしまいます。
全記事に手を入れなくてはいけないため、既に大量の記事を書いている方は相当大変だと思いますが、、、頑張ってください！としか言えません(笑)
｢今更そんな作業無理できないよ！｣という方は、諦めて別のテーマを使うしかありませんね。
【1】各記事の最上部に｢16:9｣のサイズで画像を設定
画像の推奨サイズ比率は、｢16:9｣となっており、この比率であれば｢トップページの記事一覧｣のアイキャッチ画像が見切れずに表示することが出来るようになります。
【2】アイキャッチ画像の直下に｢続きを読む｣を設定
上記【1】で設定した「各記事の最上部に設定した画像」の直下に、｢続きを読む｣の設定が必要になります。
【3】全文表示に設定
別のテーマを使用している場合、ほとんどの方が｢一覧表示｣にしているかと思いますが、ZENO-TEALでは｢全文表示｣にする必要があります。この設定を行わないと、トップページがガタガタに崩れてしまうので、忘れずに設定しましょう
私は当設定をし忘れていて、｢なんでなんで！？｣とあたふたしました。
【4】トップページの表示記事数を｢偶数｣に設定
ZENO-TEALのトップページは、記事の一覧が｢２列｣で表示される仕様ですので、記事数が｢偶数｣でないと、収まりが悪くなってしまいます。忘れずに設定しましょう。
（２）「デモサイト」参考記事
「ZENO-TEAL」のデモサイトには、多数のカスタマイズ参考記事が載っています。｢どのカスタマイズからやろうか｣と迷ったら、とりあえず｢デモサイトのカスタマイズ｣から行うよいでしょう。
【1】ヘッダー下に「オススメ記事」を表示
「ZENO-TEAL」では、テーマ自体に「オススメ記事表示用」のCSSが設定されているため、簡単に設定することができます。
1.アイキャッチ画像のサイズが、全て一致している人向け
画像サイズが全て一致している場合は、以下記事を参考にカスタマイズしましょう。
やることは「html」の設定だけでOKです。
2.アイキャッチ画像のサイズが、バラバラの人向け
「アイキャッチ画像のサイズがバラバラ」の場合は、「html」の設定に加えて「CSS」の設定が必要になります。
3.スマホ表示時、オススメ記事を横にスクロール可能にしたい場合
上記1,2のカスタマイズだけだと、スマホ表示の場合は「２つ」しか表示できません。
スクロール可能にするためには、以下カスタマイズが必要になります。
タイトル下のオススメ記事その3（スマホ表示でスクロールできるようにする）
＜追記１＞
上記カスタマイズでは上手くスライドさせることができませんでしたので、「bxslider」というスライダーで設置しました。以下が参考記事です。
＜追記２＞
GoogleChromeのアップデートにより、「bxslider」に不具合が起きているようです。アイキャッチ画像を押してもページに飛べない場合は、以下カスタマイズを追加で実施ください。私の場合は、以下記事の対策①で上手くいきました。
【2】「グローバルナビゲーション」の設置
ZENO-TEALには、グローバルナビゲーションの仕組みがデフォルトで設定されているので楽チンです。
以下カスタマイズを全て行うと、｢パソコン:一段形式⇔スマホ:多段形式｣のグローバルナビゲーションが実装できます。
1.グローバルナビゲーション設置
単純に｢グローバルナビゲーション｣を設置するだけの方法です。
2.グローバルナビゲーションを「多段形式」にカスタマイズ
上記【1】で設置したグローバルナビゲーションに対して、｢一段形式⇔多段形式｣の表示分けをするためのカスタマイズです。
【3】記事上下の「SNSシェアボタン」
ZENO-TEALには｢SNSのシェアボタン｣の仕組みが標準装備されています。全部で４つ準備されているので、気に入ったやつを使いましょう！
私の場合は、｢｣を使っています。
【4】フッターのカスタマイズ
フッターの仕組みも標準装備されています。あまりヘッダーにこだわってないブログもよく見かけますけど、色々情報を載せれるところですので、何もやらないのは勿体ないです。
【5】テーマ全体の色を着せ替える
ZENO-TEALへの変更直後は、配色が｢緑色｣で統一されています。もし気に入らなければ、好きな色に着せ変えましょう。
（３）【その他】オススメカスタマイズ
「（２）デモサイト参考記事」以外に、私が参考にしたカスタマイズ記事をご紹介します。
【1】画面の下部分に常に表示する｢複合メニューバー｣の設置
ほぼコピペで一発で超簡単ですので、是非行いましょう。
メニューバーって、画面上部に固定表示すると｢邪魔だなぁ～｣と気になりますが、｢画面の下部分｣だと、常にメニューバーが表示されていてもあまり気にならないです。
【2】「ZENO-TEAL」標準見出しの変更（無効化⇒再設定）
「ZENO-TEAL」は標準で「h1～h6」の見出しについて、標準でカスタマイズが実装されています。そのまま使用する場合はいいのですが、たいていの場合は「自分好みの見出しにしたい！」と思いますよね。
以下参考記事で、「既存の見出しのCSSを無効にする」⇒「新たに見出しのCSSを設定」する方法がご紹介されています。
【3】読者登録ボタンのカスタマイズ
はてなブログの「読者登録ボタン」は、標準装備されているものだと小さく味気ないデザインです。
以下カスタマイズ記事を参考に、色や大きさを変えた「目立つボタン」にカスタマイズできます。
【4】記事下の「SNSシェアボタン」を「関連記事の上」に設定する
何もカスタマイズせずに「記事下のSNSシェアボタン」と「関連記事」を共存させると、「記事下のSNSシェアボタン」は「関連記事」の下に表示されてしまいます。「SNSシェアボタン」は「記事が読み終わった直後」に目についてほしいので、これでは困りますよね。
以下記事のカスタマイズを行えば、SNSシェアボタンが「関連記事の上」に設定することが可能になります。
【5】aboutページのカスタマイズ
aboutページは標準のままだと、かなりイケてないです。意外とアクセスする人もいますので、かっこよくカスタマイズしておきましょう。
【6】固定ページのカスタマイズ
記事ページと独立した「固定ページ用のデザイン」を適用することができます。
【7】記事内の「Googleアドセンス」を自動設置するカスタマイズ
「Googleアドセンス」を各記事にコピペで張り付けるのはかなり面倒なので、自動で設置できるようカスタマイズすることをお勧めします。
以下記事では「最初の見出し前」「記事下かつシェアボタン上」の２か所への設置方法がご紹介されています。
【8】「外部リンク」は「別ウィンドウ」で開く
はてなブログでは、何も設定をしないと「内部リンク」「外部リンク」を問わず「同じウィンドウ」で表示される仕様となっています。
自ブログから離脱されるのを防ぐため、「外部リンクをクリックした場合には「別ウィンドウで開く」ようにカスタマイズしておくことをオススメします。
【9】「前のページ」ボタンの追加
はてなブログの記事一覧には、デフォルトで「前のページ」ボタンが存在しません（「次のページ」ボタンだけあります）。
ブラウザの「戻る」ボタンで前ページに戻ることもできますけど、操作性を更に上げたい方は以下記事を参考に「前のページ」ボタンを追加しておきましょう。
【10】文字サイズの拡大
文字が小さすぎると記事が読みにくくなるので、不自然でない程度に「大きな文字サイズ」にすべきです。当ブログでは「17px」に設定しています。
なお、Googleが推奨しているのは『16px以上』とのことです。
（４）【お気に入り登録必須】
何度も使う記事やページは「お気に入り」に登録しておくと便利です。私がお気に入り登録して「汎用的に使用」している記事やサイトをご紹介します。
【1】はてなブログ アイコン一覧
ブログでアイコンを使う場合、多くの方は「Font Awesome」を使用しているかと思いますが、結構重たくなってしまいます。
はてなブログのデフォルトで読み込まれるCSSに、100種類以上の『はてなブログ用のアイコン』が用意されているので、これらで事足りるのであれば、「Font Awesome」より「はてなブログ用のアイコン」を使用しましょう。
【2】Font Awesome
上記で紹介した「はてなブログ用のアイコン」では物足りない場合は、多数のブロガーがそうしているように「Font Awesome」を使用しましょう。
【3】HTML色
ブログ運営者であれば、色の設定は随時実施したくなるでしょう。ブックマークして、いつでも見れるようにしておくと便利です。
【4】【サルワカ】見出しサンプル
今までいろいろな見出しを使ってきましたが、いずれも以下記事を参考にしてやってきました。
「カッコいい見出し」が「68種類」もご紹介されています。おすすめです。
【5】【サルワカ】囲い線サンプル
囲い線を何種類か使用していますが、いずれも以下記事を参考にさせていただいています。情報を一覧で載せるときなど、囲い線は大活躍するので、まだ使ったことが無い人は是非取り入れてみましょう。
「カッコいい囲い線」が「30種類」もご紹介されています。
【6】【サルワカ】CSS部品サンプル
「見出し」「囲い線」のほかにも、「サルワカ」では良質なサンプル記事がたくさんあります。
以下記事では、サンプル集がまとまっているので、参考にしてみてはいかがでしょうか。
【7】「エクセル⇒テーブル（HTML）」への変換ツール
テーブルを使うと、情報が一気に見やすくなりますが、HTMLを手書きで書きなぐるのはとっても大変ですよね。
そんな時は、テーブルのHTMLを作るツールを活用しましょう。以下ツールを使えば、１クリックでテーブルが作成できちゃいます。
テーブルの装飾を変更したい場合は、こちらが参考になります。
【8】PageSpeed Insights（ページ速度の測定）
「ページ速度」を考えずに、画像を圧縮せずに使ったり非効率なカスタマイズばかりして運営していると、気づけば「激重なブログ」になっているかもしれません。
以下ツールで、ご自身のブログがどれくらい重たいのか計測することができます。
【9】Optimizilla（オンラインイメージ最適化ツール）
画像を圧縮するためのツールです。一度に複数（20個）の圧縮が可能になります。
上記ツール以外にも、無料で使えるツールが多数存在するので、他のも試してみるのもいいかもしれませんね。
【10】CSS Minifier（CSS・javascript圧縮ツール）
カスタマイズでCSSやjavascriptを書く時は、後から見やすいように「改行」「段落」入れて書いているかと思いますが、それらが多いほど「表示速度」が低下してしまいます。
以下を使って「CSS」「javascript」を圧縮し、表示速度の改善に取り組みましょう。
【11】Googleアドセンス 記事内広告の自動貼り付け
記事内にGoogleアドセンスの広告を自動貼付してくれるスクリプトが、入力フォームから作成できます。
毎回記事を書くごとに一つ一つ貼り付けるのは非常に面倒なので、早い段階で自動化しておきましょう。
まだGoogleアドセンスに合格していない方がいたら、ある程度の記事数を書いたらトライしてみましょう。私の「Googleアドセンス合格体験記」も是非ご一読ください！
【12】複合キーワード検索ツール
SEO対策として、複合キーワード（2語以上の単語で構成されるキーワードのこと）を検索できるツールです。無料で使えるオススメのツールをご紹介します。
（５）まとめ
「ZENO-TEAL」への変更時に、私が参考にした「カスタマイズ記事」についてご紹介いたしました。
「ZENO-TEAL」は大変格好いいテーマですが、「必須設定事項」も多くあってなかなか大変ではありました。ですが、頑張った甲斐もあって、カッコよく仕上がったのでとても満足しています。
これから「ZENO-TEAL」に乗り換えてカスタマイズを施す方に、少しでも参考になれば幸いです。
