ブログあれこれ

ブログ初心者でも簡単な目次の作成方法(WordPressテーマにAFFINGER5利用している方向け)

ブログ初心者でも簡単な目次の作成方法
LIM
LIM
こんにちわ!
LIMです!

今日も「なんか役に立つブログ」
書いていきます!

僕のプロフィール

・名前:LIM
・職業:会社員
・経歴:大卒/会社員歴10年以上
・好きな事:読書/歌う/ゲーム/ジョギング/筋トレ/韻を踏む
・最近興味あること:ブログ/副業/瞑想/マインドフルネス系

ブログ記事を作ったけど、目次があった方がいいなぁ。みんな目次をリンクにして見たいところへ飛べるようにしてるけど、あれってどうやるんだろう?

 

今日はそんな疑問にお答えします。

記事を書き出したら、目次を作りたくなりますよね。目次があった方が読者にも見やすく、自分に必要な情報をいち早く見つけることができるので大変便利になります。

ここでは、目次を作ってページ内のリンクに飛べるようにする簡単な方法をご紹介します。

こんな方におすすめ

  • WordPressテーマにAFFINGER5を使っている方
  • ブログ初心者
  • 目次の作り方を知りたい方

 

 

目次を作る方法

まずは、簡単な目次の作り方ですが、下記のようにマイボックスを使って箇条書きで目次を作り、それに飛びたい場所へのリンクを貼っていくと、こんな感じに綺麗な目次が簡単に出来上がります。

目次の仕上がりイメージ

では、早速マイボックスを使って目次を作る方法を説明していきます。

 

マイボックスを使って目次らしくする

マイボックスを作るのはとても簡単です。色やアイコン、線の種類などいろんなカスタマイズができますが、まずは初心者の皆さんが手っ取り早く目次を作れるように、上記の目次で使っているマイボックスのコードをご紹介しておきます。

下記のコードをコピぺで貼り、「箇条書きで目次を入れる」の箇所に目次の文言を入れると目次の完成です。

参考

[st-mybox title="目次" fontawesome="fa-file-text-o" color="#0F0D0D" bordercolor="#FFD54F" bgcolor="#FFFDE7" borderwidth="2" borderradius="5" titleweight="bold" fontsize="120" myclass="st-mybox-class" margin="25px 0 25px 0"]

  • 箇条書きで目次を入れる
  • 箇条書きで目次を入れる
  • 箇条書きで目次を入れる

[/st-mybox]

[を太字にしています。コピペしてから細字に打ち直して使ってください。

>>マイボックスを一から作成したり、色やアイコンや線などカスタマイズしたい方はこちらへ

 

アンカーリンクを貼って任意の位置まで飛べるようにする

続いてリンクを貼って、目次のリンクから任意の位置まで飛べるようにする手順を紹介します。

①まずは、下記のようにリンクを貼る箇所をドラッグして、ツールバーのボタンを押してください。

リンクの挿入①

※下記のように右クリックでリンクでもできます。

右クリックでリンク挿入

 

②続いて、下記のように「URL」の入力窓に「#link1」と入力してOKを押してみましょう。

リンクのURLを入力

すると、下記のように文にリンク入ります。

リンク貼り後

 

③次に、リンクの飛ばしたい場所に、カーソルを合わせて「挿入」→「アンカー」の順にクリックします。

アンカーの挿入

 

④続いて下記のようにアンカーのIDの入力窓に「link1」と入力します。

アンカーの入力窓「link1」

※先程作ったリンクは「#」が入っていましたが、アンカーは「#」を外して入力します。

同じ手順で、目次の他の文にもリンクを貼ってきましょう。リンクに「#link2」、アンカーに「link2」のようにアンカーをリンクの#の後のものを入力することでリンクとアンカーが繋がります。

これでリンクとアンカーが貼れたので、目次の文をクリックするとその記事の場所まで飛べるようになりました。

 

これで目次の完成です!

 

 

-ブログあれこれ

© 2022 リムブログ Powered by AFFINGER5