はてなブログの使い方メモ (デザインCSS)

テーマのデザインを修正したいときは、[デザイン]＞[カスタマイズ]＞[デザインCSS] でCSSを追記できる。

デザインCSSを記述する - はてなブログ ヘルプ

CSSの修正点

公式テーマの Reach を使用。

• メインコンテンツの幅が狭いので 620px → 800pxに増やす
  • それに合わせて全体の幅も 960px→1140pxに増やす
  • パンくずリストの幅をautoに
• 左ペインの文字サイズを小さく 85%→75%
• メインコンテンツの下にスペースを追加
• 見出しh2～h5のサイズを修正
  • よく使うh2とh3のデザインを変更

以下をデザインCSSに追加した。

#top-box { width: 1140px }
#content { width: 1140px }
#main { width: 800px }
#box2 { width: 320px; font-size: 75%; }
.breadcrumb { width: auto; }

.entry-content {
  margin-bottom: 5rem;
}
.entry-content h2 {
  font-size: 130%;
  padding-left: 10px;
  border-left: 4px solid #429bb2;
}
.entry-content h3 {  
  font-size: 115%; 
  padding-left: 10px;
  border-left: 4px double #429bb2;
}
.entry-content h4 { font-size: 100%; }
.entry-content h5 { font-size: 100%; }