デザイン制作・パソコンレッスン・メディカルアロマ講座・セッション・ハンドメイドアクセサリー販売 横浜市都筑区

アメブロで見出しタグを使ってみよう

みなさん、こういうものを見たことありませんか?

これはHTMLタグの中の1つ、見出しタグというものです。

見出しタグのしくみ

HTMLタグはブラウザ上では見えません。

HTMLの中に書き込むと
ブラウザ上では、指定されたカタチで見えるわけです。

デザインカスタマイズを一切しなくても
h1からh6まで、数字が大きくなるほど字の大きさが小さくなります。

見出しタグは必ず使わなければいけないものというわけではありませんが、
SEO対策(検索エンジン最適化)においてはブログの本文よりも検索の優先順位が高くなりますので是非とも使用したいところ。

しかし、使い方にちょっとルールがあります。

注意事項

①h1は1ページに1つしか使えません。
アメブロでは、既にブログのタイトルとして使用されています。オリジナルのブログヘッダーを使用している方は気づかないかもしれませんが、カスタマイズせず使用している方がもし間違って使用すると、やたら大きな文字が出現します。
アメブロでは使用できないと思ってください。

②h2~h6は何度使用しても大丈夫ですが、h2,h3,h4…というように順番に使用したほうが効果的とのこと。
例えば、h3のほうが可愛いから、ってh2より先にh3を使うのは実はダメなんですって。
アメブロの記事本文での使い分けとしては
h2   中見出し
h3〜h6 小見出し
という考え方がよいかと思います。

③見出しタグはh6までです。h7以降はありません。書いても無効です。また、必ずしもh6まで必要なわけではありません。h3、h4まででも十分です。

④アメブロにおいて、記事のタイトルの部分は、実は見出しタグではないのです!記事のタイトル部分にデザイン設定する方法についてもこの記事の中で説明しますね。

記事本文への設定方法

①記事編集画面を開きます
②見出しにする文字を入力してください。
③下の方にある「HTML表示」のタブに切り替えます
④<p>入力した文字</p> このように表示されていると思います
⑤文字の前後にある<p>と</p>を見出しタグ<h2>と</h2>に書き換えます
h3以降を使用する場合もやり方は同じです
⑥HTML表示タブの左隣にある「通常表示」タブに切り替えると、最初に入力した文字が大きく表示されています。
※デザインの設定をする人もしない人も

おしゃれに使ってみる

たまに見かけるのですが、可愛い見出しがついているけど見出しタグになっていない残念な人がいますね。
デザインとしては目立つけど、見出しタグにしないと勿体ない!
スマホで見たときに見出しのデザインが無効になることがあります。
見出しタグになっていないと、ただのテキストとして扱われ、見出しにみえないのです。
見出しタグになっていれば、スマホからデザイン設定が無効でも、見出しタグとしては機能しています。

それでは、見出しタグにデザインする方法を説明していきます。
【記事本文への設定方法】のやり方だけでは、単純に字の大きさが違うだけですが、cssカスタマイズの設定をしてみます。(自信のない方はここまでにしましょう)

css編集用デザインのテンプレートを使用していることが前提です。
css編集用ではないテンプレートの方で変更に抵抗ある方は【記事本文への設定方法】までにしておきましょう。

cssカスタマイズテンプレートへの変更方法

①ホーム→ブログ管理(管理トップ)
②デザインの設定
③他のカテゴリからブログデザインを探す→カテゴリから探す→カスタム可能
④css編集用デザインとかいてあるものでしたらいずれも可能。お好きなレイアウトのものを選んでください。
⑤オンマウスにして「表示を確認する」→確認してOKなら「適用する」

見出し用cssを設定する箇所

①ホーム→ブログ管理(管理トップ)
②運用中のデザイン CSS編集用デザイン→CSSの編集
③いちばん最後にカーソルを持って行く
④コピー&ペーストする

cssのタグ

①設定するのに必ず必要なモノ

.skin-entryBody h2 { /* 中見出しh2 */
こちらに入力します
}

.skin-entryBody h3 { /* 小見出しh3 */
こちらに入力します
}

.skin-entryBody h4 { /* 小見出しh4 */
こちらに入力します
}

.skin-entryBody h5 { /* 小見出しh5 */
こちらに入力します
}

.skin-entryBody h6 { /* 小見出しh6 */
こちらに入力します
}

②デザインを選ぶ

「コピペだけで使える」趣旨の見出し素材から好きなものを選んできます。
例えば、選んできたタグがこれの場合

h1 {
  background: #dfefff;
  box-shadow: 0px 0px 0px 5px #dfefff;
  border: dashed 1px #96c2fe;
  padding: 0.2em 0.5em;
  color: #454545;
}

赤字の部分をコピーします。
それを
①のタグの中にある「 こちらに入力します 」のところに貼り付けます

【使用例】
.skin-entryBody h2 { /* 中見出しh2 */
 background: #dfefff;
box-shadow: 0px 0px 0px 5px #dfefff;
border: dashed 1px #96c2fe;
padding: 0.2em 0.5em; color: #454545;
}

【注意】
{  } ; が抜けたり全角になったりすると機能しませんので
慎重に作業してくださいね。

最後に必ず保存をかけます

記事のタイトルにも設定する場合

.skin-entryTitle {
こちらに入力します
}

コピーして使える見出しデザインリンク集

わたなべ あいこ
この記事を書いた人
デザイナー、メディカルアロマアドバイザー、 ヒーラー・占い師、ハンドメイド作家
SNSでフォローする