はてなブログのサイドバーをカスタマイズする

この記事は、はてなブログのサイドバーのカスタマイズについて書かれています。

今回は、サイドバーの背景色と囲み、そして幅を少し広げました。 

「サイドバー」の変更は、デザインCSSに以下のように追加

　まず、サイドバーの幅を広げるには、CSSで記事幅を指定します。いつもと同じように、はてなブログのダッシュボードから デザイン → カスタマイズ → デザインCSSで追加することができます。

/*サイドバー幅*/
#box2 {
float: right;
width: 250px; 

}

widthの数値を変えてやることで、幅を拡げたり狭めたりすることができます。

次に、サイドバーの背景色と境界線ですが、

/*サイドバー背景色*/
.hatena-module {
margin-bottom: 20px;
background: #FFE;
padding: 10px;
border-top-right-radius: 4px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
border-radius: 4px;
background-clip: padding-box;
border: 1px solid #d5d5d5;
}

境界の上下余白を変更するにはpadding、背景色を変更するにはbackgroundでそれぞれ設定をします。ボックスの4つのコーナーの角丸をまとめて指定するにはborder-radiusを使用します。

とまぁ、このような感じで落ち着きました。しかし、Reportというテーマはカスタマイズするにはもってこいですね。楽しくて仕方ありません。