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

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

関連記事

オフィスでヨガ

写真で解説!ヨガのポーズ集

“写真で解説!ヨガのポーズ集”