自動作成した目次の最後に表示されてしまう「はてなブログをはじめよう！」を消す方法

*1

 

※2017年9月15日追記

この件については、はてなブログ側の不具合によるものだったようです。

• 【修正済み】はてなブログ開設のリンクがヘッダ・フッタの表示設定に関わらず表示される不具合がありました（追記あり） – はてなブログ開発ブログ

さんざん悩んで損した~ような気もしますが、何はともあれ原因がわかって良かったです(*^^*)。改善されたようなので、元に戻しました！

 

昨日、ふと自分のブログを見ていたら、記事の目次に追加した覚えの無い文字列が入っているのを見つけました。目次の最後に「はてなブログをはじめよう！」と入っています。こんな具合に。

あれ、そんな見出し付けてないよね？不審に思って他の記事もチェックしてみたところ、全部の目次の最後に「はてなブログをはじめよう！」と勝手に追加されていました。ええー、何で？思わずTwitterでつぶやきました。

ブログの自動生成してる目次の最後に必ず「はてなブログをはじめよう！」ってつくようになったのなんで？？困った！！とりあえず目次を外してみたけど…🤔

— Saku@バンコク (@saku_bangkok) 2017年9月7日

すると、他にも同じトラブルで困っている方が！！どうやら私だけの問題では無いみたいです。

応急処置として目次を外してみたものの、一度気になりだすとどーしても気になってしまう性格で。どうにか消す方法は無いものかと模索して、一応解決したので報告します。

 

はてな公式以外の目次自動作成機能でトラブル発生！

はてなブログでは、記事内に[:contents]と入力すると目次を作成してくれるようになっています。でも、私はその機能は使わずに、スクリプトで自動的に目次を作成してくれる方法を採用していました。だって数百記事もあっていちいち入力するのが面倒だったんだもん。

参考にしたのは、こちらの記事です。

kumoaozora.hatenablog.com

今回は公式の目次作成機能ではトラブルは起こっておらず、上記ブログで紹介されている方法を採用している場合にトラブルが発生しているようです。

 

【対応策１】別の目次自動作成機能を利用する

まずは、今まで使用していたのと別のスプリクトを探して変更してみることにしました。検索して見つけたのがこちら。

qiita.com

こちらの例ではh4【中見出し】で目次を作成していますが、私はh2【大見出し】を使って目次を作るようにアレンジして適用してみてました。すると、「はてなブログをはじめよう！」の文字列が入ることなく目次を作成することができました！！

しかし別の問題が。見出しを使わずにベタ打ちで書いた記事の先頭にも、目次の文字だけが表示されてしまいました…。これはこれでカッコ悪いので却下。

 

【対応策２】h３タグを読み込まないようにする

 やっぱり、見出しを使用したときだけ目次を表示する方がいいな…ということで、以前から使わせてもらっているこちらのスクリプトを変更して、どうにか「はてなブログをはじめよう！」の文字列を消す方法を探すことにしました。

kumoaozora.hatenablog.com

スクリプトとにらめっこして、目をつけたのが「見出しを検索」する部分。 

// 見出しを検索
$(‘.entry-content h2,.entry-content h3,.entry-content h4′).each(function(i){
var self = this;
var idName = ‘section’ + i;
var level = 0;

はてなブログでは、大見出しがh3タグ、中見出しがh4タグ、小見出しがh5タグに割り当てられています。ただ大見出しをh2にしたほうがSEO的に良いとされているのを何かで見たので、私は大見出しはh2を利用しています。

結論を言うと、h3タグを検索している.entry-content h3,を消したら、「はてなブログをはじめよう！」の文字列も消えました。目次は大見出しだけで表示できればいいかなと思っていたので、.entry-content h4も消してこんな風に書き換えちゃいました。

// 見出しを検索
$(‘.entry-content h2’).each(function(i){
var self = this;
var idName = ‘section’ + i;
var level = 0;

これで、私の場合は解決～♪

でも、はてなブログのデフォルトのh3タグを大見出しとして利用している場合は、困っちゃいますよね…。私にはどうしたらいいか分かりませんっ！！

ついでに、目次の挿入場所も変えました。

// 見出しが2つ以上あったら目次を表示する
if (entryContentLen >= 2) {
$(‘<div class=”sectionList”><h5>目次</h5><ol>’ + list.join(”) + ‘</ol></div>’).prependTo(‘.entry-content’);
}

 上の太字で目次の挿入場所を決めているみたいなのですが、これをトップ画像の下あたりにくるようにしてみました。

// 見出しが2つ以上あったら目次を表示する
if (entryContentLen >= 2) {
$(‘<div class=”sectionList”><h5>目次</h5><ol>’ + list.join(”) + ‘</ol></div>’).prependTo(‘.entry-content p:nth-child(2)’);
}

 とりあえず、これで今日は終わりっ！はぁ、すっきりした。