アメブロの目次付きテンプレートの使い方

先日、告知させていただいたメルマガの読者プレゼントで配布させていただいている目次付きテンプレートの使い方について今回は、解説させていただきます。
いろんな種類のテンプレートありますが、ソーシャルにシェアされることを想定して作成しております。
最近つくづく思うのですが、ブログって書籍化されるほどの財産なのにその中の記事に見出しがないとか目次がないってありえなくないですか？

メルマガに登録してテンプレートをゲットする！

目　次

テンプレートの中にOGP設定
- OGP画像について
- 抜粋文章について
目次の設定について
見出しの設定
- スタイルシートのカスタマイズ
色の変更方法
その他
お知らせ

テンプレートの中にOGP設定

FacebookにシェアやTwitterへのTweetされたときのことを考えての設定になります。
よく挨拶から書かれる方も多いのですが、いつも違う人やはじめて訪問される方に見られていますか？
同じ人が見てるということは、あなたが書いてることを知ってる人たちなのであらためて挨拶いらない気もします。
それよりも冒頭でこの記事は、こういう内容の記事です。
ってことがわかることの方がいいと思います。

OGP画像について

「シェアされた時に表示される画像1200px X 630px」の部分を画像に差し替えます。
画像の大きさは、「1200px X 630px」の画像を用意してアメブロにアップロードします。
普通に挿入してその後に余分なタグを省くとOKです。
自社サイトがある方は、自社サイトにリンクさせることをおすすめします。
Facebookなどへのシェアについては、下記のページを参考にしてください。

アメブロなどをFacebookにシェアする３つの理由

抜粋文章について

タイトルが27文字までに収まっていると1行抜粋文章が表示されます。 27文字を超えている場合は、Facebookでは表示されないこともあります。「書き出し文章」の部分を変更して毎回抜粋文が同じにならないように工夫した方がいいですね。

目次の設定について

目次をつける理由は、ユーザーが便利であることだけでなく筆者も書く内容を迷わないため
目次は、必ずしも５つというわけではありません。
３つでも７つでも自由です。
目次の中にあるリンクは、各見出しのところまでページ内を飛ばして読めるためのリンクになってます。

上記のタグの中で蛍光ペンでマーカーしてるところがポイントです。
今回は、HTML属性でidを使用していますが、name属性でも可能です。
ダブルクォーテーションの中の言葉が符合していることが大事です。
これがわかると増やすことも可能ですね。
目次の中に自社サイトへのリンクを入れておくのもアリだと思います。

見出しの設定

各見出しについては、インラインスタイルシートと言ってHTMLタグの属性としてスタイルシートを設定しております。
アメブロについては、この方法でないとスマホでの表示がスタイルシートが反映しないようになっているのでこの部分で文字数が増えてしまうのは仕方ないかもしれません。
HTMLタグ含め40000字以内というアメブロの文字数制限に引っかからないように注意してください。
また、見出しタグはHタグです。divではありません。
Hタグでないと検索エンジンのクローラーが見出しに使われているキーワードを拾ってくれないこともありますね。