vol.238 Bloggerで見出しをカスタマイズ

ブログで見やすく表現するために、見出しをつけたくなります。
で、どうせだったら、見出しをカスタマイズして、少し工夫をしてみたいなーと思い、Bloggerで設定する方法をまとめてみました。

見出しを設定する時に、hタグを使います。
なので、まず、今使っているブログでどれぐらい見出しが設定されているかを確認します。
ブログのhtmlソースでh1～h6のスタイルが設定されている箇所を確認します。
確認方法は、
まず、「テンプレート」 > 「HTMLの編集」選び、ブログのhtmlソースを開きます。
そして、Ctrl + Fで出てくる検索機能を使い、h1～h6をキーワードに検索します。
そのうち、1件もヒットしなかったhタグは、未使用なのでそれを使います。
ちなみに、私の場合は、h5が未使用だったので、これを使います。
なので、以後の説明では、h5のタグで設定する例となりますが、ご自身で使われているブログで使用されていないhタグと置き換えてください。

で、h5に見出しのスタイルを適用した結果を先にお見せします。

見出し

やり方は、
①「テンプレート」 > 「カスタマイズ」を選びます。

②「上級者向け」 > 「CSSを追加」と選ぶと、「カスタムCSSを追加」というテキストエリアが表示されます。ここに見出しスタイルのCSSのコードを書いていきます。

③「カスタムCSSを追加」のテキストエリアに見出しスタイルのCSSのコードを追加します。試しに、以下のソースをコピーして、貼付けをし、「ブログに適用」ボタンを押してください。

h5{
border-left: 8px #c63 solid;
font-size: 18px;
font-weight: bold;
margin: 5px 0;
padding: 5px 0 5px 10px;
border-bottom: 1px #c63 solid;
}

④適当に記事を追加して、見出しスタイルを適用した、hタグを使ってみましょう。

どうでしょうか？この記事に出ている見出しと同じものが表示されましたでしょうか？
ここでは、あくまでBloggerで見出しをカスタマイズしてそれを使用する方法だけをご紹介するだけなので、見出しのスタイルを好みに合わせたい時は、頑張ってCSSを解いて作ってみましょう！

明日以降の記事では、今日追加した見出しをどんどん活用します。

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法【電子書籍】[ 谷 拓樹 ]