プラグインなしで目次を作る方法。コードの意味も丁寧に解説しながら説明。プラグインなしで目次を作る方法。コードの意味も丁寧に解説しながら説明。プラグインなしで目次を作る方法。コードの意味も丁寧に解説しながら説明。ツイートシェアはてブGoogle+Pocket本記事にお越しいただけまして、誠にありがとうございます。白ねずみ(@whitemicemoon)です。WORDPRESS(ワードプレス)を始めたものの、初心者であれば、コードなんていじらないで、「ビジュアル」でページや記事を作っちゃうこと、よくありますよね。「コード...むつかしい...」って言って避けていたので、「テキスト」をいじって「コードを書いてみよう!」なんて殊勝な考えには直ぐには至れませんでした。私はブログで記事を書いていて、こういう壁にぶつかりました。「目次を作りたいんだけど、目次の作り方も、プラグインも、コードも分からない。まじ終わった」コード(cord)・コーディング(cording)もプラグイン(plugin)なんて、ちんぷんかんぷん。コードなんて、英単語というか、むしろアルファベットが謎の文字列にしか思えない。謎の文字列の意味をしっかり理解出来れば、コードの勉強も理解も出来ます。今回は、プラグインを使わずに、コードを使って、目次を作ってみます。一緒に勉強していきましょう。私が記事を執筆するにあたり、数カ所のサイトを参考に使いました。(随所・最下部に記載)まず、私が自分の記事の目次を作るにあたり、こつブロ!『[WordPress]プラグインを使わずに目次を作る方法』を参考にしました。私はコードについて知識が乏しく、コードについて調べながら作りました。その経験を基に、「1つの記事の中に、コードの意味も全て入っていたら良いな」と思い、コード解説等も含めた記事を書きましたので、お見知り置きください。随所に「こつブロ!」と異なる内容が御座います。等)知識がある方はこつブロ!『[WordPress]プラグインを使わずに目次を作る方法』をご参考になさる事をお勧め致します。目標とする目次まず、完成させたい目次のイメージがこちらです。左がテキストで書いたコード。コードで何が書かれているのかは、まだ理解しなくて良いです。読み進めた先で意味を説明しますから、ここでは「ほうほう」と頷いて先に進んでください。2.「ビジュアル」で書きたい内容を先に書いておく「ビジュアル」でコードを気にせずに内容を書く今回は「歯磨きの仕方」について目次を使って説明するページを作ります。歯を磨く」という見出しで記事を作るとします。内容を書くときは、コードを使う「テキスト」モードではなく、「ビジュアル」モードで書き進めましょう。歯を磨く」を見出しとして大きく取り上げたいので、文字の大きさを「段落」ではなく「見出し2」に変更しました。すると、ビジュアルモードはこうなります。補足:コード<h>~</h>で見出しを大きくする方法テキスト:「見出し2」に変更した時のコードビジュアルで「見出し2」に変更した後、テキストモードでは大きくした見出しの文の両脇に見慣れないコードが加えられています。なんでしょうか?<h○>はHeadingを指していて、Headingとは「見出し」という意味です。<h○>の「○」には数字を入れます。<h1>が1番大きい見出し、最上位の大見出しとなり、<h6>が1番小さい、最下位の小見出しとなります。見出しの大きさを変える時だけに使うのが好ましく、それ以外の文や単語を大きさを変える時には使用は避けた方が良いとの事です。</h2>を入力してみてください。それと、お約束なのですが、コードを書く際には、必ず「どこからどこまでの範囲で効果をもたらすか」を括(くく)らなければなりません。水でブラシをすすぐ</h2>」のように書きます。文・単語の始まりの前に<h○>を、文・単語の終わりの後ろに</h○>を入れて範囲を決めます。」(スラッシュ)を忘れないように気をつけましょう。目次から見出しに飛べるように、「id」を使って飛ぶ準備をする「id=”~”」を入れて特定の文字列だと識別出来るようにする「自分のページから特定のページに飛ぶにはURLのリンクを貼れば良い」という考えは、あくまで他のページのURLに飛びたい時に使います。今回のように、「自分のページの目次から、自分のページの見出しに飛びたい」という場合にはURLをリンクさせません。すれば良いのでしょうか?「見出し」とは、言ってみれば「飛んでほしい特定の箇所」のことですよね。ある部分を特定の箇所という意味・位置づけで定義して決めてしまえば良いのです。日常生活でも「IDカード」等と使用する事が多い言葉なので、イメージが湧き易いと思います。このidとはidentifier(識別名、識別子)を指しています。このidを使って、単なる文字列を特定の意味・位置づけにして、識別・判別出来るようにします。例えるなら、日本で一番多い苗字の佐藤さん、どの佐藤さんを呼びたいのか分からないので、社員証(id)を首に下げてもらって、「〇〇会社の佐藤さん」という風にしてしまえば呼び易いですよね。それと同様で、同じ文字列でも、特定の文字列だと識別・判別出来るように定義して決めるのです。水でブラシをすすぐ</h2>」を特定の文字列だと識別させたいので、このようにします。始まりの<h2>の中に「id=”~~~”」を入れましょう。〇〇(“~~~”)です」という感じです。“(ダブルクォーテーション)」で挟んであげてください。「title1」という名前にしましたが、これは任意で自分で決められますので、分かりやすく自由につけてください。水でブラシをすすぐ</h2>」は「title1」と定義して識別が出来るようにしたので、ただの文字列ではなく、特定の文字列になりました。同様の作業を他の見出しもしてください。同じ名前は付けないでください。識別が出来なくなります。「”title1′′」「”title2′′」「”title3′′」のように必ず名前を変えてください。使ってリンクさせる見出しにidで特定の識別をさせる事が済んだら、次は目次に識別名が付いた見出しを紐付けます。いかり)を指していますが、<A>タグと言います。<A>タグはアンカー(Anchor)の略で、リンクを貼る、リンクの出発点と到達点を指定するタグです。<A>)hrefとは2つの単語の組み合わせで、hはhypertext(リンクとも呼ばれる)、refはreference(参照)を指しています。リンクの参照元、リンク先の文書の指定という意味なります。レフ」と読みますので、その事も覚えておきましょう。“」にはリンク先・URL・指定した文字列を入れます。“(リンク先)」という感じになります。idで識別をしたものと組み合わせます。title1という識別名で識別させました。“>の中に入れるのですが、「title1」を入れる前に「#」を入れてください。さぁ、あと少し頑張りましょう。あとは範囲を決めるだけ。</a>の~~~の部分に入れます。水でブラシをすすぐ</a>という様に範囲を囲ってあげて、範囲の終わりには必ず</a>を付けましょう。」(スラッシュ)を忘れないように気をつけましょう。いう事で、他の見出しにもそれぞれ同じ様に当てはめると、この様になります。水でブラシをすすぐ</h2>水でブラシをすすいで、ブラシに付着したゴミを取りましょう。歯磨き粉をブラシに付ける</h2>歯磨き粉をブラシに付けましょう。歯を磨く</h2>下も上も前も奥も横も全部ちゃんと磨きましょう。最後に左はテキストモードのコード、右は完成したページ。如何でしたでしょうか?コードとかが小難しくて分からない方は、まるまんま同じ様に書けば大丈夫です。最後に、もう一度コードを中心に確認して復習しましょうね。水でブラシをすすぐ</h2>水でブラシをすすいで、ブラシに付着したゴミを取りましょう。歯磨き粉をブラシに付ける</h2>歯磨き粉をブラシに付けましょう。歯を磨く</h2>下も上も前も奥も横も全部ちゃんと磨きましょう。MATCH『「href」の読み方・・・案外Web系の人でも読み間違ってるんです』HTMLクイックリファレンス最後までご覧くださりまして、誠にありがとうございました。Analytics】アナリティクスが稼働していない時の対処方法。コメントをキャンセルメールアドレスが公開されることはありません。【スマホの使い過ぎ対策】iPhone:カラーフィルタ設定で白黒にして画面を味気なくする!【スマホ眼精疲労に効くかも?】RECOMMENDこちらの記事も人気です。白ねずみこのサイトを運営している白ねずみです。