バナー広告

 

今回はアメブロ目次見出し作り方をお伝えします。

簡単30秒!テンプレートをコピペするだけ!

私の作ったテンプレートコピペするだけでなのでとっても簡単。

また後半では目次の枠や背景色をカスタマイズする方法も併せてご紹介します。

 

 

見本:こんな感じの目次がすぐにに作れます

今回ご紹介する方法を使うと下記のような目次や見出しが30秒ほどで作れます。

 

目次の見本

目次をクリックすると各見出しまでジャンプできます。

記事に目次や見出しを付けることにより読者さんが読みやすくなります。読みやすくなるのでブログの滞在時間も増えてグーグルからの評価も上がりやすくなるというメリットがあります。

他にもブログアフィリエイトの始め方の記事でアクセスアップのポイントをお伝えしておりますので是非ご覧ください。

とっても簡単なので一緒にやってみましょう。

 

アメブロの目次と見出しを同時に作るテンプレート

アメブロを作っていない人はアメブロの始め方と作り方の記事を参考にサクッと作ってしまいましょう。

また失敗しても良いように練習がてら新しい記事でチャレンジしてください^^

 

アメブロは初心者さんでもとっても使いやすいブログサービスですが残念ながら目次を付ける機能がありません。

そこでペタっと貼り付けるだけで簡単に目次と見出しを同時に作る事ができるテンプレートを作りました。

このテンプレートはアメブロだけでなく、HTMLの編集ができればどのブログサービスでも応用可能ですのでご自由にお使い下さい。

 

まずはアメブロの記事編集画面に移動して下さい。

 

アメブロHTML編集1104

記事編集画面の下「HTML表示」をクリック。

 

 

HTML編集を開いたまま

するとHTML編集画面になりますので、このまま開いておいてください。

 

次に目次と見出しを同時に作るテンプレートをコピーします。

 

【下記をコピーしてください】

こちらを最初から最後までコピーして下さい。見出し1~10まで用意していますが、見出しを5つで良い場合は後から簡単に消す事ができますのでまずは全部コピーしましょう。

また見出しを10個以上作る方法も後から解説します。

 

 

アメブロHTML目次テンプレ

  1. 赤枠に先ほどコピーしたテンプレートを貼り付けます。
  2. 青枠の「通常表示」をクリック。

 

 

テンプレ貼り付け完了

このように記事の一番上に目次ができました。

実際にアップすると「見出し1へジャンプ」をクリックすると本文の「見出し1」にジャンプします。

 

これでテンプレの貼り付けは終了です。とっても簡単ですね^^

 

※いつでもこのテンプレートを探せるように、この記事をパソコンのお気に入りに登録しておくと便利です。

目次のテキストを変更する方法

次は目次のテキストを変更しましょう。

 

目次のテキスト変更

「見出し1へジャンプ」をクリック。

 

テキスト変更ボタン

するとこのように「変更」と「削除」というボタンが表示されるので「変更」をクリック。

 

 

第一位のテキスト変更

このような画面が表示されるので「テキスト」の部分を自由に書き換えましょう。

今回は温泉のベスト5の記事を書こうと思うので「第一位!別府温泉」としてみました。後から何度でも変更できますので、まずは練習がてらお好きに書いてみてください。

文字の変更ができたら「決定」をクリック。

 

 

 

ちなみに私はブログアフィリエイトで人生が激変しました。もし現状が不安な方はぜひ私の稼いでいる秘密をご覧ください。

後藤の稼いでいる金額や裏ワザ的なノウハウもお伝えしております。

後藤の稼いでいる方法と秘密を見る

 

 

第一位のテキスト変更済

はい、このように目次の変更ができましたね。

同じやり方で第五位まで変えてみます。

 

 

TOP5まで変更

5位まで変更しました。温泉を調べていたら本当に行きたくなってきました笑

余った見出しは一旦、そのままにしておいてください。番外編やまとめなどを入れたくなるかもしれないので消すのは最後で問題ありません(いらない目次の消し方は後ほど解説します)。

また見出しを追加する方法も後ほどお伝えしますのでご安心ください^^

見出しのテキストを変更する際の注意点

目次のテキストの変更ができたら、次は見出しのテキストを変更しましょう。

 

と、ここで一つ注意点があります。

 

※見出しのテキストを際の注意点

見出し変更の注意点

例えば「見出し1」のテキストを変更する場合、普通は見出し1を全部消して、新しい文章を書きますね。

でも見出し1という文字を全て消してしまうと、上手くリンクがされなくなってしまう場合があるのです。つまり目次をクリックしても見出し1までジャンプしなくなります。

 

それでは目次を作る意味が無くなってしまいますね。

ですので、見出しのテキストを変更する際は「文字の1部を残した状態のまま」変更して下さい。

ちょっと分かりにくいと思うので一度やってみますね。

 

注意点2

このように「見出し1」を全部消さずに「見」だけを残した状態でテキストを変更します。

 

 

見出しの注意点3

このように「見」の後に続いてテキストを入力してください。

 

 

見出しの注意点4

最後に「見」を消します。

このやり方ならリンクが崩れませんので、目次をクリックしたらきちんとこの位置にジャンプされます。

 

 

見出しの注意点その5

同じように別の見出しも変更していきましょう。

 

 

本文入力

見出しのテキスト変更ができたら、「見出し1の文章をここに入力してください」というテキストを消してこのように本文を書いていくだけです。

 

 

【おすすめコンテンツ】中断バナー

 

とっても簡単ですね^^

いらない見出しを消す方法

今回の目次のテンプレートは10個まで見出しを作る事が可能です。でも大抵は10個も必要ありませんね^^

そこでいらない見出しを削除する方法をお伝えします。

 

いらない見出しを消す

目次の中のいらない見出しを全部選択してキーボードの「Delete」をクリック。

 

 

目次内の見出しを消す

これで目次内のいらない見出しを消す事ができました。1行分空いていますが気になる人はキーボードの「Backspace」をクリックすれば消えます。

 

 

本文の見出しを削除

後は本文の見出しを全部選択して削除するだけです。これでスッキリしますよ^^

 

※見出しを消す際の注意点

いらない見出しを消す場合は、記事が完成してからにしましょう。もしかしたら「まとめ」など他の見出しをつけたくなる場合もあるためです。

 

目次や見出しのカスタマイズ方法

つぎは目次の枠に色を付けたり背景色を付ける方法をお伝えします。

 

アメブロ目次デフォルト

今回お渡ししたテンプレートはこのように目次がとてもシンプルになっています。

このままでも見やすくて良いのですが、ブログのデザインに合わせて可愛く、かっこよく変更しましょう。

 

まずは目次の枠の色を変える方法です。

目次の枠の色を変える方法

目次枠の色

記事編集画面下の「HTML表示」をクリックして下さい。

 

★目次の枠の色

ボーダーカラーのコードを探す

この中で「border-color」と書かれた箇所を探してください。これはボーダーカラー、つまり日本語で言うと「枠の色」という意味です。

※キーボードの「Ctrl」を押しながら「F」をクリックすると検索窓が出ますので、そこにborder-colorをコピペして検索すると早いです。

そのborder-colorの隣に#ccccccという文字列がありますが、このccccccがカラーコードです。このカラーコードを変えることによって枠の色を変更できます。

ちなみにccccccは淡いグレーです。

 

下記はよく使うカラーコードです。

 

000000
ffffff
0000ff
水色 e0ffff
ff0000
ピンク ffc0cb
オレンジ ffa500
ffff00
薄い黄色 ffff99
008000
黄緑 adff2f
800080
薄い紫 dda0dd
グレイ 808080
薄いグレイ cccccc

 

今回は枠を青に変更してみます。ccccccを0000ffに変更。

一度確認してみましょう。「通常表示」をクリック。

 

 

実は私が稼げるようになった理由は美しいデザインや画像、文章力などの小手先のスキルを諦めて「最短で稼ぐためのノウハウに集中して取り組んだから」です。

最短で稼ぐためのノウハウを見てみる

 

 

目次の枠色を青に

きちんと枠が青になっていたら成功です。

アメブロの目次の背景色をカスタマイズ

次は目次の背景色をカスタマイズしてみます。

先ほどと同じく「HTML編集」をクリック。

 

★目次の背景色

目次の背景色変更

この中で「background」を探して下さい。その隣にある「ffffff」という文字列は「白」を表しています。

 

これを先ほどのカラーコードから選んで変更しましょう。

今回は水色にしてみます。

 

背景色を濃い青に

こんな感じになりました。

他の色を使いたい場合はカラーコードを参考にしてください。

目次のテキストの装飾(サイズ・色・太さの変更)

次は目次のテキスト装飾(サイズや太さ、色の変更)していきます。

 

目次のテキスト変更

装飾したいテキストを選んで上部の赤枠からカスタマイズします。

テキストの装飾方法が分からない場合は、アメブロの文字装飾方法の記事を参考にしてください。

 

 

目次カスタム終了

今回はこんな感じになりました。お好きなように色々とカスタマイズして遊んでみましょう^^

見出しの数を増やす方法

今回お渡ししたテンプレートは見出しが10個までとなっています。

通常の記事の場合は10個もあれば十分だと思いますが、念のため見出しの数を増やす方法をお伝えしておきます。

 

★目次部分に挿入するタグ

11個目の見出しを作る場合はまずは上記タグをコピーしてください。

コピーできたら「HTML表示」に移動。

 

 

一行空ける

見出し10へジャンプの下に1行空けて下さい(キーボードのエンターで)。

 

 

追加タグ貼り付け

先ほどコピーしたタグを貼り付けます。

※見出しを11個以上増やしたい場合は11という数字を12、13と変えていって下さい。

 

通常表示に移動して確認してみましょう。

 

見出し11追加

このように「見出し11へジャンプ」と表示されていたら成功です。

次は見出し側の設定を行いましょう。

 

★本文に挿入するタグ

 次に上記タグをコピーして「HTML編集」に移動して下さい。
 
 
 
見出しタグ貼り付け
見出しを挿入したい場所にコピーしたタグを貼り付けます。
 
「通常表示」に切り替えて確認しましょう。
 
 
 
見出し追加成功
このように見出し11が追加されていたら成功です。
 
この「11」という数字を変更すれば見出しはいくつでも増やしていくことができます。慣れるまでは大変かもしれませんが数をこなしていくうちにどんどん簡単になっていきますのでご安心ください^^

アメブロに目次や見出しを付ける方法まとめ

今回はアメブロに目次や見出しを設定する方法と、カスタマイズの仕方をお伝えしました。

長文になった場合や、今回例に挙げたようにランキング形式の記事を書く場合は目次はとても有効です。

そして目次や見出しをつけることによりユーザービリティが上がるのでグーグルからの評価も高くなるケースもあります。

 

またアメブロはアメブロはアフィリエイト禁止なの?の記事でもお伝えしたようにビジネス目的で使用すると削除リスクがともないます。

商用利用でブログを始めたい方はおすすめの無料ブログ一覧を参考にしてください。

 

また本文でもお伝えしましたが本日ご紹介したテンプレートはいつでも確認できるようにパソコンのお気に入りなどに登録しておいて下さいね^^

 

 

最後までありがとうございました。

 

記事を読んだらコチラをクリック
▼  ▼  ▼

バナー広告