読者です 読者をやめる 読者になる 読者になる

ひそかブログ

アニメでするリアルの話、リアルでするアニメの話。そういうのが好きです。

ブログに「目次」(もくじ)をつけるにはどうやるの?

ブログ関連の話

f:id:hisoka02:20150421071618j:plain
   「うちにも『目次』が欲しい…… はむはむ」

ブログに目次をつけたい! 自分のはてなブログに「目次」をつくりたくて、1ヶ月ぐらい悪戦苦闘してました。
↓ ようやく、この方のおかげで「目次」をつけられることに。

この記事をつくってくれた方には心から感謝しています。
また、この場でhtml&scriptを使わせていただくことをご了承ください。

はてなブログで、記事の頭に自動で「目次」をつける手順です。 対象は、「大見出し」(h3)や「はてな記法」なら「*」を付けた見出しで、大見出しが記事に2つ以上ある場合が目次作成の対象になります。
手順は2ステップ。

STP1. デザインCSSに以下のコードを追加する

article .entry-content .sectionList {
    background: #F8F8F8;
    margin: 50px 0 0;
    padding: 15px;
    border: 1px solid #CCC;
}
article .entry-content .sectionList h3 {
    font-size: 110%;
    margin: 0;
}
article .entry-content .sectionList ol {
    margin: 10px 0 0;
    padding: 0 0 0 1.5em;
    list-style: decimal;
}



「デザインCSS」の場所は、(設定→デザイン→カスタマイズ→デザインCSS)
最初から備わっている文字は消さないように注意してください。


↓ 実際に私のブログにコードを追加した画像です。

f:id:hisoka02:20150421060046p:plain

オレンジで囲った部分が追加したコードです。


STP2. 「記事」の「記事上」部分に以下のScriptを追加する

「記事上」の場所は、(設定→デザイン→カスタマイズ→記事→記事上)


<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
   var list = "";
   //大見出しを検索
   $(".entry-content h3").each(function(i){
       var idName = "section"+i;
       $(this).attr("id",idName);
       list += '<li><a href="#' + idName + '">' + $(this).text() + '</a></li>';
   });
   //大見出しが2つ以上あったら目次を表示する
   if ($(".entry-content h3").length >= 2){
       $("<div class='sectionList'><h3>目次</h3><ol>" + list + "</ol></div>").prependTo(".entry-content");
   }
   //スクロールを滑らかにする
   $('.sectionList a').on("click", function() {
       $('html,body').animate({scrollTop: $(this.hash).offset().top}, 600);
       return false;
   });
});
</script>



↓ 実際に私のブログにScriptを追加した画像。

f:id:hisoka02:20150421062515p:plain

上に転載させて頂いたscriptに、ちょっとだけ書き加えています。



自動でなく、個別で記事に「目次」をつけたい場合

私はこの方法を試したことはないです。こういう方法もあるみたいですよ、ってことで。

以下のコードを作成中の記事に貼り、「■目次1」「■目次2」などを好きな見出しに変えれば「目次」が出来上がると思います。

<h3 id="mokuji">■目次</h3>
 ▶<a href="#title1">目次1</a>
 ▶<a href="#title2">目次2</a>
 ▶<a href="#title3">目次3</a>
 ▶<a href="#title4">目次4</a>
 ▶<a href="#title5">目次5</a>
 
<h3 id="title1">■目次1</h3><a href="#mokuji">目次にもどる</a>
 <h3 id="title2"></h3><a href="#mokuji">目次にもどる</a>
<h3 id="title3">■目次3</h3><a href="#mokuji">目次にもどる</a>
<h3 id="title4">■目次4</h3><a href="#mokuji">目次にもどる</a>
<h3 id="title5">■目次5</h3><a href="#mokuji">目次にもどる</a>



「目次にもどる」ってイイですね。今度自分も「記事下」に貼って試してみようかなぁ


最後に

私の場合、ようやく記事に「目次」をつけられるようになったばかりのレベルですが、もっと「目次」を改良したいと思っています。

↓ こういう感じに。(Love2Labo.comさんのページです)

f:id:hisoka02:20150421065451p:plain

love2laboさんは、目次用のソフトを導入されているようです。
無料では出来ないのかな?

4/25追記)
昨夜のこと。
「love2labo」のあめたまさんから、ツイッターでのリプライを頂戴しました。
あめたまさんの使われているブログシステム、「WordPress」には「目次用」の追加プラグインがあるそうです。それイイね! はてなも近いうちに実装してくれないかなぁ(切望)

私ははてなブログに来る前、長らくfc2を使っていたので気がつきませんでしたが、ブログサービスは日々進化を続けていたんですね。時代はどんどん前へと進んでいる。最近はそんな事を痛感するようになってきました。


ということで。
以上、ブログに目次をつくるにはどうすればいいの? という話でした。

今回、はてなブログの記法で初めて「markdown」記法に挑戦してみました。
さすがにちょっと手間取りますね。

最初、「改行」や「行間スペースの調整」をどうやるのか分からなくて苦労しました。記事が見苦しかったらごめんなさいです。ただ、「markdown」記法は、htmlを貼りたい時にすごく便利です!
いざ使ってみて、初めて実感いたしました。



「ブログ」「はてなブログ」関連記事