こんにちは。はなこだよ。
このたび「はなこのブログ。」のデザイン（PC版）を全体的にリニューアルすることに成功しました！（テッテレー）
元々はてなブログの公式テンプレート「Epic」を使用しており、これはこれでシンプルで見やすいので好きなのですが、他にも大勢の人が使用しているデザインなので、もっと自分のブログを覚えてもらいやすくするためには独自デザインの方が良いかと思いぽちぽちと作業を進めていました。
PCで見たときのプレビュー
（スマホ版もいじりたいのですがそれはまた今度…。）
おかげさまで自分のブログへの愛情が250％アップしましたよ。
撫でまわしたいです。
今回デザインを変更するにあたり、様々な難題にぶち当たりたくさんググったので、その中から参考になったページなどをご紹介していきたいと思います。
ぜひ参考にしてね！
目次：
- デザイン決めの参考に見たいサイト
- はてなブログのデザインを一からカスタマイズしたいときに見たいサイト
- サイドバーに人気記事一覧を表示する
- スクロールしてもついてくるソーシャルボタンを設置する
- オリジナルのソーシャルボタンを設置する
デザイン決めの参考に見たいサイト
まずはどんなデザインにしたいかを決めなければなりませんので、そんなときは以下のサイトが参考になります。
イケサイ ウェブデザイナーのWEBデザインデータベース
その名の通りイケてるサイトが多数掲載されているので、レイアウトや配色を決めるときの参考になります。
これが読みやすいブログデザイン！有名サイトの記事幅と余白設定を大公開
読みやすいブログデザインについて書かれた記事です。
はてなブログのデザインを一からカスタマイズしたいときに見たいサイト
デザインを全体的に変えたいなーと思ったときには以下のサイトが参考になります。
はてなブログテーマ制作の手引き - ヘルプ - はてなブログ
はてなブログのヘルプにオリジナルテーマ制作の手引きが載っています。
CSSをカスタマイズする土台に適したサンプルテーマ「Boilerplate」も配布されていますよ。
【はてなブログ】 CSSカスタマイズ手法（自己流） - のんびり猫プログラマの日常
はてなブログのCSSをカスタマイズする手順が載っています。
はてなブログの完全オリジナルテーマを作成するのに参考にした記事・サイト - 鼻毛パラダイムシフト
はてなブログのオリジナルテーマを作るのときに役立つサイトがまとめてあります。
サイドバーに人気記事一覧を表示する
サイドバーにはてブ数が多い記事の一覧（はてなブックマークウィジェット）を表示できます。
ブログの人気記事を貼り付ける - はてなブックマークヘルプ
はてなブックマークウィジェットの設置の仕方が書いてあります。
はてブウィジェットのスタイルを Epic テーマに合わせて変更しました - ぐだぐだ言ってないでコードを書けよ、ハゲ。
はてなブックマークウィジェットのデザインを整えるCSSが載っています。
「Epic」を使っている人はまんまコピペで使えるので要チェキ。
（このページを教えてくれたid:asiminoさんありがとうございます。）
スクロールしてもついてくるソーシャルボタンを設置する
スクロールしてもついてくるTweetボタンやはてブボタンを設置できます。
はてなブログのサイドバーにスクロール追尾するソーシャルボタンセットを付ける - 太陽がまぶしかったから
設置の仕方からCSSの記述までまるまるこちらのやり方でできます。
オリジナルのソーシャルボタンを設置する
Twitterやはてブのボタンをオリジナルの画像にできます。
SNS投稿ボタンをオリジナル画像にするためのカスタマイズ。 ｜ WebScripter.j
ソーシャルボタン画像をオリジナルにするためのHTMLコードが載っています。
無料配布のFacebookやTwitterのソーシャルロゴアイコン素材まとめ24選 | 株式会社LIG
ソーシャルボタンのフリー素材がたくさん載っています。無料で使えますよ。
国内向けのソーシャル系アイコンセットいろいろ | NxWorld
国内向けのソーシャルボタンのフリー素材が載っています。はてブボタンとかは海外のだとないので。
以上、お役に立つ情報はありましたでしょうか？
基本はCSSの知識がないとデザインのカスタマイズは難しいですが、CSSの記述を載せてくれている親切なサイトもたくさんあるので、ぜひ挑戦してみてね。
ブログタイトルのロゴを変更するだけでもブログへの愛着が増しますのでカスタマイズおすすめだよー！
