いままで使っていたブログデザインに飽きてしまったのと、他の人ともデザインがよくかぶっているなと言うことでカスタマイズしてみました。
カスタマイズした部分とコツなどについてご紹介します。
使ったテーマはZENO-TEAL
記事数も多くなってきたこともあり、もうちょっとサイトっぽいものにしたいなと思い、こちらのテーマを適用しました。
このデザイン使っている人は12,000アカウント以上あるみたいです。確かによく見かけるような。
デフォルトの色がグリーンだったのですが、シンプルなものが好きなので薄いグレーに変更したりとちょこちょことカスタマイズ。
このテーマを使用したカスタマイズ方法については、デモサイトに書いてあるのである程度見ればわかるかも。アップデートしたり作者が質問に対して回答しているのが好印象です。
カスタマイズした部分とやり方
ちょこっとずつカスタマイズしたのですが、どこをカスタマイズしたのかメモしたいと思います。
ちなみに全体的なところでいうと、レスポンシブデザインなのでPCと同じHTMLを使用してスマホ表示させています。
最初に設定が必要なこと（やや面倒）
トップページの表示形式についてですが、これは「全文表示」にしていないとカードビューにはならないのでお忘れずに。
そして、カードビューにした場合リンクされなかったりするのですが、原因は「続きを読む」をもとにリンク表示させているようなので、記事内に「続きを読む」を設置しておく必要があります。
これは記事数が多い人だと結構面倒ですしトップページの表示速度にも大きく影響してしまいます。
解消するためにもしかしたら「一覧表示」でも見た目が同じようになるようにチャレンジするかもです。（あまりトップページは需要ないけど…）
全体の色味やテキストの指定など
サイドメニューなどの見出しの背景色をうすいグレーに変更しました。そのほか「>」みたいな部分はアクセントカラーはそのままのものを利用しています。
フォントの種類については「Arial, Helvetica, sans-serif」に指定し、文字サイズは106%にしてみました。
あとなぜか「注目記事」の１つ１つの記事の間に点線が入っていなかったので、リストのborder-bottomに「1px dotted #e0e0e0」を設定しました。
カテゴリの並び方（見え方）
カテゴリが多い人の場合、デザインテーマそのままだと縦長になってしまいます。
なので、displayをtable-cell、floatをleftにすることで若干の縦長を回避しました。
これはカテゴリ名の先頭に「#」を追加したことによってより見た目とリンクしたような気がしています。
記事上にSNSボタンを配置
はてなのデフォルト機能でもSNSボタンはもちろん表示できるのですが、見た目があまり可愛くなかったので、こちらのページを参考にカスタマイズしました。
シェアボタンのデザインは4種類あるのですが、一番シンプルなものにしました。
ボタンの中に表示されるのは全て英語（もしくはローマ字）なのですが、「Hatebu」というのがちょっとわかりにくいなと感じたので挿入するコードの「Hatebu」部分を「はてブ」に変更して挿入しています。
記事下にも配置して見たのですが、そうするとはてブコメントがうまく表示されなかったので、記事上のみに配置しました。なにかの要素と干渉してしまうようです。
ちなみに記事下のどこに配置するかも実は設定しようと思えばできるのですが、面倒だし技術的に詳しくない人はやらない方が正解です。
カテゴリ名の先頭に#を追加
これはカスタマイズではなくただの変更ですね…
トップページのサムネイル画像の右上にカテゴリが表示されるのですが、記事によっては２つ以上のカテゴリを設定しているものもあり、見やすくするため＆ポップな見た目にしたかったので先頭に#をつけてタグぽくしてみました。
サイドメニューのコンテンツをスクロール固定
これはPCで見ている人向けのカスタマイズなのですが、サイドメニューの一番下に広告を表示している人って結構いますよね？
記事本文が長いと記事部分だけスクロールし続けると、サイドのコンテンツが何もなくなって空白になってしまうと思います。
それってちょっと勿体無いですよね？というわけで、サイドの最後のコンテンツだけスクロールしても常に表示されるようにしたのです。
いまこの記事のこの部分をPCで見ている人は右側に広告だけが表示されているかと思います（ウィンドウサイズが極端に小さくなければですが）
下の画像でいうと、お名前.comのバナーの部分を固定表示にしたのです。
これはずっとやりたかったのですが、自分の知識の中では「jQuery」で止まっていたため、面倒臭いなという感じで先送りしていました。
ですが、いまはcssだけでも簡単に設定できるみたいです！こちらの記事を参考にさせていただきました。
結論から言うとこれ、めっちゃおすすめでした。
使用しているデザインテーマによってはできないものもあるらしいのですが、「ZENO-TEAL」では問題なく表示されています！
いったんこれでカスタマイズは落ち着いたかも。スッキリしたー。
