拙テンプレート向けの自動目次機能の設置について

目次機能

自動目次機能の設置

さて、今回は、拙テンプレートをご利用の方の中で、より検索評価を意識している方や、より本格的なブログ記事を作成したいという方向けに、「自動目次機能」の設置について、考えてみました。
記事内で、見出しタグを使用している方は、それほどおられないかもしれませんが、現段階で使用している方や、今後、使用を考えている方は、やはり、「目次」というのは、あったほうが便利だし、見栄えもよくなります。

コードの改変再配布の経緯

今回ご紹介するコードについて、経過を説明いたします。
自力で素のjsが書けない当方は、とあるサイト様で配布されていたコードを改変して、テストブログに設置してみたところ、なかなかいい具合でした。
そして、これを、拙テンプレートの利用者の方にも、使っていただけたらいいなと、思い、配布元の運営者様に、許可をいただこうとしたところ、先方は、たぶん、もう5年くらい、サイトの管理をされているご様子がなく、ツイッターのほうも、同じ時期から、放置状態のようでした。
そして、お問い合わせフォームから、お問い合わせをしてみたところですが、もう1週間、お返事がないという状態です。

jQueryで目次と「目次に戻る」を自動生成(プラグイン無し) | 10251

これまで使っていたWordPressの目次生成プラグイン「Table of Contents Plus」を外しました。 プラグイン無しで記事の見出しから目次を生成したり、「目次に戻る」を自動で表示させ

そして、調べたところ、こちら様で配布されている自動目次機能のコードの改変再配布をしているサイトを、複数発見しました。
内容を見ると、いずれも、リンクを貼ってあるだけで、引用元の承諾を得ている様子では、ありません。
が、特に、ご本人が、それに対して反応をされたという様子も、ありませんでした。
そして、いろいろ考えたのですが、
  • ご本人に、ご連絡がつかない状態で、5年以上、管理を放棄されているご様子であること。
  • これまでに引用や改変再配布をされたサイト(検索で上位表示)に対し、特に抗議をされた形跡がないこと。
  • 自動目次機能については、似たようなコードで無料配布のものが、たくさん出回っているため、特殊性という意味では、あまり特殊なコードとまでは言えないこと。
  • 当方は、勧誘や集客などの営利活動とは無関係な個人であること。
  • 今回は、改変が必要な箇所が多いため、コピペで配布するのが妥当であること。
から、今回、改変再配布に、踏み切ることとしました。
もしも、ご本人が見ておられた場合には、ご連絡をいただければ、対応いたします。
注 意
自動目次機能というのは、自動で見出しをつけてくれる機能という意味ではなくて、記事内で見出しタグを使用した場合に、自動的に目次を作成する機能という意味ですので、お間違えのないよう、お願いします。
「見出しをつける作業」自体は、あくまでも、ご本人が、記事作成の際に、手作業で、お好みの場所に、お好みの見出しタグを挿入するというのが、前提です。

見本

自動目次機能見本

ここで紹介する「自動目次機能」の特徴

  • 記事内で使用する見出しタグh3、h4、h5に対応。
  • 個別記事ページのみで読み込む(それ以外のページには無関係)。
  • 記事内で、1つでも見出しタグを使用した場合に、自動的に、記事の上に表示され、使用しない場合には、何も表示されない→最初の設置の手間だけで、あとは、普通に記事を書けばいいだけなので、面倒がない。
  • 記事の冒頭文というものは、「記事の抜粋文(冒頭の100文字程度)」として、検索結果を始め、あらゆる場所で使用されることになるため、非常に重要である。
    そのため、そこに今回の「目次の内容」が関係しないように、目次は、記事部分と並列のセレクタとして、記事上に押し込んでいる。

基本的には、拙テンプレートに限って紹介

また、ここで紹介する方法は、基本的には、拙テンプレートに限ったもので、それは、
  • コピペだけで導入ができるように、拙テンプレートで使用しているセレクタ名に書き換えてあること。
  • スムーズスクロールの関係で、貼り付け位置と、もともと設置してあるjsへのセレクタの追加を指定していること。
  • jQueryのライブラリを、記事よりも上のほうでもともと読み込んでいるということ
が、前提だからです。

導入手順

手順は、大まかに言えば、3ステップです。
  • HTMLにコード本体を追加する。
  • もともと設置してあるスムーズスクロール用のjsへのセレクタの追加。
  • CSS(スタイル編集)にコードを追加する。
具体的な方法は、以下です。
  1. 「テンプレートの設定」から、編集画面を開く。
  2. HTMLの下の方まで行き、「リンククリック時のスクロールを滑らかにする用のコード」の直前に、以下のコードを貼り付ける。
    文字列をそろえたりする必要はなく、とにかく貼ればよい。
    tocjs貼り付け位置
  3. 次に、「リンククリック時のスクロールを滑らかにする用のコード」のセレクタ名の中に、以下を追加する。↑の画像のように追加すればよい。最初のカンマは必要なので、削ってはいけない。
    ,#toc a
  4. 次に、下の「スタイル編集」へ行き、一番下でいいので、以下を貼り付ける。
    /*---------------◆目次機能◆↓-----------------*/
    #toc{margin:1em 0;border:solid 1px #b3b3b3;padding:10px 15px;background:#f5f5f5;font-size:14px;}
    #toc::before{content:"【目 次】";white-space:pre;display:block;font-weight:bold;} 
    #toc .chapter{margin:0 0 0 30px;}
    #toc>.chapter{margin:5px 0 0 30px;}
    #toc>.chapter>li{list-style-type:disc;}
    #toc>.chapter .chapter>li{list-style-type:square;}
    #toc>.chapter .chapter .chapter>li{list-style-type:circle;}
    #toc .chapter>li{margin:0 0 5px 0;}
    #toc.no-toc{display:none;}
    /*---------------◆目次機能◆↑-----------------*/
  5. 「更新」ボタンを押す。
  6. ブログを開き、個別記事ページの状態を確認する。
    実際に、目次内のリンクをクリックをしてみて、動作を確認する。
    また、見出しを使っていないページでは、何も起こっていないはずなので、それも確認する。
    ちゃんとできていたら、作業は終了。

カスタマイズについて

元々の配布者さんには、この改造についての質問をしないでください

なお、この改造についての質問は、私の方へお願いします。
もともとの配布者さんは、不在のようですが、ここでは、拙テンプレート向けに、大幅に内容を変えていますので、ここで紹介した内容については、ご本人ではなく、私の方へお願いいたします。
関連記事

コメント

コメント(0)
コメント投稿
【お願い】FC2ブログの方は、必ず、ご自分のブログURLを入力してください。
非公開コメント

プロフィール

Janedoe1471

Author:Janedoe1471 この写真とはまったく違うおばさんです。
が、気持ちだけは、いつまでも、こういう感じでいたいと思っています。

更新通知登録ボタン

更新通知で新しい記事をいち早くお届けします

検索フォーム