はてなブログのサイドバーのカスタマイズ方法

はてなブログのサイドバーのカスタマイズをする方法です。わたしのブログの場合は最初はこんな感じでした。はてなブログデフォルトのアイコン付きサイドバーですね。

 

それをこんな感じにしてみたいと思います。

全て「デザイン」→「カスタマイズ」→「デザインCSS」にコピペでOKです。

サイドバー共通の設定

まずは、サイドバー共通の設定をします。

.hatena-module-title{
   color: #ffffff; /*文字色*/
   background: #8b0000; /*背景色*/
   border-radius: 0px; /*バーの角丸*/
   padding: 5px 5px; /*バーと文字間スペース*/
   font-size: 14px; /*文字サイズ*/
}

サイドバー文字の設定

サイドバーの種類によっては、タイトル部分にリンクが張られている場合があります。リンクがあると文字色が変わってしまい、他のサイドバーの文字色と整合性が取れず、見た目がよくありません。ここでは文字色は全て白で統一しています。

.hatena-module-title a:link {color:#ffffff;}
  /*未訪問*/
.hatena-module-title a:visited {color:#ffffff;}
  /*訪問澄み*/
.hatena-module-title a:hover {color:#ffffff; background:#ffffff;}
  /*カーソルON時*/
.hatena-module-title a:active {color:#ffffff;}
  /*クリック中*/

 サイドバーのアイコン削除

 次にサイドバーにあるアイコンを削除します。わたしの場合は以下のモジュールに対し設定を行いました。自己紹介はカスタマイズしているので一番下の.hatena-module-htmlでの設定になります。

.hatena-module-recent-entries .hatena-module-title:before {
   content:''/*最新記事*/
}
.hatena-module-archive .hatena-module-title:before {
   content:''/*月間アーカイブ*/
}
.hatena-module-entries-access-ranking .hatena-module-title:before {
   content:''/*注目記事*/
}
.hatena-module-category .hatena-module-title:before {
   content:''/*カテゴリ*/
}
.hatena-module-html .hatena-module-title:before {
   content:''/*カスタマイズ*/
}

 その他のモジュールはこちらを参考に設定してください。

.hatena-module-profile .hatena-module-title:before {
   content:''/*プロフィール*/
}
.hatena-module-search-box .hatena-module-title:before {
   content:''/*検索*/
}
.hatena-module-links .hatena-module-title:before {
   content:''/*リンク*/
}
.hatena-module-recent-comments .hatena-module-title:before {
   content:''/*コメント*/
}
.hatena-module-circles .hatena-module-title:before {
   content:''/*参加グループ*/
}

これで完成です。

サイドバーにワンポイント入れる

 すこし味気ないのでワンポイント欲しいなと思ったときは、content:''　の部分に何か記号を入れてもいいかもしれません。

.hatena-module-recent-entries .hatena-module-title:before {
   content:'■'/*最新記事*/
}

ただし、そうした場合に文字色が統一されない場合があります。

その場合は、下記を設定してください。■が大きすぎるのでフォントサイズで調整し、色を白にしています。全てのサイドバー共通の設定になります。

.hatena-module-title:before {
  font-size: 12px;
  color: #ffffff;
}

こんな感じになります。

下記のように設定すれば、■の部分に画像を表示することもできます。

.hatena-module-recent-entries .hatena-module-title:before {
   content:url("../images/画像.png")/*最新記事*/
}

まとめ

はてなブログのサイドバーをカスタマイズ方法って意外と情報が少ないんですよね。せっかく苦労して調べたので忘備録としても残しておくことにしました。