アメブロ用の見出しの作り方・使い方・注意点
この記事では下記のようなアメブロ用の見出しの作り方や使い方を紹介します。見出しの見本①見出しの見本② 見出しの見本③見出しの見本④ 見出しの見本⑤ 記事を見出しで区切ることで、読みやすく・分かりやすくできますよね。アメブロの見出しの設置方法を確認しておきましょう。あめっくま見出しを使って文章を区切ると、読者にとって読みやすく・分かりやすい記事にできますよ。自己紹介はこちら⇒なお、アメブロの見出しをスマホで設置する方法は👇の記事で解説しています。（この記事はPCで記事を書く人向け）アメブロの見出しをスマホで入れる方法を解説この記事では下記のようなアメブロ用の見出しをスマホで入れる方法を紹介しますameblo.jp目次 アメブロでの見出しの作り方・使い方・設置手順 中見出し・小見出しの作り方 見出しにはキーワードを入れて使おう 「div」や「fieldset」タグで見出しを作るのはNGこの記事を書いた人あめっくま Amebaオンラインレッスン認定講師 アメブロ収益UP講座を運営 コンサル生300名以上が収益UPに成功>> 提供サービスはこちら>> あめっくまをフォロー＼アメブロ20記事で5万PVの手法／アメブロで資産記事を作る方法はこちら ⇒＼ついに登場！アメトピ攻略法／アメトピ攻略法はこちら ⇒アメブロでの見出しの作り方・使い方・設置手順アメブロでの見出しは下記の流れで設置します。アメブロでの見出しの作り方 STEP1 素材を選ぶ 見出し素材の記事からデザインを決めて下さい STEP2 コードをコピー 見出しのコードをまるごとコピーします STEP3 HTML表示に貼り付け 記事作成画面を「HTML表示」にしてコードを貼り付け STEP4 見出しの中身を書く 記事作成画面を通常表示に戻して、見出しの中身の文章を書きましょうそれでは実際の操作を解説します。STEP1：素材を選ぶ最初に下記のリンクから、見出しのデザイン素材を選んで下さい。既に選んでいる人は、STEP2に進みましょう。囲み枠素材の記事一覧・シンプルな見出し（線・罫線・ラインタイプ）・目立つ見出し（枠・ボックスタイプ）・かわいい見出し（ピンク系・水玉・チェック柄）・おしゃれ・かっこいい見出し（ストライプ・グラデーション）たくさん用意しているので、お好きなデザインを選んで下さいね。STEP2：HTMLコードをコピー見出しのデザインを選ぶと、下記のようにコードが表示されます。グレーの部分のHTMLコードを全てコピーしましょう。あめっくまコードの意味は分からなくても大丈夫です。STEP3：HTML表示に貼り付け次にアメブロの記事作成画面で、「HTML表示」に切り替えてコードを貼り付けます。貼り付けたら通常表示に戻して下さい。すると下記のように見出しが設置されています。見出しのコードの貼り方も簡単ですね。続いて文章を入れましょう。STEP4：見出しの中身を書く最後に見出しの中身の文章を書きましょう。通常の文章と同じように、書き換えるだけでOK。中身を入れたら見出しの完成です。次の行から文章を書いて段落を作りましょう。なお文字サイズ・色・幅など、アメブロの見出しのカスタマイズ方法は👇の記事で解説しています。【アメブロの見出しをカスタマイズ】HTMLでデザインを好みに装飾しようこの記事ではアメブロの見出し素材をカスタマイズする方法を紹介します。ameblo.jp中見出し・小見出しの作り方当サイトの見出し素材のコードは大見出し用の「<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つですよね。詳しくは、👇の記事をチェックして下さいね。【アメブロのアクセスアップ】アクセス数を増やす8つのコツと優先順位この記事ではアメブロのアクセスを増やす方法を効果の高い順・優先度順に解説します。ameblo.jp見出しにキーワードは超重要ちなみに見出しにもキーワードを入れると、さらにアクセスが伸びやすいです。あなたの記事に対する、検索エンジンからの評価が高くなるのが理由。（SEO対策の1つ）記事を書く時に、狙ったキーワードを「記事タイトル」と「見出し」に入れる事が大事ということですね。なお見出しとSEOやアクセス数との関係は、👇の記事で詳しく解説しています。アメブロの見出しはSEO対策（検索エンジンからの集客）に欠かせない！アメブロの見出しには2つの役割があります。①段落を構成し、記事を読みやすくする ②検索エンジンに記事内容を伝える（SEO）ameblo.jpキーワードが分かれば集客は簡単例えばこの記事は「アメブロ 見出し 作り方」のキーワードを、記事タイトルと見出しに入れています。つまり「アメブロ 見出し 作り方」で検索する人向けに、検索エンジンの上位表示を狙っているということ。実際に下記のようにGoogle検索で1位を獲得しています。その結果、この記事は作成から数か月経過してもアクセスが安定しているというわけですね。このようにキーワードの設定方法と使い方が身に付くと、検索エンジンからの集客が可能です。すると、あなたが作成した過去記事に長期間・大量のアクセスが来ます。新記事と過去記事の両方が読まれる手法なので、アメブロが急速に成長していきますね。アメブロでの集客や収益をUPさせたいなら、重要なテクニックなので早めに習得しましょう！あめっくまキーワードを理解できると、アメブロの集客が簡単になりますよ。「div」や「fieldset」タグで見出しを作るのはNG見出しを「<div>タグ」や「<fieldset>タグ」で作っている人がいますが、致命的な間違いです・・・見出しは「<h>タグ」で作るのがルール。（当サイトの見出し素材は全て「<h>タグ」で作成しているので安心です）検索エンジンは「<h>タグ」の中のキーワードを、優先して確認します。検索エンジンは「<div>タグ」や「<fieldset>タグ」を見出しと認識しないので、検索エンジンに記事内容が伝わりにくい状態となります。ブログ集客で最も大事な検索エンジンからのアクセス数に悪影響が出るので、絶対にやめておきましょう。あめっくま「<div>タグ」や「<fieldset>タグ」で見出しを作っている人は、すぐに「<h>タグ」に切り替えましょう。見出しの関連記事一覧メインサイトの「アメブロメーカー」では、350種類以上の見出し素材を用意しています。メインサイト見出し素材【厳選350種】アメブロ用の見出し素材・デザイン！人気この初級編ブログでも一部を紹介しています。初級編ブログ見出し素材見出し素材・シンプルな見出し（線・罫線・ラインタイプ）・目立つ見出し（枠・ボックスタイプ）・かわいい見出し（ピンク系・水玉・チェック柄）・おしゃれ・かっこいい見出し（ストライプ・グラデーション）見出しの知識・見出しの作り方・使い方・注意点今ココ・アメブロの見出しはSEO・集客UPに大事・見出しを好みにカスタマイズする方法・アメブロの見出しをスマホで入れる方法a{text-decoration:underline;}a,a:visited{color:#3970B5;}.toc li{margin-bottom:1em;}.toc li a{text-decoration:underline dotted;}.toc{background:linear-gradient(-45deg,transparent 25%,rgba(200,200,200,.2) 25%,rgba(200,200,200,.2) 50%,transparent 50%,transparent 75%,rgba(200,200,200,.2) 75%,rgba(200,200,200,.2)) !important;background-size:4px 4px !important;border-top:4px double rgba(200,200,200,.5);border-bottom: 4px double rgba(200,200,200,.5);padding:1em 0 0.5em 0;}.h2-midashi{color:#2e3c56;border-radius:5px;position:relative;background:#f4f0e6;padding:0.5em 0.7em;margin-bottom:1.5em;}.h2-midashi span{position:absolute;top:100%;left:30px;border:15px solid transparent;border-top:15px solid #f4f0e6;width:0;height:0;}.h3-midashi{display:inline-block;color:#2e3c56;border-left:5px solid #fca60d;border-bottom:solid 3px #d7d7d7;background:#f4f4f4;padding:0.5em 1em 0.4em 0.5em;margin-bottom:1.5em;}.speech{display:flex;}.speech-img{width:20%;margin-right:3px;}.speech-img p{text-align:center;margin:0;}.speech-name{font-size:12px;text-align:center;margin:0}.speech-r{display:inline-block;}.speech-content{min-height:50px;background:#f4f0e6;border-radius:12px;padding:15px;margin:0;}.speech-content p{margin:0;}.speeech-t{width:0;height:0;border-style:solid;border-width:20px 20px 20px 0;border-color:transparent #f4f0e6; transparent transparent;margin-top:20px;}.link-box{position:relative;border:2px solid #d2b48c;padding: 20px 15px 15px 15px;}.link-box div{position:absolute;top:-0.8em;left:8px;background:#fff;color:#b4886c;padding: 0 0.5em;}.link-box div p{margin:0;}.link-box p:not(:last-child){margin-bottom:1em}.link-box p(:last-child){margin-bottom:0em}.link-box2{position:relative;border:2px solid #9dd3a8;padding: 20px 15px 15px 15px;}.link-box2 div{position:absolute;top:-0.8em;left:8px;background:#fff;color:#59a136;padding: 0 0.5em;}.link-box2 div p{margin:0;}.link-box2 p:not(:last-child){margin-bottom:1em}.link-box2 p(:last-child){margin-bottom:0em}.profile{font-size:1.1em;color:#5c5c5c;text-align:center;background:#9dd3a8;padding:5px;}.profile-wrap{display:flex;flex-wrap:wrap;padding:15px;text-align:center;background:#fff;border-left:2px solid #9dd3a8;border-right:2px solid #9dd3a8;border-bottom:2px solid #9dd3a8;}.profile-left{min-width:30%;margin:0 auto;}.profile-right{min-width:70%;}.profile-right ul{margin-top:0.5em;margin-bottom:0;margin-left:0;display:inline-block;text-align:left;}.profile-right li{margin-bottom:0.5em;}.profile-right p:not(:last-child){margin-bottom:0.5em;}@media screen and (max-width:480px){.profile-wrap{padding-top:0;}.profile-right{margin:0 auto;}.profile-right ul{padding-left:15px;}}.img-double{display:flex;flex-wrap:wrap;}.img-double-inner{margin:0 auto 11px auto;text-align:center;}.img-double-copy{font-size:0.9em;}.img-double-img{margin-bottom:8px}.img-double-link{margin-bottom:24px;}.teikei>div>p{margin-bottom:0.5em}.teikei hr{border-top:2px dotted #d2b48c;width:98%;border-bottom:none;margin:1em 0;}.teikei span{color:orange}.nagare{padding:16px 5px;border:1px solid #273653;border-radius:4px;}.nagare-title{font-weight:bold;font-size:1.1em;text-align:center;margin-bottom:0.5em;}.nagare ul{list-style:none;padding:0;margin:0 !important;}.nagare li{overflow:hidden;margin:0;display:flex;}.nagare li:not(:last-child) .nagare-conten{margin-bottom:1em}.nagare-step{width:70px;padding-top:18px;text-align:right;padding-right:1em;font-size:14px;position:relative;}.nagare-dot{width:12px;height:12px;background:#f7ab00;position:absolute;right:-8px;top:24px;border-radius:100%;}.nagare-content{width:calc(100% - 70px);padding:18px 0.5em 0.8em 1em;border-left:3px #e5e5d1 solid;}.h4-midashi{display:inline-block;background:#e6f3f4;border-radius:5px;padding:5px 10px}.maru{border:3px double #d2b48c;padding:15px;}.ng{border:3px double lightgray;padding:15px}.maru li,pt li{margin-bottom:0.5em}.em1 p:not(:last-child){margin-bottom:1em}.em1 p(:last-child){margin:0}.pt{background:#e7f5fe;padding:15px}
