Twitter でフォロー

https://www.wordpresstankentai.tokyo

Table Of Contents(テーブルオブコンテンツ) プラグイン

【ワードプレス プラグイン】 目次を【Table Of Contents Plus】で設定してみた!カンタンな使い方>

更新日:

【ワードプレスプラグイン】目次プラグインの定番【Table of contents Plus】のインストールから設定方法までを紹介します。

ワードプレスで作ったページのトップによく見かける【目次】を表示できるワードプレスプラグイン『Table of Contents Plus』のインストール方法と設定方法を紹介します。

 

これがあるのと無いのでは、ページ自体の見やすさが変わってくるので、この機会に是非導入してみたいプラグインです。

こんな方におすすめ

  • TOC+のインストール方法、設定方法を知りたい人
  • ワードプレスのプラグインのインストール方法などを知りたい人

目次プラグイン【Table Of Contents Plus】のインストール方法

まずは目次プラグイン【Table Of Contents Plus】のインストール方法を紹介します。

このプラグインのインストール方法は、他のプラグイン同様です。

画面左の【プラグイン】から【新規追加】を選択します。

 

 

検索窓に【Table Of Contents Plus】と入力。

Enterキーをクリックする事で、色々なプラグインが表示されます。

 

リストの中から【Table of Contents Plus】を探し、【今すぐインストール】をクリックします。

 

 

インストールが完了すると、上の画像の様になりますので、【有効化】をクリックします。

こだま
これで【Table of Contents Plus】は有効化されましたので、次は設定です。

 

目次プラグイン【Table Of Contents Plus】の設定方法

次は目次プラグイン【Table of Contents Plus】の設定をしていきたいと思います。

【Table of Contents Plus】は設定方法もカンタンで、一度設定してしまえば全てのページの目次に適用されます。

 

画面左の【設定】から【TOC+】をクリックします。

 

クリックすると【Table of Contents Plus】の設定画面に移行します。

 

Table of Contents の設定画面

 

位置

ココでは目次の位置を決めます。

最初の見出しの前、後、または記事の上、下から選択する事ができます。

 

表示条件

ここではいくつの見出しがある場合に目次を表示するか決定します。

デフォルトでは4つ見出しがある時に目次が自動で表示される様になっています。

 

以下のコンテンツタイプを自動挿入

ここではどんな場所に目次を表示するか指定します。

  • post             固定ページ
  • page          投稿ページ
  • custom CSS       カスタムCSS
  • customize_changeset   よくわかりません。
  • oembed_chache     これもよくわかりません。
  • wpcf7_contact_form   コンタクトフォーム7に表示する場合チェックを入れる

よく分からない項目もあるので、私は必要に応じて、post、pageにチェックを入れています。

 

見出しテキスト

見出しテキストは、見やすさの目安になるので、結構重要かなと思っています。

デフォルトでは英語ですので、日本語に書き換えています。

私は以下の通りにチェックを入れています。

目次の上にタイトルを表示

ボックス内は【目次】と記入しています。

ユーザーによる目次の表示・非表示切り替えを許可

【テキストを表示】ボックスには『表示』と記入

【テキストを非表示】ボックスには『閉じる』と記入

階層表示

好みでチェックを入れます。

ここにチェックを入れる事で、目次の表示が項目ごとに段差つきで表示されます。

番号振り

好みでチェックをいれます。

ここにチェックを入れる事で、目次の各項目に分かりやすい番号が表示されます。

スムーズスクロール効果を有効化

ここにチェックを入れる事で目次内をクリックした際に、目的のセクションに滑らかにスクロールします。

ここにチェックを入れない状態では、目次内のクリックした箇所にジャンプします。

 

外観

ここでは外観の設定をします。

 

横幅

ここでは目次の横幅を設定します。

自動

自動に設定するとページの表示幅に最適な状態で目次が表示されます。

このブログでは『自動』に設定しています。

固定幅 (PX指定)

固定幅でピクセル指定する事ができます。

数字が大きいほど幅が広いです。

割合%

で目次の幅を設定する事もできます。

 

回り込み

無し、右寄せ、左寄せの3つから選択できます。

 

文字サイズ

文字サイズは『%』で設定する事も出来ますし、pt(ポイント)、em(文字強調HTML)など設定できます。

こだま
私は良く分からないので、そのままいじっていません。

 

プレゼンテーション

ココでは目次の見た目を選びます。

目次のデザインはデフォルトでは6種類から選ぶ事ガで来ます。

 

カスタムを選択すると

カスタムを選択することで、枠線や背景などを好きな色に設定できるようになります。

 

 

AFFINGER4】ではオリジナルの目次の外観に設定できます♪

このブログで使っているワードプレステンプレート【AFFINGER4】ではオリジナルの外観を使用できます。

 

AFFINGER管理画面右下、【その他】の項目にある、「TOC+にオリジナルCSSを適用する」にチェックを入れます。

 

⇩⇩⇩AFFINGER4での、目次の外観の設定方法はコチラのページで解説しています。

【アフィンガーの使い方】アフィンガーの文字装飾一覧はコチラ>

目次このページでは人気ワードプレステンプレート、【アフィンガーAFFINGER4】の記事装飾の使い方や機能などを紹介します。見出しのデザインも自由自在! こんな風にかんたんに変更可能です。『クリップメ ...

 

目次プラグイン【Table Of Contents Plus】まとめ

今回は目次プラグイン「Table of Contents Plus」のインストール方法と設定方法を紹介しました。

基本的に難しい設定も無く、すぐに使えるのでぜひあなたのブログにも導入してみてください。

 

 

画像ダウンロード

Export Media Library プラグイン

あっ、ワードプレスの元画像消しちゃった!WPから画像のみダウンロードしたい

私はワードプレスに使う画像はパソコンに保存していて、そこからワードプレスにアップロードして使っています。 ただ、たまにその元画像を間違って消してしまう事もあるんですよね。   でも、大丈夫! パソコンなどに保存した画像はワードプレスにアップロードしてあればそこからバックアップをとる事ができます。   こだま有効化をクリックすることでこのプラグインを使って画像をダウンロードする準備ができました。   【export media library】で画像をダウンロード 次は【exp ...

続きを読む

imsanityの使い方

imsanity プラグイン

画像圧縮プラグイン「imsanity」の設定方法と使い方まとめ

こんにちは 当ブログ管理人のこだま(@wptankentai)です。   今日はワードプレスに大きすぎる画像を取り込まないように設定できるプラグイン、【imsanity】の使い方と設定方法を紹介します。   簡単に使えるし、一回設定してしまえば基本的に放置で大丈夫。 ワードプレスでブログを立ち上げたらすぐに設定しておくと良いと思います。   目次画像圧縮プラグイン「imsanity」はこんな事ができます。imsanity のインストール方法imsanity の設定と使い方im ...

続きを読む

EWWW Image Optimizer プラグイン

あれっ?画像サイズデカっ!画像圧縮でちゃんと軽量化できてます?

このページでは画像サイズを小さくする事でページの読み込み速度を早くしてくれるプラグイン「EWWW Image Optimizer」について解説していきます。   ワードプレスでブログなどを書いている時に、ページが表示されるまで遅いと感じた事はありませんか?   そんな場合は実は「画像サイズ」に注目してみてください。 画像のファイルサイズが大きすぎると読み込みが遅くなるので、結果ページ全体の読み込み速度が遅くなるので注意です。   ポイント 画像が大きすぎるとこんなマイナスポイ ...

続きを読む

Wordpress Ping Optimizer プラグイン

ワードプレスPing送信プラグイン【WordPress Ping Optimizer】のインストールと設定方法

今回紹介するのは、ワードプレスのping送信プラグイン、【Wordpress Ping Optimizer】のインストールと設定方法を紹介します。 ping送信は、ワードプレス運営でかなり重要なポイントなんですけど、適当になってしまっている人もいるのではと思ってこの記事を書く事にしました。 知らないと損するかもしれない情報もあるので参考にしてみてください。 簡単に設定できるし、地味に効果的なので、是非設定してみて下さい。 目次【Wordpress Ping Optimizer】はこんなプラグイン【Word ...

続きを読む

WebSub/PubSubHubbub プラグイン

【ワードプレス プラグイン】おすすめ・ 初心者【WebSub/PubSubHubbub】のインストールと設定方法

ワードプレスプラグインの中でもオススメの初心者でも出来る【WebSub/PubSubHubbub】のインストールと設定方法を紹介します。 初心者にも簡単に設定できる必須ワードプレスプラグインなので、是非参考にしてみてください。   こんな方におすすめ 【WebSub/PubSubHubbub】の設定と使い方・インストール方法を知りたい初心者の人 ワードプレスプラグイン【WebSub/PubSubHubbub】がおすすめの理由を知りたい人 目次ワードプレスプラグイン【WebSub/PubSubHu ...

続きを読む

この記事が気に入ったら
いいね ! しよう

Twitter で

アフィンガーwingの紹介タグ

このサイトでは【AFFINGER 5 WING 】を使っています。

2018年3月下旬に【アフィンガー5 WING】が発売されました。

強力な機能追加もそうですけど、【とてもやわらかい印象のデザイン】から、【カチッとしたビジネスっぽいデザイン】まで、幅広く設定できるのが好感が持てます。

 

WING(affinger5)を使ってみて

実際に使ってみた感じでは、ボタンデザインやランキングデザインがかなり洗練された見た目にアップデートされて、かなり今風になってます。

それから最新版ではカルーセルスライダー(横向きに画像が動くスライダー)機能が追加されてかなり使い勝手がアップしています!

また、ありとらゆる文字や画像、アイコンなどをアニメーション機能でかんたんに動かす事ができるようになったのがスゴいと思います。

こだま
アニメーション機能は投稿画面でサッと選ぶ事が出来ます。 プラグインも必要ないのがうれしいです。

【AFFINGER5 WING】のおすすめポイント

  1. 美しくかんたんになったデザイン!いろんなサイトに使いやすい
  2. やっぱり速い表示速度!
  3. 便利なスマホ用スライドメニュー
  4. 記事作成パーツがアップデート(投稿画面から簡単挿入)
  5. 【カテゴリー一覧ショートコード】でトップページが作り込める
  6. ランキングラベルも作れる【記事一覧ショートコード】
  7. カルーセルスライダーも搭載!記事の好きな場所に設置可能
  8. 色々なボタンを簡単に設置可能
  9. 吹き出しのアイコンがピョコピョコ動く
  10. 一回購入で複数のサイトに使用可能だからお得
  11. アニメーションが簡単!アイコンや文字など投稿画面からかんたん設定可能です。

【AFINGER WING】はインフォトップというサービスを仲介しての購入になります。

このサイトからの特典も付属しますので、以下の注意点をしっかり確認した上で購入する様にしてください。

こだま
インフォトップの決済ページでは”外注化マニュアルキットNEO”が 表示されていることを必ずご確認ください。

左のボタンにチェックが入っている事も忘れずに確認してください。

 

表示がない場合はレビュー報酬&特典は受け取ることが出来ませんのでご注意ください。

※クッキーが有効になっていないと”外注化マニュアルキットNEO”は表示されませんので、 クッキーをチェックしてください。

当サイトの特典について

当サイトから【AFFINGER5 WING】を購入すると、【外注化マニュアルキットNEO】が特典が貰えます。

 

今付属の特典【外注化マニュアルキットNEO】は、アフィリエイターの為の記事外注化マニュアルになります。

どうやって記事を外注すれば効率化できるのか知っておきたいポイントがまとめられている、とてもわかりやすい教材です。

記事作成を加速させる為には必要不可欠の情報が満載ですのでこの機会にどうぞ♪

【AFFINGER5 WING】 単品での購入はコチラ⇩ 1万4800円

当サイト限定特典付き

WING AFFINGER5 特典付きはコチラ

※外注化マニュアルキットNEO付き

AFFINGER PACK3(WING対応) 3万9800円

【Affingert wing】本体と【タグマネージャー3】、【ABテストプラグイン】のセットです。)

当サイト限定特典付き

AFFINGER PACK3(WING) 特典付きはコチラ

※外注化マニュアルキットNEO付き

こだま
【PACK3】はAFFINGER WING本体と、タグ管理マネージャー、それからクリック率の比較などに便利なABテストプラグインのセットです。

3つを別々に買うと5万1400円もする所、3万9800円と1万円以上も安いのがポイントです。

ただ、値段が高い事と、後で必要があれば買い足していける事を考えると、始めはAFINGER WING単品購入でも良いかと思います。

 

  • この記事を書いた人
  • 最新記事

こだま

アフィリエイトは2013年ぐらいから始めて、ワードプレスは知識ゼロで2015年ぐらいから使い始めました。 このブログではワードプレスのテーマやプラグインの機能などを比較しながら初心者にも分るように紹介していきます。 『簡単に出来る』ワードプレスやアフィリエイトの情報発信をを心がけています♪

-Table Of Contents(テーブルオブコンテンツ), プラグイン
-, ,

Copyright© ワードプレス探検隊 , 2019 All Rights Reserved.