WORDPRESS

WordPressでHTML入力して自分で目次を作る方法

目次をつけるほどの内容量ではありませんが、なんとなくブログっぽく見えるので目次をつけている なつ です。

今回は自分で目次を作成したい方にHTML入力で簡単な目次を作成できる方法をご紹介します。

※2020年1月より無料WordPressテーマ『Cocoon』に変更。見出しタグが自動で目次になるようになりました。今回作成する目次はこの記事に表示されている目次とは異なります。

目次はリストで作る。-olとulの違い-

目次を作るのに便利なコードがolやulコードになります。

なので少しolとulについて書きます。

olとulの違いってわかりますか?

順序があるかないかですよね。

でもいきなり聞かれるとすぐに出てこなかったりしませんか?

入力してみて、

「あっ、間違えた。こっちだった。」

みたいな。

語源の「order list(順序付きリスト)」「unordered list(順不同リスト)」を頭の片隅に置いておくと覚えやすいと思います。


【olの場合】

  1. HTMLについて
  2. olとは
  3. olで書いてみた


【ulの場合】

  • HTMLについて
  • ulとは
  • ulで書いてみた


こんな感じになります。

あとは目次という文字を入力すると、

~目次~

  1. HTMLについて
  2. olとは
  3. ulとは
  4. 目次を書いてみた



これだけでも目次っぽくなりますね。

でもなんだかこれだけじゃ味気ないという方は次の章へ。




おしゃれな目次の作り方

続きましておしゃれな目次の作り方ですが、初心者の方がおしゃれな目次を作る一番いい方法は″ググる″です。

キーワードは「HTML 目次 デザイン」でググるとそれっぽいものがでてきます。コピペ用にコードも載っている場合が多いのでコピーしましょう。

そしてCSSにペースト!

ただ検索してコピペする。

それだけでおしゃれな目次の完成です。

でもちょっと待って、そのまま鵜呑みにしてただコピペしたそこのあなた

こんなことになっていませんか?

矢印の部分のように目次とは関係のないとこにまで目次のCSSが反映されていますね。

慣れている方なら「当たり前じゃん。」と思われるかもしれませんが、初心者の方にとっては

「何で?」

となると思います。 (現に僕はそうでした。)

次に目次以外に目次のCSSが反映されない方法を載せています。




目次以外に目次のCSSを反映させない方法

目次にだけ目次のCSSを反映させたい場合はCSSだけでなく、HTMLも手を加える必要があります。とは言っても簡単なのでさっそくやってみましょう。

今皆さんの目次のHTMLをみるとこんな感じになっていませんか?これにリンクを貼っている方も多いと思いますが簡略します。


<p>~目次~</p>
<ol>
<li>HTMLについて</li>
<li>olとは</li>
<li>ulとは</li>
<li>目次を書いてみた</li>
</ol>

このHTMLにclassを設定します。

class名は自分の好きなものでかまいません。

今回は"mokuji"で設定してみました。以下のようになります。


<p>~目次~</p>
<div class="mokuji">
<ol>
<li>HTMLについて</li>
<li>olとは</li>
<li>ulとは</li>
<li>目次を書いてみた</li>
</ol>
</div>

HTMLにclassを設定できたら次はCSSです。

olやulの前に"mokuji(先ほどHTMLで付けたclass名)"をつけましょう。

.mokuji ol,mokuji ul

↑こんな感じで。




設定後は確認しよう

最後はしっかり反映されているか、目次以外の変な場所に反映されていないか確認しましょう。

大丈夫だと思い、直接CSSを書き換えて後でアレ?おかしいとなってしまっては後の祭りです。(僕は直接書き込んだ後に記事以外にも目次のCSSが反映されていることに気づいたのでめちゃくちゃ焦りました。)

カスタマイズの追加CSSに書くか、バックアップを取っておきましょう。

もし反映されていなくても焦らずにもう一度コードを見てみましょう。

意外とスペル間違いをしている時があります。

それでも分からない場合は"ググり"ましょう。僕に聞かれても99.9%分かりません。←威張るとこじゃない。




最後に

どうですか?設定できましたでしょうか??

最初は怖々とCSSを触っていたのですが、最近少し慣れてきて「このデザインもいいなー。」とブログを書くことそっちのけで目次のデザインを見ているときがあります。

自分のブログに合うかなと思い、設定してみるとイメージと違ったりして繰り返すうちに気づけばそれだけで時間が無くなってしまったりします。

皆さんも自分のサイトやブログにあう、目次デザインを探してみましょう!

閲覧いただきありがとうございました。

初心者必見!
ワードプレス初心者が後回しにするとヤバいパーマリンク設定

そろそろパーマあてたいな 今日はそのパーマじゃなくてパーマリンクについて紹介するよ 先日やっとパーマリンクを変更した なつ です。 今回はワードプレスで作ったブログやサイトを多くの人に見てほしいといっ ...

続きを見る



-WORDPRESS
-

© 2021 natumemo Powered by AFFINGER5