Blogger：初心者でもできた！見出しのカスタマイズ

本文中の見出しをカスタマイズ

↑のように本文中で見出しを付けたい場合、好きなデザインの見出しを付けることができます。
まずは、テンプレートのHTMLで使用していないHeading（見出し）を確かめましょう。
確かめ方は、左側にあるバーで「テンプレート」を開き、「ブログで使用中」の画像の下にある「HTMLを編集」のアイコンをクリック。
するとHTMLが表示されるので、文字列の検索を使ってh1から順番に検索していきます。

☆検索の仕方
①HTML編集画面で、HTML上のどこでも良いので、カーソルを合わせます。
②「Ctrl + F」　を押すと、右上に検索ボックスが表示されます。
③あとは検索したい文字列を入力しEnterキーを押すと、HTML上の該当の文字列の背景が黄色くなります。

私の場合、h1～h5あたりまでは検索で引っかかり、使用中であることが分かりました。
そして、h6は検索に引っかからなかったので、h6を使うことにしました。
次に、好きな見出しのデザインのCSSを手に入れます。
ネットで「見出し　デザイン　CSS」などで検索するといろいろな見出しとそのCSSが見つかるので、自分の好みのものを選び、CSSをコピーします。
そして、左側にあるバーで「テンプレート」を開き、「ブログで使用中」の画像の下にある「カスタマイズ」のアイコンをクリック→「上級者向け」→「cssを追加」と進み、そこに貼り付けます。
私の場合は下記のようにしました。

/*h6の見出し*/
h6 {
position: relative;
padding: 0 .4em .1em;
font-size: 18px;
}
h6::after {
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
content: '';
width: 100%;
height: 10px;
background-color: #b6f0fc;
}

最後に、右上にある「ブログに適応」のボタンを押せば完了です。

では、実際に見出しを本文中で使ってみましょう。

まず、いつも通りに本文を書きます。
次に、左上のボタンでHTMLの表示に切り替え、見出しにしたい文の前後に<h6>と</h6>を付け、見出しにしたい文を挟むようにします。

<h6>本文中の見出しをカスタマイズ</h6>

プレビューで、きちんと見出しになっていることが確認できればオッケーです。


Bloggerその他のカスタマイズ方法↓
Blogger：初心者でもできた！モバイル表示をカスタマイズ①　(ブログタイトルの改行、文字サイズ)

Blogger：初心者でもできた！モバイル表示をカスタマイズ②　(投稿タイトルと、記事本文を見やすく)

Blogger：初心者でもできた！モバイル表示をカスタマイズ③　（ガジェットの表示、「人気の投稿」ガジェットを見やすく）