グーグルの無料ブログシステムのbloggerは、wordpressなみの応用がきき、何から何まで無料、しかも高速表示と非常に優秀なプラットフォームです。
そのとっつきにくさから、日本国内では普及率は相当低いですが、サブドメイン形式で検索にも強く、SEO狙いで無料ブログを使うならbloggerの一択ですね。
さて、そんなBloggerですが、公式の目次プラグインがないのが弱点の一つです。SEO的な内部リンクとしても、現在目次は必須の状況です。
いくつかのblogger用目次コードも出回っていますが、h2～h4まで全部拾ってしまうので、正直、目次が長すぎて…しかも、勝手に目次番号「1-2」「1-3」…「5-6」みたいな感じでついてしまうので、けっこう見づらかったりします。
そこで、コピペ一発でOKな改造コードを作りましたので、備忘録をかねてここに置いておきます。
■見出しはこんな感じになる
●h2タグだけを表示する
はい、実際の見出しは現在上に表示されています。なかなかすっきりしていて良いのではないでしょうか？ちなみに、このパートの「■見出しはこんな感じになる」は大見出し(h2)、「●h2タグだけを表示する」は小見出し(h3)です。従来のコードだと両方目次に表示されますが、今回ご紹介する改変コードは、h2タグだけしか拾っていないのがおわかりいただけますね。
■見出し表示のコード
さて、本コードですが、以下のものですのでコピペして使ってください。
//<![CDATA[
if (typeof(jQuery) == 'undefined') {
document.write("<scr" + "ipt type=\"text/javascript\" src=\"//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js\"></scr" + "ipt>");
}
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
console.log("call func");
$('a[name="more"]').after("<div id='toc' />");
var idcount = 1;
var h2cnt = 0;
var h3cnt = 0;
var h4cnt = 0;
var toc = '';
var currentlevel = 0;
$(".post-body h2,.post-body h2,.post-body h2", this).each(function() {
var chapid = "chapter-" + idcount;
$(this).before("<div class='chapter-no' id='" + chapid + "' />");
idcount++;
var level = 0;
var chapNo;
if (this.nodeName.toLowerCase() == "h2") {
level = 1;
h2cnt++;
h3cnt = 0;
h4cnt = 0;
chapNo = h2cnt + ".";
}
else if (this.nodeName.toLowerCase() == "h3") {
level = 2;
h3cnt++;
h4cnt = 0;
chapNo = h2cnt + "-" + h3cnt + ".";
} else if (this.nodeName.toLowerCase() == "h4") {
level = 3;
h4cnt++;
chapNo = h2cnt + "-" + h3cnt + "-" + h4cnt + ".";
}
if (currentlevel == level) {
toc += "</li><li>";
}
while (currentlevel < level) {
toc += '<ul class="chapter"><li>';
currentlevel++;
}
while (currentlevel > level) {
toc += "</li></ul><li>";
currentlevel--;
}
toc += '<a href="#' + chapid + '">' + $(this).text() + "</a>";
$(this).html($(this).html());
});
while (currentlevel > 0) {
toc += "</li></ul>";
currentlevel--;
}
if ($(".post-body h2")[0]) {
$("#toc").html(toc);
} else {
$('#toc').attr('class', 'no-toc');
}
});
//]]>
</script>
<style><!--
/* 目次のデザイン */
#toc:before{
content:"目次";/*目次のタイトル*/
padding-left:1em;
font-weight:800;
}
#toc{
background-color:#f9f9f9; /*目次の背景色*/
padding:1em;
display:block;
margin:1em 0;
border:1px solid #e6e6fa;/*目次の枠線*/
}
#toc li{list-style:none;margin-bottom:1em;}
#toc ul{margin-bottom:0;}
#toc:before{display:block;text-align:center;}
.chapter-no{position: relative;top:-2.5em;}
--></style>
■見出し表示コードの挿入方法
●管理画面から「テーマ」をクリック
見出しコードの挿入方法ですが、blogger管理画面トップから「テーマ」をクリックします。
●バックアップしてから「HTMLの編集」をクリック
そして、「HTMLの編集」をクリックしますが、その前に右上のボタンから現在のテーマのバックアップを必ずとっておいてください。
●「</body>」を文字列検索
HTMLの編集画面を呼び出したら、書式のなかにカーソルーをおいた状態で「ctr＋F」で文字列検索を呼び出し、</body>を記入して、その場所を探し出します。
●改変コードを貼り付けて保存
</body>を見つけたら、その真上にコピーしたコードをペーストして「テーマの保存」でコードの挿入は完了です。
■見出し表示の設定方法
●任意の記事にmoreタグを設定する
見出しの改変コードをテーマに追加しても、まだ実際の記事に見出しは表示されません。記事毎に見出しを表示するかしないかを決め、表示する記事には、目次を表示したい場所に「moreタグ」を挿入します。bloggerの記事投稿画面から挿入可能です。
以上、bloggerにh2だけのすっきりとした見出しを表示する方法でした。
