はてブのまとめ

 ひゃっはー

ヘッドラインニュース

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

おまけ

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

2つ目ははてなブックマークのコメントを見せたい&サムネイル画像もついたリンク
リンクを簡単に記述する(http記法、mailto記法) - はてなダイアリーのヘルプ
はてな記法で簡単にできるのでどうぞ。

3つ目はサイトの中のこの部分を見せたいって時にするkwoutというサービスのリンク
Chrome拡張機能もあるのでショートカットボタンを決めて起動させるのがかなり楽です。

見た目だけを考えるならkwoutはかなりオススメです。

2013/07/27追記

はてなブログ カスタマイズ でGoogle検索するとこの記事が上位にくるので、はてなブログを始めた人はこの記事を見に来るんじゃないかと予想。
なのでまあ他にも見つけたカスタマイズに関する記事を置いときますので参考にしてね!

【改訂版】はてなブログ サイドバーのカテゴリ表示をタグクラウドにする! - TMD45INC!!!【改訂版】はてなブログ サイドバーのカテゴリ表示をタグクラウドにする! - TMD45INC!!!はてなブックマーク - 【改訂版】はてなブログ サイドバーのカテゴリ表示をタグクラウドにする! - TMD45INC!!!

はてなブログテーマ「Mistilteinn」を公開しました - KYOHONはてなブログテーマ「Mistilteinn」を公開しました - KYOHONはてなブックマーク - はてなブログテーマ「Mistilteinn」を公開しました - KYOHON

最近流行ってるテーマはこれですね。色とか自分なりに変えると個性が出せていいのではないでしょうか。



※2014/4/08 追記
こちらがわかりやすくまとまってておすすめ
はてなブログ カスタマイズ お役立ちツール まとめ(2014春) - マトリョーシカ的日常

広告を非表示にする