【はてなブログ】試行錯誤したブログカスタマイズのまとめ
6月11日にはじめましての記事を更新してから3ヵ月ちょっと。ブログのカスタマイズが大好きでかなりあれこれカスタマイズしては、また変えてみたりいろいろしてきました。
やっと少し落ち着いてきたので（カスタムするの好きなのできっとまた少しずつ変えると思うけど）お世話になったサイトさんへのお礼と、カスタマイズで困っているどなたかのお役にたてたらいいなと思いまとめてみました。
ブログヘッダー
色あいやふんわりシンプルでかわいい雰囲気がとても気に入っているヘッダーはぱつこさんにお願いしました。とても丁寧にヒアリングしてくださって希望通りのものを作ってくださり感謝してます＊＾＾＊
トップページをカード型にする
最初からカード型になったZENO-TEAL - テーマ ストアを使いたくて、過去の記事に遡って続きを読むの設定と、写真を記事の最初に持ってくるという作業をこつこつとして全ての記事を修正したのですが（そうしないとうまく機能しないみたいなので）なぜかうまく写真を拾ってくれない記事や写真がゆがんでたり（縦横の比率の問題かな）して断念。
でもカード型にはどうしてもしたくてあれこれ試した結果、こちらのブログを参考にさせていただきました。
最初から組み込まれている日付のデザインを変更する。
最初からのデザインは黒色の文字だったので、トップページをカード型にすると写真とかぶった場合日付がほぼ見えなくなってしまいました。もとからの日付をいったんリセットして背景色をつける方法を参考にさせていただいたのはminimalgreenさんのこちらのブログです。
記事内の見出し、囲み枠、色の変更
とてもたくさんのデザインがあって、わかりやすく書かれているのでよく参考にさせていただいています。
見出しや囲み枠は色も好みのものに変更できるところもよいですよね。色の変更でいつもお世話になっているのがこちら。
公式の関連記事を2列にして、記事下に入れたシェアボタンなどと順番を変える。
公式の関連記事だと5つ表示されるので下までいくのにけっこうスクロールすることに。できるだけすっきりとさせたかったので記事を4つにして2列に表示。また、本文→関連記事→カスタマイズした記事下の順番だったのを関連記事とカスタマイズした記事下をひっくり返しました。参考にさせていただいたのはこちらのブログです。
スマホヘッダー画像の大きさの変更（レスポンシブにした場合）
レスポンシブにしてうきうきとスマホの画面を見てみたら、せっかくぱつこさんに描いていただいたイラストがどーんと巨大に拡大されて表示されていてびっくり。どうにかして大きさを調節できないものかと参考にさせていただいたのはこちらのブログです。
サイドバータイトルの前のアイコンを変更する
元のアイコンは✔というデザインだったのですが、水色の小さなハートに変更しました。参考にさせていただいたのはまたまたminimalgreenさんのブログです。
サイドバーにある、人気記事・最新記事・月別・カテゴリーを1つにまとめる。
スマホとPCのデザインを分けていたときは気にならなかったのですが、レスポンシブのものに変更したらスマホの画面でカテゴリーがズラリと長いのが気になったので、すっきりとひとつにまとめてみました。PCではそれほどでもないかもしれないけれど、スマホではスッキリしたのじゃないかな。参考にさせていただいたのはこちらのブログです。
まとめ
どうやってもうまく配置できなかったものが、コピペして貼るだけでピタっとおさまったりするとすごいいーーってなります。書いてくださったみなさん、どうもありがとうございました( *^^人)そしてこの記事がカスタマイズで困っているどなたかのお役にたてたらいいなぁ。
ブログ村トラコミュ
