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

この記事を読むのに必要な時間は約 18 分です。
(専門用語などにはポップアップする説明をつけているので時間が長く表示されることがあります。
ツールチップの機能については、こちら)

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

 

目 次

 


メルマガ購読者は、随時アップデートされていくテンプレートを利用できるようになります。

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

 

 

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

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

OGP画像について

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

抜粋文章について

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

目次の設定について

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

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

見出しの設定

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

スタイルシートのカスタマイズ

見出しで スタイルシートのカスタマイズをする場合は、色やフォントのサイズ・書体・太さなどが多いですね。
記述方法の違いがあったりするので気をつけてください。
例えばフォントサイズなどは、3種類のサイズの記述方法があったりします。

 

色の変更方法

色コード
タグの中で色に関するコードを指定しております。
その色コードを変更することで自分のアメブロにあわせた色に変更することが可能です。
コードの中で時折、記述方法が違う場合もあるので記述方法の違いにはご注意ください。
色コードは、下記のページで参照してください。

カラー見本カラーコードが一目でわかるWEB色見本
WEBカラー見本は、ブラウザで使用できるカラーを16進数で140色表示しております。WEBサイト作成の参考にしてください。 目 次 ...

 

その他

クイックナビ
記事の下部に追加するお知らせやクイックナビなどについては、フォーマットがあると便利ですね。
テンプレートにはお知らせのみが表示されています。
パソコンのブラウザでは見るとグローバルナビやサイドバーは、見えていますがスマホでは一切表示されないのが、アメブロの特徴なのです。
なので、お知らせという形などで簡易的にアクセスしてもらえるリンクを入れておくと便利なのです。
スマホユーザーの大半は、記事本体しか見ない方が多い中で入れてないと十分にフォロワーさんたちに伝えることができないですね。

メルマガ購読者は、随時アップデートされていくテンプレートを利用できるようになります。

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

WordPressなどで不具合がある場合の対応

目次表示の不具合
 WordPressに使う場合に使っているテーマによって上記のような感じで表示されることがあります。
その場合にどう対処するのか?
画像のようなままにするのは、嫌ですね

アメブロでは、上記のままで問題なく表示できるのですが、 WordPressで使うテーマによって枠からはみ出す場合があります。
下記のソースに書き換えて使うと問題なしになります。

1箇所だけの修正ですが、記載しているタグをセットだと思っておいて下さい。
 WordPressだけでなく他のブログで同様の症状の場合もこれで対応可能ですよ

 

利用者の声

利用者の声
ブログが検索される、読者が増える、見出しと目次の使い方
 Facebookの投稿より


利用者の声
コロナウィルスとの戦いに ホメオパシーを選ぶ時が来た‼️
 Facebookの投稿より

 


 

WEBのことならくまはちLABにお任せください。

サービス 制作事例
お問い合わせ
くじらモバイル登録
LINE@友だち追加

くまはちLABのご利用ありがとうございます!くまはちLABの最新情報をフォローしてゲットしてください!