カラダ×ココロもっと笑顔に!

menu

UK MOVE

ワードプレスの目次をHTMLでつくる方法

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

WordPressでブログを書いている人の記事をみていて、よく見かける
目次というやつがあります。

この記事で作っているので参考に

目次があると、
・読者の目を引くことがができる
・読者が求めている情報があるか?目次の時点で判断できる
・書くほうも整理して記事を書くことができる
と、記事を書く人・読む人にとってメリットが大きいです。

これどうやって作ってるの?って思って色々とgoogleさんに聞くと「Table of Contents Plus」というプラグインを入れるのが良いみたいだけど・・・
詳しくはこちらの記事に解りやすく載ってます

わたしのようなIT音痴には、プラグインを入れるのが抵抗があるので
HTMLで簡単に作れないかなぁと思ったあらありました!
備忘録も兼ねてここに記事としてまとめました。

ワードプレスの目次を作るHTML

雛形を置いているので、どうぞ!

まずは文章のはじめの部分に

<h2>目次</h2>
<ol>
<li><a href=”#title1″>タイトル①</a></li>
<li><a href=”#title2″>タイトル②</a></li>
<li><a href=”#title3″>タイトル③</a></li>
<li><a href=”#title4″>タイトル④</a></li>
<li><a href=”#title5″>タイトル⑤</a></li>
</ol>

を打ちます
タイトル①とか②とかは各段落の文章を入れてください。

そして各段落に下記を入れます。

<h2 id=”title1″>1.タイトル ①</h2>
<h2 id=”title2″>2.タイトル②</h2>
<h2 id=”title3″>3.タイトル③</h2>
<h2 id=”title4″>4.タイトル④</h2>
<h2 id=”title5″>5.タイトル⑤</h2>

そうすると、目次のタイトルをクリックするとそこにジャンプして表示してくれます。
こちらの記事ように表示されます。

ぜひ使ってみてくださいね

TSW_0880

青貝 夕子

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

関連記事

\メディア多数掲載/オフィスでヨガ

動画・写真で解説!ヨガのポーズ

簡単オフィスでストレッチ

青貝夕子のCHAKABOOM成長記録

ゆうこのダンスblog

青貝夕子エッセイ集

転載/引用について

<引用について>
このブログは、以下の条件のもと、引用を承諾します。
1.引用部分を「blockquoteタグ」で挟むこと 2.エントリーのタイトルを併記してリンクすること 3.引用部分が従であり、全体の2〜3割程度に抑えること   ※文化庁の見解による
<転載について>
まるまる転載するのは、事前承諾がない場合は許可しません。無断転載の場合、原稿料として10万円を請求させていただきます。
<文章を加筆しての転載、つまりパクリについて>
著作権法違反のため、絶対に許可しません。
<写真転載について>
当ブログでは、撮り下ろした写真も多く使用しております。この写真は1枚5万円(税抜)にて販売しております。無断転載の場合は5万円に10万円の損害金を加えた15万円を請求いたします。
絶対リンクでの写真使用は、こちらのサーバに負荷を掛けますので許諾しません。された場合は威力業務妨害として法的措置を採らせていただき、損害賠償を請求いたします。