この記事では下記のようなアメブロ用の見出しの作り方や使い方を紹介します。
記事を見出しで区切ることで、読みやすく・分かりやすくできますよね。
アメブロの見出しの設置方法を確認しておきましょう。
なお、アメブロの見出しをスマホで設置する方法は👇の記事で解説しています。（この記事はPCで記事を書く人向け）
アメブロでの見出しの作り方・使い方・設置手順
アメブロでの見出しは下記の流れで設置します。
-
STEP1素材を選ぶ見出し素材の記事からデザインを決めて下さい
-
STEP2コードをコピー見出しのコードをまるごとコピーします
-
STEP3HTML表示に貼り付け記事作成画面を「HTML表示」にしてコードを貼り付け
-
STEP4見出しの中身を書く記事作成画面を通常表示に戻して、見出しの中身の文章を書きましょう
それでは実際の操作を解説します。
STEP1：素材を選ぶ
最初に下記のリンクから、見出しのデザイン素材を選んで下さい。既に選んでいる人は、STEP2に進みましょう。
たくさん用意しているので、お好きなデザインを選んで下さいね。
STEP2：HTMLコードをコピー
見出しのデザインを選ぶと、下記のようにコードが表示されます。
グレーの部分のHTMLコードを全てコピーしましょう。
コードの意味は分からなくても大丈夫です。
STEP3：HTML表示に貼り付け
次にアメブロの記事作成画面で、「HTML表示」に切り替えてコードを貼り付けます。
貼り付けたら通常表示に戻して下さい。
すると下記のように見出しが設置されています。
見出しのコードの貼り方も簡単ですね。続いて文章を入れましょう。
STEP4：見出しの中身を書く
最後に見出しの中身の文章を書きましょう。通常の文章と同じように、書き換えるだけでOK。
中身を入れたら見出しの完成です。次の行から文章を書いて段落を作りましょう。
なお文字サイズ・色・幅など、アメブロの見出しのカスタマイズ方法は👇の記事で解説しています。
中見出し・小見出しの作り方
当サイトの見出し素材のコードは大見出し用の「<h2>～</h2>」タグで用意しています。
中見出しの場合は「<h3>～</h3>」・小見出しの場合は「<h4>～</h4>」にコードを変更しましょう。
例えば下記の見出しを、「大見出し」から「中見出し」に変えてみます。
<h2 style="font-size: 24px; background-color: #fbe4ee; background-image: radial-gradient(#ffffff 12%, transparent 15%), radial-gradient(#ffffff 12%, transparent 15%); background-position: 0 0, 10px 10px; background-size: 20px 20px; padding: 0.5em 0.7em;">見出しのテキスト</h2> <p> </p>
<h3 style="font-size: 20px; background-color: #fbe4ee; background-image: radial-gradient(#ffffff 12%, transparent 15%), radial-gradient(#ffffff 12%, transparent 15%); background-position: 0 0, 10px 10px; background-size: 20px 20px; padding: 0.5em 0.7em;">見出しのテキスト</h3> <p> </p>
コードの緑線の部分が変わったところです。「<h2>～</h2>」を「<h3>～</h3>」に変えています。
ちなみに文字サイズの「font-size: 24px;」から「font-size: 20px;」に変えて小さくしました。
このように大見出し・中見出し・小見出しの順に文字を小さくすると、見た目でも役割が分かりやすいですね。
見出しには親子孫関係がある
「大見出し」が大きな段落を作り、大見出しを「中見出し」が分割・中見出しを「小見出し」が分割する役割があります。
つまり見出しには「親＝大見出し」「子＝中見出し」「孫＝小見出し」の関係があり、崩して使うと分かりづらい記事となりますよね。
デザインやサイズだけで見出しを選ぶのではなく、順番を守って使いましょう。
なお大見出し・中見出し・小見出しにはそれぞれ違うデザイン素材を採用するのが基本です。
例えば下記のように、それぞれのデザインをお好みで選んで決めるといいですね。
また記事によって見出しのデザインがコロコロ変わると、読者から分かりづらいです。ブログ内での使い方をできるだけ統一しましょう。
見出しの親子孫関係に注意して下さいね。
見出しにはキーワードを入れて使おう
記事を書く時に、キーワードを「記事タイトル」に入れるとアクセスが伸びやすくなります。
アメブロでアクセスを伸ばす手法の1つですよね。詳しくは、👇の記事をチェックして下さいね。
見出しにキーワードは超重要
ちなみに見出しにもキーワードを入れると、さらにアクセスが伸びやすいです。
あなたの記事に対する、検索エンジンからの評価が高くなるのが理由。（SEO対策の1つ）
記事を書く時に、狙ったキーワードを「記事タイトル」と「見出し」に入れる事が大事ということですね。
なお見出しとSEOやアクセス数との関係は、👇の記事で詳しく解説しています。
キーワードが分かれば集客は簡単
例えばこの記事は「アメブロ 見出し 作り方」のキーワードを、記事タイトルと見出しに入れています。
つまり「アメブロ 見出し 作り方」で検索する人向けに、検索エンジンの上位表示を狙っているということ。
実際に下記のようにGoogle検索で1位を獲得しています。
その結果、この記事は作成から数か月経過してもアクセスが安定しているというわけですね。
このようにキーワードの設定方法と使い方が身に付くと、検索エンジンからの集客が可能です。
すると、あなたが作成した過去記事に長期間・大量のアクセスが来ます。
新記事と過去記事の両方が読まれる手法なので、アメブロが急速に成長していきますね。
アメブロでの集客や収益をUPさせたいなら、重要なテクニックなので早めに習得しましょう！
キーワードを理解できると、アメブロの集客が簡単になりますよ。
「div」や「fieldset」タグで見出しを作るのはNG
見出しを「<div>タグ」や「<fieldset>タグ」で作っている人がいますが、致命的な間違いです・・・
見出しは「<h>タグ」で作るのがルール。（当サイトの見出し素材は全て「<h>タグ」で作成しているので安心です）
検索エンジンは「<h>タグ」の中のキーワードを、優先して確認します。
検索エンジンは「<div>タグ」や「<fieldset>タグ」を見出しと認識しないので、検索エンジンに記事内容が伝わりにくい状態となります。
ブログ集客で最も大事な検索エンジンからのアクセス数に悪影響が出るので、絶対にやめておきましょう。
「<div>タグ」や「<fieldset>タグ」で見出しを作っている人は、すぐに「<h>タグ」に切り替えましょう。
メインサイトの「アメブロメーカー」では、350種類以上の見出し素材を用意しています。
この初級編ブログでも一部を紹介しています。
見出し素材
見出しの知識・見出しの作り方・使い方・注意点今ココ