目次ってどうやってつくるの？ 実はめちゃくちゃ簡単だった！

寒い…　寒すぎる！！

数日前の暖かさはどこへいったのやら、平成最後の寒波であります。

そんな今日にお話しすることは、

目次の作り方です！

この目次の作り方って初心者の方は結構知らないっていうか、調べないと分かりませんよね。

私も初めは編集の目次っていうバナーを押してみたら、ただ

[:content]

と出るだけで、なんじゃこりゃ( ﾟДﾟ)

ってなりましたからね(笑)

それではさっそく目次の作り方を見ていきましょう！

Step1　普通に記事を書いてみる

まずは、いつも書いているように普通に記事を書きます。

記事は僕の好きな乃木坂46さんについて簡単に書いてみました（笑）

Step2　目次にしたいものを見出しに設定

次に左上の見出しと書いてあるところをクリックします。

クリックしてみると

このように大見出し、中見出し、小見出しのように3つに分かれています。

今回は「乃木坂46とは」、「メンバー構成」、「イベント内容」の3つを目次にしたいので3つを選択して中見出しをクリックします。

クリックすると選んだ文章が太文字になっていると思うので確認してみてください！

Step3　目次に設定する

そして次に上にある目次をクリックしてみましょう

あれ？　目次押したのにまた[:contents] って出てんじゃん！！

って思いますよね。　私も最初そう思いました（笑）

でも実はこれでいいんです！

目次にしたいものを見出しに設定し、目次を押すと編集ページでは目次欄は出てきませんが、

プレビューを見てみると、ほら！

しっかり目次として表記されています！

もし間違えて目次を設定してしまったら 

もし間違えて違う文章を目次にしてしまったら、その文章を選択したまま見出しタブをクリックし、標準に直しましょう。

あと、私が体験したことなのですが、たまに文章中の空白がいつの間にか見出し設定されてしまい、目次から消そうにもその空白がどこにあるかわからなくなってしまうときがあります。

例を出してみますね

 

たまにですがこのように目次欄によくわからない空白が目次になっているときがあります。

「こんな設定してないよな～　よし、直そう！」　と思って編集ページに行くのですが、

 

空白は当然文字ではないので太文字のものを標準に直すことができません。

どうしよう…と探してみますが、見出し設定されてしまった空白を見つけるのはそう簡単ではありません。

私も最初このミスに出くわしたときかなり苦労しました。

しかし、実は簡単に直せる方法があったのです。

それが編集見たままタブの隣にある、HTML編集です。

実はここでどこが見出しとなっているかを把握することができます！

これは今回例に出した乃木坂に関する記事のHTML編集ページです。

ん～　なにが書いてあるかさっぱりわからん(笑)

でも今回は、

この（h4）と書かれている場所にだけ注目してみます。

この（h4）ですが、これが見出しを表しているんですよね。

（h3）が大見出し、（h4）が中見出し、（h5）が小見出しを表しているんですよね。

このHTML編集ページをよく見ていると、

見つけました！！

何も書かれていないところに（h4）の文字。

これを消してみましょう！

はい！　消しました。

それでは、もう一度プレビューを見てみましょう！

おお！　しっかり戻っている！！

ということで目次を作るときはHTML編集ページもうまく活用するとより簡単に編集できるわけです。

今回は趣味とか全く関係なしに書いてしまいましたが誰かの役に立ったのならオールオッケーです(笑)

たまにこういった記事も書いていこうかなと思います！

読んでくださった方ありがとうございました！

それじゃ(^o^)／