広汎性発達障害の女がたまに毒を吐くブログ

広汎性発達障害(診断済)のヘッポコな女が、好きな映画(主にホラー、B級、カルト映画)や漫画、ブログカスタマイズ、日々思うこと等を綴る雑多なブログです。

新ブログ「うらなか書房のあやしいグッズあり〼」
うらなか書房のあやしいグッズあり〼

上記に移転しました。今後は上記の新ブログで、ホラーなもの奇妙なものB級っぽいものについての紹介などをしていきます。よかったらご覧ください!

うらなか書房のTwitter  「うらなか書房のあやしいグッズあり〼」をfeedlyで購読する  うらなか書房のFacebookページ  うらなか書房のGoogle+ページ  うらなか書房のtumblr うらなか書房のLINE

たまに毒吐くちゃんグッズ販売中!

たまに毒吐くちゃん黒Tシャツ

TSHIRTS TRINITY

SUZURI

で販売して
います!
価格・送料比較表

たまに毒吐くちゃんラグランTシャツ

【はてなブログ】「目次記法」(記事中の見出しから目次を自動的に作成)公式発表! でも他にもっといい目次がある!

目次記法」(記事中の見出しから目次を自動的に作成)がはてなブログ公式から発表された! が、しかし……

2015年9月9日、はてなブログ公式が、「目次記法」(記事中の見出しから目次を自動的に作成)を新機能として発表しました。

こういう目次を表示出来ます

目次

おお、これは……! と一瞬思ったのですが、

[:contents]各記事ごとにいちいち書く必要があるのがちょっとひっかかりました。

(「記事上」に[:contents]を貼り付けてみましたが、ただ[:contents]と表示されるだけでした)

これなら、既にこのブログで使用させてもらっている目次の方が良さそうかも……?

既にもっといい「自動目次作成」のコードを発表してくれている方がいた!

はてなブログ脱獄ブログ(ページがなくなってしまいました)

管理画面の「デザイン」から、「CSS」と「記事上」に一度コードを貼って保存すれば、はてなブログの本文の上に目次を自動で表示してくれるようになります。
公式のやり方のように、いちいち記事中に何かのコードを書く必要はありません

しかもこちらだと、

実装前に投稿した記事にも有効
はてなブログ脱獄ブログ

これは過去記事が多い方は助かるのではないでしょうか。
公式のやり方だと、過去記事1つ1つに手作業で[:contents]を足していく必要があります。

また、

「◯個以上大見出し(h3)があったら目次を表示する」という設定が可能
はてなブログ脱獄ブログ

痒い所に手が届く仕様です。
見出しが1個の記事には目次はなくてもよさそうですからね。

公式ではただ単に[:contents]を書かないというやり方になります。

目次のリンクをクリックすると該当箇所までスクロール
はてなブログ脱獄ブログ

これは公式にもある機能なので引き分けという感じでしょうか。

はてなブログ公式の目次が勝っている点は……

はてなブログ公式の目次で良い所といえば、大見出しと小見出しを入れ子にして表示できる点でしょうか。

目次入れ子

はてなブログ脱獄ブログ」さんの目次では、

記事内の大見出し(h3)を探して目次に表示する

はてなブログ脱獄ブログ

この「h3」を「h4」や「h5」に変更することは出来ます。
ただ、「h3」の下に「h4」の小見出しを並べる、ということは出来ないようです。

使用中の目次
はてなブログ脱獄ブログ」さんの目次の見た目
(背景色などはCSSをちょっといじっています)

しかし個人的には、あまり小見出しを多用するのはどうかなァと思いますので(やむを得ない場合ももちろんありますが、そんなに長くなるなら記事を分けた方が読みやすい気がします)、この点もそこまでプラスという感じではないかもしれません。

まとめ

はてなブログ公式の目次を使用した方がいいかもしれない方

●とにかく公式のものが安心
CSSなどをいじりたくない
小見出しを多用する
●目次を付けるかどうかや、付ける場所を記事ごとに変えたい
●過去記事がたくさんあっても手作業が苦にならない

その他の方には

はてなブログ脱獄ブログ

上記をオススメします。

追記:小見出しを入れ子状に表示出来る目次のソース

あまり小見出しを多用するのはどうかなァと思いますので

と書いておきながら、やはりもしかしたら必要な時もあるかもしれない……と考え直しまして、「はてなブログ脱獄ブログ」さんのコードを少し改造させて頂いて、下図のような入れ子表示が出来る目次にしてみました。

目次入れ子

ページ内目次を見出しタグから自動生成を参考にさせて頂きました。

デモページを見てみる

目次デモページ - 広汎性発達障害の女がたまに毒を吐くブログ

ソース

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

管理画面⇒デザイン⇒スパナみたいなマーク⇒記事⇒記事上

に貼り付けると入れ子表示の目次になります。

上記は、h3を大見出し、h4を小見出しとして入れ子で表示すると共に、目次を記事の一番上でなく、「記事の中で一番上にあるh3の真上に表示する」という仕様になっています。

目次を記事の一番上に表示したい場合は、

insertBefore(".entry-content > h3:eq(0)");

という部分を、

prependTo(".entry-content");

に変えてください。

このブログの目次のCSS

/ ^^^^^^^^ 目次 ^^^^^^^^^^ /

article .entry-content .sectionList { border: 1px dashed #999; background:#ffffcc ; margin: 2em 0 0 0; padding: 15px; }

article .entry-content .sectionList ol { margin: 10px 0 0; padding: 0 0 0 1.5em; list-style: decimal; }

article .entry-content .sectionList ol > ol > ol{ list-style:none; }

article .entry-content .sectionList ol > ol > ol li { position:relative; }

article .entry-content .sectionList ol > ol > ol li:before { content:"●"; display: block; position: absolute; top:0; left: -22px; }

/ ^^^^^^^^ 目次終わり ^^^^^^^^^^ /

管理画面⇒デザイン⇒スパナみたいなマーク⇒CSSデザイン

にコピペします。

数字や色などをお好みで調整してみてください。

コードを変更する際は自己責任でお願い致します。
元のファイルのコピーを取っておくことをおすすめします。

広告を非表示にする
新ブログ「うらなか書房のあやしいグッズあり〼」
うらなか書房のあやしいグッズあり〼

上記に移転しました。今後は上記の新ブログで、ホラーなもの奇妙なものB級っぽいものについての紹介などをしていきます。よかったらご覧ください!

うらなか書房のTwitter  「うらなか書房のあやしいグッズあり〼」をfeedlyで購読する  うらなか書房のFacebookページ  うらなか書房のGoogle+ページ  うらなか書房のtumblr うらなか書房のLINE