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を押してみましょう。
すると、下記のように文にリンク入ります。
③次に、リンクの飛ばしたい場所に、カーソルを合わせて「挿入」→「アンカー」の順にクリックします。
④続いて下記のようにアンカーのIDの入力窓に「link1」と入力します。
※先程作ったリンクは「＃」が入っていましたが、アンカーは「＃」を外して入力します。
同じ手順で、目次の他の文にもリンクを貼ってきましょう。リンクに「#link2」、アンカーに「link2」のようにアンカーをリンクの＃の後のものを入力することでリンクとアンカーが繋がります。
これでリンクとアンカーが貼れたので、目次の文をクリックするとその記事の場所まで飛べるようになりました。
これで目次の完成です！