こんにちは。博士のプログラミング教室 Candy かわの ゆか です。
最近、アメブロでもブログを始めました。アメブロは初心者でも使いやすく、手早く記事がまとめられる仕組みが整っていて、とても嬉しいですね。
でも、ちょっと工夫して見やすい記事を書きたいな。と思いました。
簡単に、見出しや要点に囲み枠をつけられたら、読みやすい記事になるなぁ。なんて思いませんか？
そこで今回はその方法をご紹介します。
今日のテーマは「コピペで簡単！アメブロの見出しに飾りをつけよう！」です。
アメブロの見出し機能
見出しとは、「章のタイトル」のことです。ブログにもお話のまとまりごとにタイトルをつけるとわかりやすくなりますよね。
アメブロには、見出しをつける機能があります（図1）。
図1：アメブロの見出し機能
見出しには「hタグ」というタグを使います。これは「見出し」を意味するタグです。
のようにhの後ろにつく数字が小さいほど大きな見出しです。
上記のアメブロの機能を使い見出しを作ってHTML表示を見てみると下記のようなHTMLが作成されています。
<h2>大見出し</h2>
<h3>中見出し</h3>
<h4>小見出し</h4>
見た目はこんな感じ
図2：見出しの見た目
このままではなんとなくそっけないですね。
というわけで早速変更。アメブロではHTML表示でタグの中身を少し変更してください。わからない場合は下記のコードをコピペでOKです。
見出しに飾りをつけてみよう
見出しに飾りをつけてみましょう。飾りつけにはCSSを使います。「hタグ」の中にある「style」というキーワードに注目してください。「style」以降の「””」で囲われた中身が見た目を指定するCSSの書き方です。
見出しに下線をつける
見出しに下線をつけてみましょう。
大見出し
<h2 style="width: 80%; border-bottom: 2px solid #3299FF; padding-top: 5px; padding-left: 10px; padding-bottom: 5px;">大見出し</h2>
中見出し
<h3 style="width: 80%; border-bottom: 2px solid #3299FF; padding-top: 5px; padding-left: 10px; padding-bottom: 5px;">中見出し</h3>
小見出し
<h4 style="width: 80%; border-bottom: 2px solid #3299FF; padding-top: 5px; padding-left: 10px; padding-bottom: 5px;">小見出し</h4>
見出しの先頭にワンポイント
見出しの先頭に縦の線を加えてちょっとしたワンポイントにしてみましょう。
大見出し
<h2 style="width: 80%; border-left: 12px solid #3299FF; border-bottom: 2px solid #3299FF; padding-top: 5px; padding-left: 10px; padding-bottom: 5px;">大見出し</h2>
中見出し
<h3 style="width: 80%; border-left: 12px solid #3299FF; border-bottom: 2px solid #3299FF; padding-top: 5px; padding-left: 10px; padding-bottom: 5px;">中見出し</h3>
小見出し
<h4 style="width: 80%; border-left: 12px solid #3299FF; border-bottom: 2px solid #3299FF; padding-top: 5px; padding-left: 10px; padding-bottom: 5px;">小見出し</h4>
色を変えたい時は？
色はCSSで指定されています。「style」以降の「””」の中をよくみてみてください。
「#3299FF」と書かれているところがありますね。この「#」のうしろの6つの英数字が色を示しています。この色指定の文字を変更すればお好きな色に変更可能です。
例えばこちらのサイトなどでお好きな色を探して「#」のうしろの英数字を変更してみてください。
Webサイトで使える色については他にもたくさんの情報がインターネット上に提供されています。色の選び方、ご自身で使いやすいサイトを見つけてみてください。
まとめ
今回は、見出しに飾りをつける方法をご紹介しました。
今回は「hタグ」を簡単に紹介しましたが、HTMLのタグはWebサイトの構成を示すもので、きちんとタグの意味づけ通りに使われていることはSEO対策としても有効です。
ぜひ見出しは「hタグ」と覚えて使ってみてください。
今日はこれでおしまい。
