【WORDPRESS】初心者向け プラグインなしで目次を作る方法。コードの意味も丁寧に解説しながら説明。

 

本記事にお越しいただけまして、誠にありがとうございます。

白ねずみ(@whitemicemoon)です。

 

WORDPRESS(ワードプレス)を始めたものの、初心者であれば、コードなんていじらないで、「ビジュアル」でページや記事を作っちゃうこと、よくありますよね。はい、それが私です。

「コード…むつかしい…」って言って避けていたので、「テキスト」をいじって「コードを書いてみよう!」なんて殊勝な考えには直ぐには至れませんでした。

でも、私はブログで記事を書いていて、こういう壁にぶつかりました。

「目次を作りたいんだけど、目次の作り方も、プラグインも、コードも分からない。まじ終わった」

コード(cord)・コーディング(cording)もプラグイン(plugin)なんて、ちんぷんかんぷん。

コードなんて、英単語というか、むしろアルファベットが謎の文字列にしか思えない。

ですが、謎の文字列の意味をしっかり理解出来れば、コードの勉強も理解も出来ます。

今回は、プラグインを使わずに、コードを使って、目次を作ってみます。

さて、お立ち会い。一緒に勉強していきましょう。

 

※前以ってお伝え致します※

今回 私が記事を執筆するにあたり、数カ所のサイトを参考に使いました。(随所・最下部に記載)

まず、私が自分の記事の目次を作るにあたり、こつブロ!『[WordPress]プラグインを使わずに目次を作る方法』を参考にしました。

ただ、私はコードについて知識が乏しく、コードについて調べながら作りました。

その経験を基に、「1つの記事の中に、コードの意味も全て入っていたら良いな」と思い、コード解説等も含めた記事を書きましたので、お見知り置きください。

随所に「こつブロ!」と異なる内容が御座います。(例:<LI>タグ不使用 等)

知識がある方はこつブロ!『[WordPress]プラグインを使わずに目次を作る方法』をご参考になさる事をお勧め致します。

 

この記事の目次

1. 完成させたい目次をイメージしよう

2.「ビジュアル」で書きたい内容を先に書いておく

3. 見出しの文の大きさを変えよう

3. 補足:コード<h>~</h>で見出しを大きくする方法

4. 目次から見出しに飛べるように、「id」を使って飛ぶ準備をする

5. 目次に見出しを<a href=” — “> ~~~ </a>で紐付ける。

最後に

 

1. 完成させたい目次をイメージしよう

今回 目標とする目次

まず、完成させたい目次のイメージがこちらです。左がテキストで書いたコード。右が完成したページ。

コードで何が書かれているのかは、まだ理解しなくて良いです。

読み進めた先で意味を説明しますから、ここでは「ほうほう」と頷いて先に進んでください。

 

2.「ビジュアル」で書きたい内容を先に書いておく

「ビジュアル」でコードを気にせずに内容を書く

今回は「歯磨きの仕方」について目次を使って説明するページを作ります。

「1. 水でブラシをすすぐ」「2. 歯磨き粉をブラシに付ける」「3. 歯を磨く」

という見出しで記事を作るとします。

内容を書くときは、コードを使う「テキスト」モードではなく、「ビジュアル」モードで書き進めましょう。

 

3. 見出しの文の大きさを変えよう

見出しの大きさを「見出し2」に変更

今回は、「歯磨きの仕方」「1. 水でブラシをすすぐ」「2. 歯磨き粉をブラシに付ける」「3. 歯を磨く」を見出しとして大きく取り上げたいので、文字の大きさを「段落」ではなく「見出し2」に変更しました。

そうすると、ビジュアルモードはこうなります。

ビジュアル:見出しを「見出し2」に変更した結果

では、コードで見出しを変更するにはどうすれば良いのでしょうか?

 

3. 補足:コード<h>~</h>で見出しを大きくする方法

テキスト:「見出し2」に変更した時のコード

 

ビジュアルで「見出し2」に変更した後、テキストモードでは大きくした見出しの文の両脇に見慣れないコードが加えられています。

<h2></h2> とはなんでしょうか?

<h○>はHeadingを指していて、Headingとは「見出し」という意味です。

<h○>の「○」には数字を入れます。

<h1>1番大きい見出し、最上位の大見出しとなり、<h6>1番小さい、最下位の小見出しとなります。

あくまで、見出しの大きさを変える時だけに使うのが好ましく、それ以外の文や単語を大きさを変える時には使用は避けた方が良いとの事です。

(参考:HTMLクイックリファレンス <H1>~<H6>

「ビジュアルモードで見出しの変更が出来ない」という方は、テキストモードで私の真似をして<h2> ~ </h2>を入力してみてください。

それと、お約束なのですが、コードを書く際には、必ず「どこからどこまでの範囲で効果をもたらすか」を括(くく)らなければなりません。

ですので、今回の場合は「<h2>1. 水でブラシをすすぐ</h2>」のように書きます。

文・単語の始まりの前に<h○>を、文・単語の終わりの後ろに</h○>を入れて範囲を決めます。

「 / 」(スラッシュ)を忘れないように気をつけましょう。

 

4. 目次から見出しに飛べるように、「id」を使って飛ぶ準備をする

「id=”~”」を入れて特定の文字列だと識別出来るようにする

「自分のページから特定のページに飛ぶにはURLのリンクを貼れば良い」という考えは、あくまで他のページのURLに飛びたい時に使います。

今回のように、「自分のページの目次から、自分のページの見出しに飛びたい」という場合にはURLをリンクさせません。

では、どうすれば良いのでしょうか?

「見出し」とは、言ってみれば「飛んでほしい特定の箇所」のことですよね。

ある部分を特定の箇所という意味・位置づけで定義して決めてしまえば良いのです。

 

ここで登場するのが id=” ~~~ ” です。

日常生活でも「IDカード」等と使用する事が多い言葉なので、イメージが湧き易いと思います。

このidとはidentifier識別名、識別子)を指しています。

このidを使って、単なる文字列を特定の意味・位置づけにして、識別・判別出来るようにします。

例えるなら、日本で一番多い苗字の佐藤さん、どの佐藤さんを呼びたいのか分からないので、社員証(id)を首に下げてもらって、「〇〇会社の佐藤さん」という風にしてしまえば呼び易いですよね。

それと同様で、同じ文字列でも、特定の文字列だと識別・判別出来るように定義して決めるのです。

 

今回は「見出し2」という大きさになっている「<h2>1. 水でブラシをすすぐ</h2>」を特定の文字列だと識別させたいので、このようにします。

「<h2 id=”title1″>1. 水でブラシをすすぐ</h2>」

始まりの<h2>の中に「id=”~~~”」を入れましょう。

意味としては「id は(=) 〇〇(“~~~”)です」という感じです。

必ず「title1」のように「 (ダブルクォーテーション)」で挟んであげてください。

「title1」という名前にしましたが、これは任意で自分で決められますので、分かりやすく自由につけてください。

これにより、「<h2>1. 水でブラシをすすぐ</h2>」は「title1」と定義して識別が出来るようにしたので、ただの文字列ではなく、特定の文字列になりました。

 

同様の作業を他の見出しもしてください。

ただし、同じ名前は付けないでください。識別が出来なくなります。

「”title1″」「”title2″」「”title3″」のように必ず名前を変えてください。

 

5. 目次に見出しを<a href=” — “> ~~~ </a>で紐付ける。

「a href=” — “」 を使ってリンクさせる

見出しにidで特定の識別をさせる事が済んだら、次は目次に識別名が付いた見出しを紐付けます。

ここで登場するのが、<a href=” — “> ~~~ </a> です。

aとはanchor(錨 いかり)を指していますが、<A>タグと言います。意味は以下の通り。

<A>タグはアンカー(Anchor)の略で、リンクを貼る、リンクの出発点と到達点を指定するタグです。 (参考:HTMLクイックリファレンス <A>

 

hrefとは2つの単語の組み合わせで、hhypertext(リンクとも呼ばれる)refreference(参照)を指しています。

なので、リンクの参照元リンク先の文書の指定という意味なります。

「a href」「アンカー エイチ レフ」と読みますので、その事も覚えておきましょう。

(参考:HOW MATCH「href」の読み方・・・案外Web系の人でも読み間違ってるんです

(参考:HTMLクイックリファレンス <A>

 

そして、「” — “」にはリンク先・URL・指定した文字列を入れます。

つまり、<a href=” — “>とは「a(リンクを指定する)href(参照元)=(は)” — “(リンク先)」という感じになります。

では、先程 idで識別をしたものと組み合わせます。

 

<h2 id=”title1>1. 水でブラシをすすぐ</h2>

という様に先程 title1という識別名で識別させました。

 

それを<a href=”“>の中に入れるのですが、「title1」を入れる前に「#」を入れてください。

なので、<a href=”#title1“> という様になります。

 

さぁ、あと少し頑張りましょう。あとは範囲を決めるだけ。

最後に「どこからどこまでの範囲の文・単語にリンクを貼りますか」という設定を<a href=” — “> ~~~ </a>~~~の部分に入れます。

目次の項目の1つ目にある「1. 水でブラシをすすぐ」にリンクをさせたいので、

<a href=”#title1″>1. 水でブラシをすすぐ</a>

という様に範囲を囲ってあげて、範囲の終わりには必ず</a>を付けましょう。

先程も上記で伝えましたが、「 / 」(スラッシュ)を忘れないように気をつけましょう。

 

という事で、他の見出しにもそれぞれ同じ様に当てはめると、この様になります。

<h2>【歯磨きの仕方 目次】</h2>

<a href=”#title1″>1. 水でブラシをすすぐ</a>

<a href=”#title2″>2. 歯磨き粉をブラシに付ける</a>

<a href=”#title3″>3. 歯を磨く</a>

<h2 id=”title1″>1. 水でブラシをすすぐ</h2>
水でブラシをすすいで、ブラシに付着したゴミを取りましょう。

<h2 id=”title2″>2. 歯磨き粉をブラシに付ける</h2>
歯磨き粉をブラシに付けましょう。付けすぎには注意。

<h2 id=”title3″>3. 歯を磨く</h2>
下も上も前も奥も横も全部ちゃんと磨きましょう。

 

最後に

左はテキストモードのコード、右は完成したページ。

如何でしたでしょうか?

コードとかが小難しくて分からない方は、まるまんま同じ様に書けば大丈夫です。

 

最後に、もう一度コードを中心に確認して復習しましょうね。

  • 見出しのサイズを変える時は<h2> ~~~ </h2>
  • 見出しを特定の文字列だと識別させる時はid=” ~~~ 
  • 目次と見出しをリンクさせたい時は<a href=”#~~~“> — </a>
<h2>【歯磨きの仕方 目次】</h2>

<a href=”#title1“>1. 水でブラシをすすぐ</a>

<a href=”#title2“>2. 歯磨き粉をブラシに付ける</a>

<a href=”#title3“>3. 歯を磨く</a>

<h2 id=”title1>1. 水でブラシをすすぐ</h2>
水でブラシをすすいで、ブラシに付着したゴミを取りましょう。

<h2 id=”title2>2. 歯磨き粉をブラシに付ける</h2>
歯磨き粉をブラシに付けましょう。付けすぎには注意。

<h2 id=”title3>3. 歯を磨く</h2>
下も上も前も奥も横も全部ちゃんと磨きましょう。

 

「学ぶは真似ぶ」という様な、都合の良い事を言って上手くまとめた気になってお開きとします!

 

参考にさせていただいたサイト

 

最後までご覧くださりまして、誠にありがとうございました。

白ねずみ(@whitemicemoon

 

Follow me!

シェア・共有はコチラから!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です