ずっと気になってはいたものの放置していたブログのデザイン、だいぶ手を入れることができましたので、お礼を兼ねて参考にさせていただいたブログ等をご紹介いたします！
ベースははてなブログの人気テーマ「ZENO-TEAL」
はてなブログとWordpressで迷っていた時、このテーマを見て「これならWordpressにも引けを取らないデザインになるかも～」と思ってはてなブログにしたんですよね。
カード式レイアウトのレスポンシブル対応なのでホント簡単にプロっぽくなるのが素晴らしいです。注意点は3つだけ。
- はてなブログPRO（有料版）限定
- 記事の最初に画像を入れる方が良い（じゃないと良さが出ない）
- 記事には「続きを読む」を必ず挿入する必要がある
初期設定で必要なことは2つかな。
- 設定の「トップページの表示形式」を全文形式にする
- 設定の「トップページの記事数」を偶数にする（12くらいがおすすめ）
こんなトップページになりましたぞ～。
今回手を入れたカスタマイズポイント！を順にご紹介。
トップページのタイトル周り
ナビゲーションバーをドロップダウン形式にしたい
カテゴリーがそこそこ多いので、ナビゲーションバーを使いやすくしたかったので、こんな感じになりました。（色はまた変えるかもしれないけど）
こちらの記事を参考にさせていただいたのですが、とても分かりやすくて素晴らしい記事でした・・・！
記事にもあるようにアドセンスを利用されている方はドロップダウンしたメニューがタイトル下の広告にかかってしまうと規約違反になる可能性があるとのことで要注意。
私もタイトル下の広告を外し、下でご紹介するようにおすすめ記事に置き換えた上、記事の中に広告を配置する方法に変更しました。
ついでに色を変更
ZENO-TEALはベースカラーが独特なブルーグリーンなので他の人と違う色にしたいなーという方も多いと思います。
こちらは上記のCSSを組む際に「back ground」等のカラーコードを変えるだけ！色味が変わるだけで印象もガラっと変わるのでおすすめです。
おすすめの記事をタイトル下に出したい
ということで、タイトル下は広告を置かずに人気の記事などを配置することにしました。これがあると作り込んでる感が一気に出ますね。
フォローやシェアボタン
こちらもちょっとかっこよくなるだけで印象が変わりますし、とても簡単なのでおすすめです。
フォローボタン
記事のシェアボタン
シェアボタンは「はてブ」「Twitter」「Facebook」くらいで十分かなと。最近LINEで共有とかも出てきていますが、使う場面が想像できないので個人的にはこれで十分だなと感じています。
色味が各SNSのイメージカラーと一致しているので感覚的にも分かりやすい！
アドセンス関連
アドセンスの挿入位置を指定できるhtml、こちらもすごくありがたかったです。やっぱり自動広告にしておくと記事中の変な所に広告入れられてイラっとしますからねぇ・・。
しかもこの記事のすごいのは、adsenseのコードを貼り付けて、「こうしたい」を選択すると自動でhtmlを生成してくれるという超絶便利機能つきな点。感涙。
スマホ版
ZENO-TEAL自体はレスポンシブル対応なので、PC版と同じに設定することも可能なのですが、細かい部分はこちらが良かったので真似させていただきました。
というか、構造はもうほとんどこの通り。このページだけで、やりたいことがほぼ完結できるという素晴らしいまとまりっぷり。感謝。
感想
ご紹介した記事を書かれている皆様に最大限の謝辞と敬意を表したいです、本当にありがとうございます。
大学時代に授業で初歩的なhtmlやJavaをいじったことがあったので、PC言語にもそこまでの抵抗感がなかったのが功を奏しました。こんなところで役に立つとは思わなかったけど（笑）
うまく反映されなくてコードとにらめっこした結果、ミスを見つけて直せた時のスッキリ感は結構好きです。
これからも気になった所を修正したり、人様のブログで「これいいな」と思ったものはどんどん参考にさせていただきたいと思います！
