アクセスカウンター

  • 27本記事閲覧者数   👀💡:
  • 29今日の足あと    🦶💮:
  • 4113サイト訪問者数(累計)🦶💡:

プラグイン Wordpress

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

投稿日:

 

どうも、solobochiです。

 

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

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

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

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

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

 

では、早速。

 

 

目次

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

 

 

【やりたいコト】

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

 

 

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

 

 

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

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

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

 

 

-

 

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

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

 

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

 

 

〜1行解説〜

・<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つ不要なプラグインのインストールを避けることができました。

 

 

 

 

⬇️他にもよく見られている記事⬇️

最も訪問者が多かった記事 10 件 (過去 7 日間)
  • この記事を書いた人
  • 最新記事
アバター

solobochi

気づけば社会人10年目のアラサー。 いつのまにかまわりが結婚→出産→マイホーム、と順調に”しあわせ家族計画”を進めていくのを横目に見ながら、ふと人生見つめ直し、、、結果、絶賛模索中の日々🐠🏃‍♂️----------------- 学んだことのアウトプットや、日々つらつら思うことを整理して残しておくような雑記ブログ(にするつもり、、、、)(as U like / as I like / write freely)-----------------ただし如何せん不器用で、1つ1つ丁寧に積み上げていかないと理解できないので学習は遅い😓-----------------2018年東大松尾研DeepLearning講座受講。 2019年度データアントレプレナーフェロープログラム参加中。

おすすめ記事

1

  はじめまして solobochi(そろボチ)です。   生まれも育ちも東京で、大学も会社も東京です。ずっと東京にいます。 社会人になってボチボチ約10年。 バリバリの文系ですが ...

2

  どうも、solobochiです。   2019年に入ってからというもの、休日は割とpython触ってます。といってもまだ簡単なサンプルコードをなぞるだけですが。   ...

-プラグイン, Wordpress
-, ,

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