[初心者向け] Word Pressで投稿に目次をつける方法 | プラグイン無しで簡単にできますよ!!

ブログの投稿記事を書いていて、主題から項目が幾つかできる場合に目次があると訪問された方が閲覧するのに便利かなぁと思ったりしますよね。

調べたいことや見たい内容がはっきりしている場合、特にあるとスクロールする手間が省けていいです。

実際自分が調べたいことを検索して、記事を読む時にもあると便利だと感じます。

簡単に目次を生成できるプラグインもありますが、何か装飾を施してみようと思うたびにプラグインをインストールしているとキリがありませし、比較的簡単に作れますので興味があれば作成してみてください。

私自身が「超初心者」です。

その私が作成している方法ですので「超初心者」の方でも簡単にできると思います。

1.目次の作成

入力は「コードエディター」に切り替えて行います。

私の場合は、上の目次のようにboxの枠で囲んで項目をクリックするとジャンプするように作成しています。

wordpressのコードエディターは以下の通りになります。

これは目次のある位置に入力しているコードで、内部リンクを貼って見出しの項目にジャンプさせてます。

title1~title4の部分がジャンプする先の指定になりますので、移動先になる見出しの方には「id」title1~title4で双方の紐づけをします。

これで1.目次の作成は紐づけされたので、目次の所でクリックすると見出しの方へとジャンプします。

目次を作る際に書き換えるのは、黄色の「title1」部分とご自身で作成される赤色の「1.目次の作成」の部分です。

「title1」は何にしても問題ありませんが、「title1」にしておくと数字部分を順番に変えていくだけなので楽だと思います。

とても簡単に作れます。

シンプルで味気ないと思われる場合は、私のようにboxで枠を作成すると見栄えが良くなりますよ。

枠の作成する場合、CSSも書き込む必要がありますので超初心者の方は不安もあるかもしれません。

CSSの書き込みは本来テーマの方をいじることになりますが、私はチョット不安もあるので投稿ごとにカスタムCSSでboxについては反映させています。

メモ帳などにコードをコピーして置けば、その都度貼り付けるだけなのでさほど手間に感じないです。

枠のコードについては、詳しい方がコードを公開してくれていますので作成も難しくありません。

検索するとたくさん出てくると思います。

個人的にいつも分かりやすくて初心者には助かるなぁと見ているのは、「サルワカ」さんのページです。

リンクを貼るのは申し訳けないので、「枠(囲み)のコードサンプル　サルワカ」で検索してみてください。

たしか30種類くらいのコードを公開していたと思います。

私も枠で囲む際はすべて「サルワカ」さんのコードです。

2.投稿記事の途中から目次へ戻れるようにする

今回のこの記事の量ですと必要ありませんが、項目が増えて記事の量が増えると「目次にもどる」を作っておくと訪問された方が見たい項目だけをスムーズに閲覧でき便利です。

構造の原理は同じ内部リンクになりますので目次の作成と同じです。

目次にもどる

上の「目次にもどる」をクリックしていただくと目次にジャンプします。

コードは以下の通りです。

項目の切れ目などで目次を戻れるように、上のように書き込みます。

1.の目次の作成で説明したように目次へ戻れるように「mokuji」の紐づけをします。

目次に「id」mokujiをつけることにより、上の目次へもどるのコードを入力すればどこからでも目次に戻ることができます。

これはページ内での内部リンクを活用している方法なので、目次だけでなく応用すれば1番から2番や5番から1番へみたいに自由にジャンプの設定ができるようになります。

とても便利ですのでコードをメモ帳などに保存しておき、色々試してみると面白いと思います。

3.目次に入力したスペースを反映させる

目次を作る際に頭にスペースを挿入させたい場合もあると思います。

例えば親項目の1に対して子項目1-1.1-2と作りたい場合などです。

目次などの入力はコードエディターに切り替えて行いますがスペースは反映されません。

1.○○
1-1.○○
1-2.○○

となってしまいます。

やはり親と子の場合スペースを挿入した方が見やすいと思います。

1.○○
　1-1.○○
　1-2.○○

このように表示するために便利なタグがあります。

スペースを反映させたい場合はこれで目次の部分を囲むと反映されます。

まとめ

プラグインを使えば毎回自動で目次を作成してくれて便利です。

ですがあまり色々なことを頼り過ぎると表示速度も遅くなる可能性もありますし、よく分からない不具合が発生する可能性もあります。

超初心者の場合は勉強にもなりますので、今回の目次のように簡単なコードはプラグインを使用せずに作成するのがいいです。

目次だけに限らず装飾を施す場合には色々な方法があります。

検索すると1つの目的に対して複数の種類のコードが紹介されていて、訳が分からなくなることも多いかもしれません。

複雑なものだとテーマのCSSを触る必要もあります。

幾つかの投稿から自分にもできそうなものを、とりあえず勉強と思ってやってみてください。

反映された時は感激ですよ。

今回のようにCSSを触らないものはリスクもありませんので、テストページを作って挑戦してみてください。

少しずつでも構造を理解できるようになると、ブログ運営の継続の力にもなると思います。

超初心者向けのその他のコード