累計

  • 57,436 pv

アクセスカウンター

プラグイン Wordpress

【WordPress】プラグイン無しで記事に目次をつけるー最新ー(※かんたん)

2019-04-01

 

どうも、solobochiです。

 

雑記系の記事はともかく、ナレッジ・ノウハウ系の記事、私でいうとプログラミング系の記事は目次があったほうが見やすいです。

っていうのを、最近いろいろなブログを見ていて思ったので、目次をつけることにしました。

で、いろいろ調べているとプラグイン(Table of Contents Plus)でカンタンにできるらしい。

けど、プラグインなくてもカンタンにできるらしい。

だったら、プラグイン無しで実装できた方がいいでしょう。
ということで、プラグイン無しで実装してみたら、本当にカンタンでした。

 

では、早速。

 

 

目次

  1. 目次部分のコード作成
  2. リンク先部分のコード
  3. プラスα

 



 

【やりたいコト】

  • 記事に目次をつけたい
  • プラグインを使わずに実装したい

 

 

参考にした記事:http://wispyon.com/tableof-contets-noplugin/

 

 

以下の2Stepで作成できます。

step
1
目次部分のコードを作成する

step
2
リンク先部分のコードを作成する

 

 

-

 

手順1:目次部分のコード作成

テキストエディタで目次部分を作ります。

 

以下のコードを貼り付ければOK。

 

 

〜全行解説〜

・<h2>目次</h2>
👉目次エリアを作ります

・<ol>〜</ol>
👉番号付きリスト
※番号無しリスト:ulタグ、番号付きリスト:olタグ
└番号なしリストを使う場合は、「ul」のボタン
└番号付きリストを使う場合は、「ol」のボタン

・<li>〜</li>
👉リストの中身を記載する部分

<li><a href="#title1">見出し1</a></li>
<li><a href="#title2">見出し2</a></li>
<li><a href="#title3">見出し3</a></li>
👉目次のリンク先を設定する

・<a href=xxx>〜</a>
👉リンクボタンを作成する
※参考:HTMLタグリファレンス

 

これで目次部分は完了。

 



 

手順2:リンク先部分のコード作成

テキストエディタで目次部分を作ります。

 

作成した目次と整合性が取れるようにして以下のようにコードを作成すればOK。

 

 

 

 

・<id="xxxxxx">

👉目次のリンク先に当たる、"xxxxxxが目次と合うようにする。

 

 

プラスα

特に無かったです。笑

 

 

 

以上。

カンタンですね。

これで1つ不要なプラグインのインストールを避けることができました。

 

 

 

 

  • この記事を書いた人
  • 最新記事
solobochi

solobochi

(名前):solobochi

(説明)
独身アラサー男子
国内大手IT企業中堅社員。
プログラミングやセミナーのアウトプットがしたいと思いブログを開設。
プロジェクトマネジメント関連の資格やディープラーニング、機械学習系の資格取得ノウハウについても発信。


(Like)
・最適化することが好き
・PDCAを回すのが好き


(当サイト)
日々思うことを徒然と発信
└(例)
・学びのアウトプット
・投資・資産運用
・プログラミング
・資格試験の対策
・セミナーのレビュー
・書評
etc...


詳しくは自己紹介記事にて。
自己紹介①
自己紹介②
自己紹介③
自己紹介④

-プラグイン, Wordpress
-, ,

Copyright© そろボチ , 2021 All Rights Reserved Powered by AFFINGER5.