はぴらき合理化幻想

海外3年/西成ドヤ2年/沖縄2年/事故物件で寝袋3年目、ミニマリスト10年目でダンボール2箱の持ち物と保存食で大阪に定住中。

ブログ記事内に階層化した目次を自動生成できてSEOで有利になる高機能なプラグインを自作した

ブログ記事本文にある見出しを元に目次を自動生成すれば、読む人が記事の概要を掴みやすい。さらに、検索結果に見出しが表示されることがありSEOで有利になる。目次の表示場所を記事内で指定できるし、特定の記事で目次を生成しないようにもできる。何かと高機能。

はじめに

まずはこのプラグインの特徴を述べる。その後に導入方法や設定方法を解説する。このプラグインは著作権表示を残すだけで誰でも無料で自由に改変して使えるよ。

特徴

外観:デザインがシンプルでおしゃれ

どのブログにも自然と溶け込めるように、自動生成される目次のデザインはシンプルにした。目次のデザインはCSSで調整できるので、JavaScriptが分からなくてもデザイン変更が容易だ。

売れ筋ランキング: JavaScript の中で最も人気のある商品です

SEO:検索結果で見出しを表示

絶対というわけではないが、検索ワード次第で検索結果に見出しが表示され、説明文にはその見出しのすぐ下の文章が引用される。以下、次のページの検索結果で具体例を見てみよう。

写真39枚、2年住んだ大阪西成釜ヶ崎あいりん地区の日常、道で寝てるやつは大体友達 - はぴらき合理化幻想

この記事作成時にGoogleで「2年住んだ大阪西成釜ヶ崎あいりん地区 警告の看板」を検索した結果は下図のとおり。

2年住んだ大阪西成釜ヶ崎あいりん地区 警告の看板 - Google 検索

上図について、次の説明と下図内の番号が対応している。

  1. 検索ワードのひとつに「警告の看板」とある。
  2. 記事内の見出しに同じワードがあるためか検索結果に表示されている。

さらに付け加えると、その見出し直下の文章が検索結果の説明文として引用されている。リンク先に飛んでみて、実際にあなたの目で確認してほしい。

検索ワードの一部を変えて「2年住んだ大阪西成釜ヶ崎あいりん地区 西成警察署」で検索すると次のとおり。

2年住んだ大阪西成釜ヶ崎あいりん地区 西成警察署 - Google 検索

ここでも検索ワードに見出しの語句があるためか、検索結果にその語句を含む見出しが表示されている。また説明文もその見出し直下の文章になっている。アマゾン商品によるボケまで表示されてしまって、おいしいのかおいしくないのかよく分からない状況だ><

ブログ記事作成時に適切な見出しを入れれば、検索結果で表示させたい部分をある程度コントロールできるね。これぞ正にSEOだ。

売れ筋ランキング: ホームページ入門書/SEO の中で最も人気のある商品です

階層:目次を見出しのレベルで階層化

h6まで使う人はあまりいないとは思うが、デフォルト設定ではh2h6を階層化して目次にできる。jQueryなどのライブラリを使っていないので処理が速いよ。

普段はh2を使わずにh3から使っているという人には、h3h6を階層化する設定に変更できる。h2h3だけやh3h4だけが階層化されればいいなどの各種ニーズに対応可能だ。

切替:記事ごとに目次生成の有無を設定可能

自動:見出しの数で目次の有無を調整

初期設定では、記事内に見出しがふたつ以上あれば目次が自動生成されるようにしている。見出しの数をみっつ以上やよっつ以上など任意の数以上の場合だけ目次が自動生成されるように変更できる。

手動:特定のページの目次生成を制御可能

記事内にコードを一行追加するだけで、見出しの数にかかわらず目次を自動生成しないように設定できる。

指定:目次の表示場所を指定可能

初期設定では、記事内で最初の見出しの上に表示されるようにしている。ここではなく、記事内の一番上(リード文よりも上)に表示させることも可能だ。

また、記事内にコードを一行追加するだけで、特定のページだけ任意の場所に目次を表示させることもできる。

移動:目次から見出しへスムーズにジャンプ

目次内のリンクをクリックすると、その見出しの場所へスムーズスクロールでジャンプできる。この際にURL末尾にその見出しのID(ハッシュ)が付かないようにしている。そのページがはてなブックマークされた場合などに、ハッシュによってブックマークが分散されないようにするための工夫だ。

このスムーズスクロールを使うかどうかも設定で変更可能だ。なお、このスムーズスクロールに限り、jQueryが必要(jQueryなしだとコードがあまりにも長くなるので)。

スムーズ・クリミナル

位置:スクロール先を下げられる

記事の上部に固定された追尾メニューがある場合に備えて、スクロールする位置を1px単位で微調整可能だ。

たとえば、はてなブログではページ上部に通知機能などが盛り込まれた追尾メニューがある場合がある。通常のスクロールであれば、その追尾メニューに見出しが隠れて見切り状態になってしまう。その追尾メニューの高さの分だけスクロール位置を下げれば見出しの見切りを防げる。

URL:検索結果の見出しから来てもハッシュを削除

上述のとおり、検索結果に見出しへのリンクが表示されると、そのリンクから記事ページへ来る人もいる。通常であれば、そのページのURL末尾に見出しのID(ハッシュ)が付いたままになる。既に述べたとおり、これだとはてなブックマークされた場合にブックマークが分散してしまう。これを防ぐためにハッシュを自動で削除するようにしている。

なお、ハッシュを自動で削除するかどうかも設定で変更可能だ。

コンビーフ ハッシュ

導入方法

はてなブログ

CSSをheadに追加

記事内の大見出しとしてh3を使っている人は次のコードをHTMLのhead内に追加する。「見たままモード」で入力補助機能を使って見出しを入れている人向けだね。

<!-- 作者と使い方→ http://hapilaki.hateblo.jp/entry/mokuji-jidou-seisei -->
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/s/8z54xw2pui7v6q3/mokuji-h3.css">

記事内の大見出しとしてh2を使っている人は次のコードをHTMLのhead内に追加する。「markdownモード」などで入力補助機能を使わずにh2をきちんと認識して使っている人向けだね。

<!-- 作者と使い方 → http://hapilaki.hateblo.jp/entry/mokuji-jidou-seisei -->
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/s/fij1nbclcy46qwy/mokuji-h2.css">

はてなブログでheadに追加する方法は次のとおり。

headに要素を追加の右にあるテキストボックス(下図ではフレームアウト)に挿入したいコードを追加して保存する。

はてなブログ管理画面headに要素を追加

はてなブログのPC表示とスマホ表示のCSSをカスタムする方法 - はぴらき合理化幻想

JavaScriptを記事下に追加

管理ページ → デザイン → カスタマイズ(スパナのアイコン) → 記事 → 記事下にあるテキストエリアに次のコードを追加する。

<!-- 作者と使い方 → http://hapilaki.hateblo.jp/entry/mokuji-jidou-seisei -->
<script src="https://dl.dropboxusercontent.com/s/fc4p0hmjcckvhoh/mokuji.js"></script>

以上で目次が自動生成されるようになっている。

なお、いろいろカスタムしたい場合は、上記コードにカスタム用コードを付記した後述のコードを追加する。

外部ファイル化しているメリット

上記ふたつのコードは筆者のドロップボックスにアップロードしたCSSファイルとJSファイルを外部ファイルとして使うものだ。

コードをそのままコピペせずに外部ファイルを使う利点は、コードになんらかの不具合があった場合に筆者がドロップボックスにあるファイルを修正するだけで対処可能なことだね。利用者側で修正する手間を極力省けるのでトラブルが発生しにくい。

ドロップス

はてなブログ以外のブログ

CSSをhead内に追加するのは同じ。上記説明を参考にしてほしい。

JavaScriptを記事本文の下に追加するのも同じだが、記事本文の親要素のID(もしくはクラス)がはてなブログと同じだとは限らない。むしろ異なる場合の方が多いだろう。仮に、親要素のクラスを.hentryだと特定できたら、それを追加したコードは次のようになる。このコードを記事の下にコピペする。

<!-- 作者と使い方 → http://hapilaki.hateblo.jp/entry/mokuji-jidou-seisei -->
<script>var entryContentSelector='.hentry';</script>
<script src="https://dl.dropboxusercontent.com/s/fc4p0hmjcckvhoh/mokuji.js"></script>

上記コードで背景色が黄色の部分をあなたのブログの記事本文の親要素のIDもしくはクラスに変更してね。

設定方法

カスタム用JavaScriptコード

初期設定からいろいろ変更したい人はJavaScriptコードをコピペする際に次のコードを使用する。

<script>
/*
 * Mokuji Jidou Seisei v1.0.0
 * Date: 2015-06-23
 * Copyright (c) 2015 http://hapilaki.hateblo.jp/
 * Released under the MIT license:
 * http://opensource.org/licenses/mit-license.php
 */
;
/*ユーザー設定*/
var entryContentSelector='.entry-content';//記事本文の親要素を指定する
var hTagsSelector='h2,h3,h4,h5,h6';//目次に入れる見出しを選ぶ
var midashi=2;//見出しが何個以上で目次を生成するか
var basho=1;//目次を挿入する場所 0=一番上、1=最初の見出しの上
var hash=1;//ハッシュが消える秒数、消したくないなら0
var smooth=1;//スムーズスクロールを使うか(要jQuery)
var fromTop=0;//スクロール後に画面の上端から何px下げるか
</script>
<!-- 作者と使い方 → http://hapilaki.hateblo.jp/entry/mokuji-jidou-seisei -->
<script src="https://dl.dropboxusercontent.com/s/fc4p0hmjcckvhoh/mokuji.js"></script>

上記コードで背景色が黄色の部分をニーズに合わせて調整できる。

記事本文の親要素を指定する

  • 初期設定:.entry-content

上述のとおり、記事本文の親要素のIDもしくはクラスをあなたのブログに合わせて変更できる。はてなブログではここのカスタムは不要。

目次に入れる見出しを選ぶ

  • 初期設定:h2,h3,h4,h5,h6

大見出しだけ目次化されればいいのなら、hTagsSelectorの右側でh2もしくはh3だけを指定する。

見出しが何個以上で目次を生成するか

  • 初期設定:2個以上で自動生成

midashiの右側の数値を5にすれば、見出しが5こ以上ある場合だけ目次が自動生成される。

目次を挿入する場所

  • 初期設定:1(最初の見出しの上)

bashoの右側の数値を0にすれば記事本文の一番上(リード文よりも上)に目次が表示される。1なら最初の見出しの上に表示される。記事本文にリード文がなく、いきなり見出しから始まっているのなら1でも0でも見た目は同じだ。

特定の記事で目次の表示場所を変更したい場合は、その表示させたい場所に次のコードを入れる。上記設定に優先して適用される。

<div id="mokujikoko" title="1"></div>

特定のページで目次を表示しない

見出しの数に関わらず、記事本文に次のコードを入れれば目次を自動生成しないようにできる。なお、下記コードは上記コードのtitleの右側の数値を1から0に変更しただけだ。

<div id="mokujikoko" title="0"></div>

ハッシュの操作

  • 初期設定:1(ページ読み込みが完了してから1秒)

URLのハッシュ(#以降の部分)を何秒で消すかを設定できる。hashの右側の数値で秒数を指定できる。ハッシュを消さないようにするにはこの数値を0にすればよい。

スムーズスクロールを使うか

  • 初期設定:1(使う)

スムーズスクロールを使わないのならsmoothの右側の数値を0に変更する。スムーズスクロールを使うにはjQueryが必要だが、jQueryがhead内にあろうがbodyの閉じタグ辺りにあろうが場所は問わない。よって、はてなブログ利用者は新たにjQueryを読み込む必要はない。

スクロール後の見出しの見切りを防ぐ

  • 初期設定:0(ページ上部から下げない)

ページ上部に追尾メニューがある場合、スクロール後に見出しがそのメニューに隠されてしまう。そのメニューの高さ分だけスクロールを下げれば見出しが隠れない。

fromTopの右側の数値で何px下げるかを指定できる。はてなブログの追尾メニューの高さ分だけ下げるのなら38がちょうどいいんじゃないかな。pxという単位は不要。

補足説明

PHPやWordPressではありませんが使えますか?

JavaScriptが使えるブログやサイトなら利用可能。多くのレンタルブログで使える。

見出しに既にあるIDは上書きされますか?

上書きされない。当プラグインでは見出しの中に子要素としてspanを入れ、それに目次からの移動先のIDを付与する。ほとんどの人には関係のない話なので気にしないでね。

外部ファイルの中身をコピペしてもいいですか?

著作権表示さえ残せば中身をコピペしてもいいし改変して使ってもいい。

CSSを編集するのなら外部ファイルの中のCSSをheadや管理画面のデザインにあるCSS編集にコピペする方がいい。

ただし、筆者が外部ファイルを更新しても、中身をコピペして利用している人のコードは当然自動更新されない。自分で保守メンテできる人向けだね。

見出しにも番号を振る方法を教えてください

次のページが参考になる。

はてなブログ記事内見出し(h2やh3)に自動で序数(番号)を追加するCSS - はぴらき合理化幻想

リード文って何ですか?

次のページで確認できる。

初心者向けSEOでブログアクセスアップのおすすめな記事の書き方、1日10000PVで月間30万PV達成した方法 - はぴらき合理化幻想

CSSを編集したいのですが初心者で意味が分かりません

ウェブ制作者に仕事として依頼するか、次のページにある書籍を参考にすればよさそう。

売れ筋ランキング: HTML/CSS の中で最も人気のある商品です

筆者に依頼したい場合は次のページが参考になる。

レンタル彼氏?レンタルフレンド?No!レンタルはぴらきなら友達以上恋人未満ごっこでデートOK! - はぴらき合理化幻想

他にも便利なカスタムを教えてください

ブログ全般については次のみっつを挙げておくね。

AdSenseコードを残したまま特定のページで広告を非表示にするJavaScriptプラグイン「AdSense Filter」を自作した - はぴらき合理化幻想

ブログを丸パクリされてもURLがほぼ同じならリダイレクトでオリジナルページに転送できるよ - はぴらき合理化幻想

リンク文字色は青色推奨、HTMLのデフォルト色でも良い、CSSで下線を消しても色は変えない方がいい - はぴらき合理化幻想

はてなブログに関しては次のふたつだね。

不可能を可能に!はてなブログのプロフィールページをカスタムできるJavaScriptプラグインを自作した - はぴらき合理化幻想

はてなブログで階層化した親子カテゴリーをCSSカスタムで擬似的に表示する方法 - はぴらき合理化幻想

所感

いろいろな機能を付けたが、作者としてはもっと高機能化したかった。しかし開発を続けていると時間がいくらあっても足らない。そこそこの機能でとりあえずリリースした。ぼちぼちいきまひょ。

完璧主義は長所だよ、成果でなく時間にフォーカスして全体最適を完璧にしよう - はぴらき合理化幻想

まとめ

目次を自動生成すれば手間なしで記事本文の目次を挿入できる。目次があれば読む人の利便性を上げられるだけでなく、検索結果に見出しを表示できるようになりSEOの観点からもお得だね。

その人のニーズに合わせていろいろカスタムできる当プラグインは利用料無料なこともあり、これはもう使うしかないね(ง •̀_•́)ง

てすとてすと