//]]>

$type=carousel$columns=4$cat=hide$show=home

$hide=page-404-mobile

Bloggerの記事にTable of Contents(目次)を自動生成するプラグインを加える方法


文字数の多い記事では、小見出しを加えることで、系統だった文章構成になり、ユーザーが書かれている内容の概要を素早く把握でき、理解する手助けとなります。

複数の小見出しが使用されているボリュームのある記事の冒頭に目次があると更にユーザーの利便性が向上します。

目次があるコンテンツ(記事)の代表的例がWikipediaです。以下は、Wikipediaの「ブログ」の解説ページの冒頭部です。


Bloggerの記事にTable of Contents(目次)プラグインを加える方法

WordPressでは、Wikipediaに似たスタイルの目次を自動生成して記事内に追加するプラグインがあります。ブロギングライフでも使っています。

Bloggerは、WordPressの様なプラグイン操作管理機能は備えていませんが、プラグイン(ソフトウェアのモジュール)をマニュアルでインストールして、拡張機能を追加することが可能です。

ここでは、MyBloggerTricks.comが提供するTOC(Table of Contents)プラグインを使用して、Bloggerの記事に目次を追加する用法を紹介します。


MyBloggerTricks TOC Plugin V 2.0の特徴

  • 階層ヘディングタグに対応(h2, h3, h4,..)
  • ナビゲーション番号を付与
  • 自動的にヘディングタグを検知する(H2からH6まで)
  • コンテントセクションに自動でIDを付与する
  • TOC内のアンカーリンクにIDを付与する
  • フラットなリストと複数レベルのリストに対応
  • 表示/非表示のオプション
  • 圧縮されたスクリプト
  • 軽量で高速
  • SEOフレンドリー
  • 簡単にカスタマイズ可能
  • モバイル レスポンシブ対応
  • 呼び出された時のみ実行

MyBloggerTricks TOC Plugin V 2.0のインストール

Bloggerの管理画面から「テーマ」をクリックし、「HTMLの編集ボタン」を押します。テンプレートのHTMLソースコードが表示されます。ソースコード内のどこかをクリックしてカーソルをソースコード内に表示させた後、コントロール+"F"(Macの場合は、コマンド+"F")で、"</head>"を検索します。

</head>の上(前)に、以下のコードを貼り付けます。
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<script type='text/javascript'> 
//<![CDATA[ 
//*************TOC Plugin V2.0 by MyBloggerTricks.com 
function mbtTOC2(){var a=1,b=0,c="";document.getElementById("post-toc").innerHTML=document.getElementById("post-toc").innerHTML.replace(/<h([\d]).*?>(.*?)<\/h([\d]).*?>/gi,function(d,e,f,g){return e!=g?d:(e>a?c+=new Array(e-a+1).join("<ol class='point"+a+"'>"):e<a&&(c+=new Array(a-e+1).join("</ol></li>")),b+=1,c+='<li><a href="#point'+b+'">'+f+"</a>",a=parseInt(e),"<h"+e+" id='point"+b+"'>"+f+"</h"+g+">")}),a&&(c+=new Array(a+1).join("</ol>")),document.getElementById("mbtTOC2").innerHTML+=c}function mbtToggle2(){var a=document.getElementById("mbtTOC2"),b=document.getElementById("Tog");"none"===a.style.display?(a.style.display="block",b.innerHTML="hide"):(a.style.display="none",b.innerHTML="show")} 
//]]> 
</script>
    
次に、"]]></b:skin>"を検索して、すぐ上に以下のCSSコードを貼り付けます。
/*####TOC Plugin V2.0 by MyBloggerTricks####*/
.mbtTOC2{border:5px solid #f7f0b8;box-shadow:1px 1px 0 #EDE396;background-color:#FFFFE0;color:#707037;line-height:1.4em;margin:30px auto;padding:20px 30px 20px 10px; font-family:Oswald, arial;display: block;width: 70%;}.mbtTOC2 button{background:#FFFFE0; font-family:oswald, arial; font-size:22px;position:relative; outline:none;border:none; color:#707037;padding:0 0 0 15px;}.mbtTOC2 button a {color:#0080ff; padding:0px 2px;cursor:pointer;} 
.mbtTOC2 button a:hover{ text-decoration:underline; } 
.mbtTOC2 button span {font-size:15px; margin:0px 10px; }

.mbtTOC2 li{margin:10px 0;  } 
.mbtTOC2 li a {color:#0080ff; text-decoration:none; font-size:18px; text-transform:capitalize;} 
.mbtTOC2 li a:hover {text-decoration: underline;}.mbtTOC2 li li {margin:4px 0px;} 
.mbtTOC2 li li a{ color:#289728; font-size:15px;}

.mbtTOC2 ol{counter-reset:section1;list-style:none}
.mbtTOC2 ol ol{counter-reset:section2}
.mbtTOC2 ol ol ol{counter-reset:section3}
.mbtTOC2 ol ol ol ol{counter-reset:section4}
.mbtTOC2 ol ol ol ol ol{counter-reset:section5}
.mbtTOC2 li:before{content:counter(section1);counter-increment:section1;position:relative;padding:0 8px 0 0;font-size:18px}
.mbtTOC2 li li:before{content:counter(section1) "." counter(section2);counter-increment:section2;font-size:14px}
.mbtTOC2 li li li:before{content:counter(section1) "."counter(section2) "." counter(section3);counter-increment:section3}
.mbtTOC2 li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4);counter-increment:section4}
.mbtTOC2 li li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4)"." counter(section5);counter-increment:section5}
/* 
.point2 {list-style-type:lower-alpha} 
.point3 {list-style-type:lower-roman} 
.point4 {list-style-type:disc} 
*/
    

表示色のカスタマイズ

お好みに応じて、以下の色番号の部分を変更します。

  • コンテナの背景色:#FFFFE0
  • 縁取り線の色:#f7f0b8
  • ヘッドラインテキストの色:#707037
  • アンカーリンクカラー:#0080ff
  • フーバーカラー:#289728
備考:
英文字、ローマ数字でのリストスタイルで表示する場合は、最後と最後から5番目の行のコメント記号(/* と */)を削除して下さい。
<data:post.body/>を検索して、以下のコードに置き換えます。
<div id="post-toc"><data:post.body/></div>
注意事項:
以下のコードはテンプレート内に複数あります。全て以下のコードに置換して下さい。

テンプレートを保存します。以上で、プラグインのインストールは完了です。

目次(TOC)を記事内で表示させる方法

見出しの数が少なく、短い記事には目次は必要ありません。目次は、見出しが一定数以上(最低3か4)ある場合に設置するのが適しています。

以下の2ステップで、記事内に目次を表示させることができます。

ステップ1: TOCコンテナの場所にコードを設置

記事の編集モードを"HTML"に変更して、目次を表示させる場所に以下のコードを挿入します。
<div class="mbtTOC2"> 
<button>Contents <span>[<a onclick="mbtToggle2()"  id="Tog">hide</a>]</span></button>  <div id="mbtTOC2"></div> 
</div>

ステップ2: TOCファンクションコールの設置

TOCプラグインの機能を実行するための呼び出す以下のJSコードを記事の最後に追加します。
<script>mbtTOC2();</script>

記事を表示して、目次が表示されていれば、作業完了です。

コメント

BLOGGER

関連記事とスポンサーリンク

Name

AdSense,4,Blogger SEO,11,Blogger ニュース,2,Blogger 活用法,22,Bloggerの基本機能と使い方,12,Bloggerの基本設定,7,MagOne,4,SNS,4,お勧め記事,16,お知らせ,1,その他,1,
ltr
item
Blogger101@ブロギングライフ : Bloggerの記事にTable of Contents(目次)を自動生成するプラグインを加える方法
Bloggerの記事にTable of Contents(目次)を自動生成するプラグインを加える方法
文字数の多い記事では、小見出しを加えることで、系統だった文章構成になり、ユーザーが書かれている内容の概要を素早く把握でき、理解する手助けとなります。BloggerでTOCプラグインをインストールして記事内に目次を追加表示する方法を紹介します。
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMtdhHOZEu8ICVUGk2hUaYuaROLgi4-Zy_VJM4KD5e1WAktqprtUwPRRdXEYlH934KcU-asEcS_PELHVjl61d1kMdaihBFGVRKt0cx-smi0XH37-VUBluG42hrd-gqvIqRQNvDidcV7SI/s640/Set+up+Blogger+TOC+plugin.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMtdhHOZEu8ICVUGk2hUaYuaROLgi4-Zy_VJM4KD5e1WAktqprtUwPRRdXEYlH934KcU-asEcS_PELHVjl61d1kMdaihBFGVRKt0cx-smi0XH37-VUBluG42hrd-gqvIqRQNvDidcV7SI/s72-c/Set+up+Blogger+TOC+plugin.png
Blogger101@ブロギングライフ
https://blogger101.blogging-life.com/2018/03/set-up-blogger-table-of-contents-plugin.html
https://blogger101.blogging-life.com/
https://blogger101.blogging-life.com/
https://blogger101.blogging-life.com/2018/03/set-up-blogger-table-of-contents-plugin.html
true
6719002676499593843
UTF-8
Loaded All Posts Not found any posts 全てを見る さらに読む 返信 返信をキャンセル 削除 By Home ページ 投稿 全てを見る 関連記事 ラベル アーカイブ SEARCH 全ての投稿 お探しのページが見つかりませんでした。 ホームに戻る Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network コードを全てコピー コードを全ての選択 全てのコードをクリップボードにコピーしました Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy 目次