Affinger5 記事で目次を使う方法|5分でできる!

Affinger5

今回はAffinger5で目次を使う方法について紹介します。

Affinger5で目次を作成するには2通りの方法があります。

 

  • プラグインを使用して自動的に作成する方法(一番簡単・手間がかからない・無料プラグインあり)
  • 手動で作成する方法(表示する目次のカスタマイズができる)

 

目次を作るメリットとは?
目次があると記事が見やすくなるよ!
  • 記事にどんな内容が書かれているか一目で分かる
  • 欲しい情報にすぐたどり着ける

ユーザーにとって使いやすいウェブサイトを作成すれば、ページ滞在時間も長くなる傾向にあります。

Affinger5では誰でも簡単に目次を作ることが可能なので、是非活用しましょう!

 

スポンサーリンク

プラグインを使用してAffinger5で目次を作る方法

Affinger5で一番簡単に目次を作成する方法は、プラグインを使用することです。

基本的にプラグインは、TOC+(無料)またはすごいもくじ(有料)を使用するのがオススメです。

有料の「すごいもくじ」というプラグインは機能的で、あれば便利という感じですが、無料プラグインを使用しても全く問題ないです。

 

早速TOC+で自動の目次をサイトにインストールしてみましょう。

 

  • STEP1
    TOC+プラグインをダウンロードする

    ワードプレスダッシュボード>プラグイン >新規追加からTOCと検索してダウンロードします。

    プラグインを有効化します。

  • STEP2
    TOC+の設定画面を開く

    設定>TOC+をクリックしてTOC+の設定画面を開きます。

  • STEP3
    TOC+の設定をする

    基本的に以下のように設定をしておけば問題ないです。あとは自分の好みで設定してみて下さい。

  • STEP4
    確認してみる

    目次がちゃんと表示されるか、実際に自分のサイトの記事で確認してみます。

    各記事に自動的に目次が表示されているはずです。

    *ボーダー色や文字色などの設定はカスタマイザーから変更可能です。これについては後半で説明します。

 

スポンサーリンク

Affinger5で手動で目次を作る方法

次に紹介する方法は、目次を自分で作る方法です。

プラグインを使用する時と異なり、自動ではないので、毎回作成するのは少々手間がかかりますが、メリットもあります。

  • 表示する目次を細かく設定できる
  • 目次プラグインを使用する必要がない(プラグインが多くインストールされているとページ速度が遅くなる可能性があるので、できるだけ少ない方が良いです。)

 

目次を挿入する

編集画面からタグ>その他のパーツ>目次(カスタム)をクリック

すると次のように表示されます。

 

目次のリンクを作成&設定する方法

 

それぞれの見出しに飛ぶようにリンクを付けたいけど、リンクはどうやって作るの?

 

ページの特定の場所に移動するリンク(ページ内リンク/アンカーリンク)を作成する必要があります。

通常、アンカーリンクを手動で作成するのは、地味に面倒なのですが、TinyMCE Advancedというプラグインがあると簡単にアンカーリンクを作成することができます!

 

TinyMCEでアンカーリンク機能が使えるように設定をする

TinyMCEの設定画面からアンカーリンク作成ボタンをドラッグ&ドロップします。

そして設定を保存します。記事投稿の編集画面にアンカーボタンが追加されているはずです。

 

実際にアンカーリンクを作成してみよう!
  • STEP1
    ボタンを作成する

    ジャンプ先の場所を選択して、アンカーリンクボタンをクリックします。

  • STEP2
    IDを入力する

    IDを入力します。ID名は適当に決めてOKです。aなど1文字だけでもOK。

  • STEP3
    IDをリンクに挿入する

    目次に先ほど設定したID名をリンクに入力します。この時に#も入れます。

  • STEP4
    アンカーリンク作成完了!

    プレビューでアンカーリンクが正しい位置にちゃんとジャンプしているかを確認してみましょう。

 

スポンサーリンク

おまけ:Affinger5の目次を色をカスタマイズする方法

目次の色はカスタマイザーから簡単に変更することができます。

WordPress管理画面>外観>カスタマイズ>オプションカラー>目次プラグイン(すごいもくじ)

すごいもくじ(有料プラグイン)と書かれていますが、TOC+を使っていても、ここで設定した色は反映されます!

 

まとめ

Affinger5では簡単に目次の作成&カスタマイズ可能なので、すぐにユーザーにとって使いやすいウェブサイトに作り上げることができます。

今回はプラグインを使う自動の方法とタグを使った手動の方法を紹介しましたが、

毎回手動で目次を作成するのは手間がかかるので、基本的にはプラグインを使用するのがオススメです。

是非試してみてください。

タイトルとURLをコピーしました