【初心者】はてなブログテーマ「ZENO-TEAL」かなり良い感じなのでやったことをまとめてみました

約1年ぶりにブログを再開しました。

再開にあたり、これまでのデザインのままでも良かったのですが、心機一転ということでブログのテーマを変更しました。はてなブログのテーマは色々素晴らしいデザインのものがありますが、私が選んだのは「ZENO-TEAL」というテーマです。

私はIT企業で働いているもののWeb系の知識はてんで疎いのですが、たまたま、「はてなブログテーマ「ZENO-TEAL」をテーマストアに投稿しました」という記事を目にしたとき「これだ！」と思い、次にテーマを変えるときはこのテーマにしようと思っていました。

ZENO-TEALの良いところ

トップページの記事一覧がカード型で表示される！

ZENO-TEALが良いなと思った一番の理由は、トップページの記事がカード型で表示されるところです。なんだか上級者のページみたいですよね。

調べてみると、Wordpressの「ストーク」という人気テーマに似ているらしいですね。私はWordpressは挫折した口なので、かっこいいデザインを簡単に自分のブログで採用できるようになるなんて良い時代になりました。

  

トップページ上部におすすめの記事を５つ（スマホは２つ）表示できる！

ZENO-TEALでは、トップページ上部におすすめの記事を5つ表示させることができます。記事のURLと画像のURLをそれぞれデザインCSSにコピペするだけなのでとても簡単でした。また、スマホにも表示されるのも良いですね。

 

レスポンシブデザイン対応でスマホもPC版と変わらぬ美しいレイアウト！

通常、はてなブログはPC版とスマホ版で表示されるレイアウトが異なりますが、ZENO-TEALではレスポンシブデザイン対応といって、すべてのデバイスで同じレイアウトで表示可能です。

ためしに通常設定の場合とレスポンシブデザイン設定の場合の画像を比べてみました。やっぱりレスポンシブデザインの方が見た目が良いですね。

□通常設定

□レスポンシブ設定

ZENO-TEALの残念なところ

記事作成時の記述ルールがある

記事を書くときに記述のルールを守らないと、カード型のトップページのレイアウトが崩れてしまいます。具体的には、

①画像を記事の最初に持ってくる
②次に文章を書く
③トップに表示させたいところで（続きを読む）設定する

の流れを守らないといけません。

特に面倒だったのは過去の記事の修正でした。記事が多い人は苦労するかもしれません。

□作成ルールを守らないとおかしなことに

 

はてなproじゃないと広告がトップに表示されてしまう

はてなブログproに登録していない状態だと、カード型の記事一覧部分に広告が出てしまうようです。私はずいぶん前にはてなproになっていたので問題なかったのですが、そうではない場合注意が必要ですね。（参考：はてなブロガーを震撼させたイケてるテーマ【ZENO-TEAL】をおさわりしてみた - にーとのかがみ。）

 

導入前後にやったカスタマイズ

基本的なカスタマイズについては、テーマを作成された方のブログで公開されていますので、それを参考にしました。いずれもCSSのサンプルコードが公開されていますので初心者でも特に迷うことなく対応出来るかと思います。

zeno-teal.hatenablog.co

スマホ表示でアドセンスはみ出る問題

もともとは記事下に横2つを並べていたのですが、レスポンシブ設定によりスマホ表示ではみ出てしまう問題が発覚したのですが、それは以下の記事を参考に対処しました。単純に縦に並べる設定で対応しました。

www.sugatareiji.com

（6.25追記）

orefolderご本人様からコメントを頂き、レクタングルの縦表示はアドセンスの規約違反になるとのことで、アドセンスの配置を見直しました。

まとめ

ZENO-TEALを使っている他の人と比べるとまだまだ貧弱なデザインではありますが、少しは見れるレベルになったかなあと思います。ほんとZENO-TEAL作成者のorefolderさまさまです。

更新頻度があまり落ちすぎないよう、モチベーションを保ちながらこのブログを続けていければと思います。本当はもう少しCSSなどの知識を増やしたいところですが…

はてなブログカスタマイズガイド―HTML & CSSで「はてなブログ」を次のステッ

はてなブログ Perfect GuideBook