はてなブログのカスタマイズの方法についてまとめてみた【ま】

この記事ははてなブログに興味がある方、はてなブログを利用してるがテンプレートのまま使ってる方に向けた記事となっています。

はてなブログではどうしてもWordPressのプラグインなどと違って機能が限定されてる印象を受けます。
始めにテンプレートを選んでそのままの状態の人も多いのではないでしょうか。

正直私はCSSやHTMLなど余り詳しくなかったので、とにかくググりまくりました。まだヘッダー画像もないような陳腐なブログですが、色々と見て回った結果実際に私が試したものも含めて参考にしたブログや元々のはてブロの機能を紹介したいと思います。

はてなブログ公式のカスタムテーマ

これはブログを作った方なら色々試したことでしょう。
最近またまた良デザインのテーマが増えたので目を通してみて欲しいです。
テーマストア - はてなブログ

最近人気の渋谷で働く営業マンのナンパ日記なんてテーマとブログの内容にあった好例だと思います。ナンパという一見怪しさを感じる内容なのに、フォントの柔らかい感じがそれを打ち消してます。画像を多めに使った非常に見やすいブログで参考になります。
http://nanpatalk.hatenablog.com/

ちなみにはてなブログは現在進行形で次々と機能が増えています。
フォローや読者登録するか、定期的に開発ブログを覗いてはどうでしょうか。
はてなブログ開発ブログ

ブログをカスタマイズする上で参考になるサイト紹介

はてなブログに実施した、４つのデザインカスタマイズ - Banguardサイト

こちらの記事の中でも「記事の幅を広げる」と「見出しに画像を表示させる方法」はとても参考になりました。結局見出し画像は使わなかったんですが、いつか使う時がくるかもしれません。

[CSS初心者向け]ブログで良く見かけるシンプルな見出しの作り方 | delaymania

見出しを変更するならこちらのほうがコピー・ペーストするだけなので簡単です。見出しの色だけテーマに合わせたほうがいいかもしれませんね。

サイドバーにブログパーツを貼る

個人的にブログパーツはサイトが重くなるので敬遠してたんですがはてなブックマークのブログパーツだけは貼っています。
初めて訪問した人が他の記事を見てくれることもありますし、このブログパーツを使ってる人が多いので単純に見やすいだろうなって理由です。
はてなブックマークブログパーツ

他の記事OR最新記事の画像付き紹介を載せる

このブログでも真似させて頂きましたが、こちらのHSKぐうたらジャーナルさんが詳しく教えてくれますのでぜひどうぞ。本当に簡単にできました。
【B】はてなブログに過去記事を写真で表示する、お手軽カンタンカスタマイズの巻 - HSKぐうたらジャーナル
【B】10分ではてなブログに「他にこんな記事も読まれています」を表示する簡単な方法！の巻 - HSKぐうたらジャーナル
以前はzenbackを使ってたんですが、他の記事紹介がずっと３日かかりますのままでしたので、デザイン面も含めて私は上記の方法がいいと感じました。
アイキャッチ画像は最初写真素材足成【フリーフォト、無料写真素材サイト】などで探して時間がかかってたんですが、amazonからアフィリエイトとして画像を引っ張るのが一番早いし、芸能人の画像なども使えるので最近はそうしています。

その他参考になりそうなサイト

はてなブログを”それらしく”するために行った幾つかのこと - アレ待チろまん
統一されたデザインが素敵なぱんつさん（って呼んでいいのか）のブログです。RSSアイコンやGoogle Analyticsについて書かれています。

HTML構造 - tikeda's blog
詳しい人用にはてなブログのHTML構造です。

そっとプロジェクト＠Ｗｉｋｉ - ネットサービス/はてな/はてなブログ/デザインのカスタマイズ
ちょっと情報が古いですが、細かいところまで色々と書かれたリンク集があるのでどうぞ。

おまけ

他サイト様のリンクをいっぱい貼ってますが私はサムネイル画像のリンクの貼り方を３種類使い分けています。
１つ目は下記のようなサムネイル画像のついた分かりやすいリンク。
ブックマークレットに登録できます。
リンクと引用をカンタンにするブックマークレット linclip Signles

２つ目ははてなブックマークのコメントを見せたい＆サムネイル画像もついたリンク
リンクを簡単に記述する（http記法、mailto記法） - はてなダイアリーのヘルプ <div class="hatena-bookmark-detail-info"><a href="http://hatenadiary.g.hatena.ne.jp/keyword/%E3%83%AA%E3%83%B3%E3%82%AF%E3%82%92%E7%B0%A1%E5%8D%98%E3%81%AB%E8%A8%98%E8%BF%B0%E3%81%99%E3%82%8B%EF%BC%88http%E8%A8%98%E6%B3%95%E3%80%81mailto%E8%A8%98%E6%B3%95%EF%BC%89">リンクを簡単に記述する（http記法、mailto記法） - はてなダイアリーのヘルプ</a><a href="http://b.hatena.ne.jp/entry/http%3A%2F%2Fhatenadiary.g.hatena.ne.jp%2Fkeyword%2F%25E3%2583%25AA%25E3%2583%25B3%25E3%2582%25AF%25E3%2582%2592%25E7%25B0%25A1%25E5%258D%2598%25E3%2581%25AB%25E8%25A8%2598%25E8%25BF%25B0%25E3%2581%2599%25E3%2582%258B%25EF%25BC%2588http%25E8%25A8%2598%25E6%25B3%2595%25E3%2580%2581mailto%25E8%25A8%2598%25E6%25B3%2595%25EF%25BC%2589">はてなブックマーク- リンクを簡単に記述する（http記法、mailto記法） - はてなダイアリーのヘルプ</a></div>
はてな記法で簡単にできるのでどうぞ。