Blogger | 見出しをカスタマイズ | CSS
文章の読みやすさを考える上で、見出しのデザインは欠かせません。
Bloggerでの見出しのカスタマイズの方法を紹介します。
h4{
margin: 0; /* デフォルトCSS打ち消し */
padding: 0.5em; /* 文字周りの余白 */
color: #494949; /* 文字色 */
background: #fffaf4; /* 背景色 */
background-color: #fffaf4; /* 背景色指定 */
border-left: solid 10px #ffaf58; /* 左線（実線 太さ 色）*/
font-size: 22px; /* 文字サイズ */
font-weight: bold; /* 文字ウェイト */
}
Bloggerでの見出しのカスタマイズの方法を紹介します。
Bloggerの標準エディターに出てくる「見出し」、「小見出し」、「準見出し」を使って、手軽に見栄えよくする方法を紹介します。
Bloggerでは、
<H2> 「見出し」記事の日付
<H3> 「小見出し」記事の名前
<H4> 「準見出し」コメント
として扱われているようです。あとはこのプロパティをCSSを使って変更します。
設定の手順
Step 1. Bloggerの設定画面を開き、左側のメニュー から「テーマ」を選びます。「ブログで使用中」の下にある「カスタマイズ」を選択します。
Step 2. 「テンプレートデザイナー」が開くので「上級者向け」→「CSSを追加」を選択します
Step 3. 右側の「カスタムCSSを追加」の欄に、自分が使用したい見出しのコードを書き込めば終了になります。（■終了）
※元に戻したいときは、この欄の中身を全て消去すれば、元に戻ります。
このブログで使用している見出しの設定
margin: 0; /* デフォルトCSS打ち消し */
padding: 0.5em; /* 文字周りの余白 */
color: #494949; /* 文字色 */
background: #fffaf4; /* 背景色 */
background-color: #fffaf4; /* 背景色指定 */
border-left: solid 10px #ffaf58; /* 左線（実線 太さ 色）*/
font-size: 22px; /* 文字サイズ */
font-weight: bold; /* 文字ウェイト */
}
