こんにちは "osaboo"
です。"@osaboo_Bot"
この記事で解決できる悩み
この記事では、これらのお悩みを解決します。
「まずはブログを始めたい！」という方は、『WordPressブログ完全ガイド』をご覧ください。
開設から運営・収益化までを初心者向けに画像付きでわかりやすく解説しています。
SUGOI MOKUJI（すごいもくじ）LITEとは？
SUGOI MOKUJI（すごいもくじ）LITEは、AFFINGER7で利用できる目次作成プラグインです。
AFFINGER7購入者向けの無料特典として利用でき、記事内に見やすい目次を簡単に設置できます。
必要な機能に絞られた軽量なプラグインなので、ブログ初心者でも扱いやすく、解説記事や設定記事など長めの記事にもおすすめです。
SUGOI MOKUJIには「LITE」と「PRO」がありますが、一般的なブログ運営で目次を表示するだけならLITEで十分利用できます。
関連記事
AFFINGERを導入したばかりの方は、まずAFFINGER7の初期設定を済ませてから目次プラグインを設定するとスムーズです。
-
-
AFFINGER7の初期設定完全ガイド｜導入後に最初にやるべき設定を初心者向けに解説
AFFINGER7の初期設定を初心者向けにわかりやすく解説。設定画面の場所から導入後に最初にやるべき設定、おすすめ設定、SEOやアフィリエイトに役立つ設定まで順番に紹介します。
SUGOI MOKUJI（すごいもくじ）LITEの導入方法
ここでは、SUGOI MOKUJI（すごいもくじ）LITEの導入方法をご紹介します。
「SUGOI MOKUJI（すごいもくじ）LITE」プラグインをダウンロード
「SUGOI MOKUJI（すごいもくじ）LITE」プラグインをダウンロードします。
公式 STINGER STORE にログインします。
Menu『WordPress管理画面 → AFFINGER管理 → 設定ナビ』をクリックします。
「AFFINGER管理」画面の「はじめに」タブが表示され、はじめに（必ずお読みください）のページが表示されます。
『STINGER STORE』をクリックします。
「STINGER STORE」のホームページが表示されたら、右上の『ログイン』をクリックします。
以下の手順でログインします。
- 『メールアドレス』を入力します。
- 『パスワード』を入力します。
- 『ログイン』をクリックします。
マイページから『購入ユーザー限定ページ一覧』を開きます。
ログインが完了すると「マイページ」が表示されます。
『購入ユーザー限定ページ一覧』のテキストリンクをクリックします。
『購入商品』を選択します。
「購入ユーザー限定ページ一覧」が表示されます。
以下の画面が表示されるところまで下にスクロールします。
AFFINGER7 / EX版（AFFINGER7EX）どちらか購入した商品を選択します。
「AFFINGER7 購入ユーザー限定ページ」が表示されます。
ページを下にスクロールし、「専用&特典プラグイン」の項目を開きます。
『すごいもくじLITE（for AFFINGER7）』をダウンロードします。
以下の画面が表示されるところまで、下側にスクロールします。AFFINGER6 / EX版（AFFINGER6EX）どちらも同じです。
『すごいもくじLITE（for AFFINGER7）をダウンロード v 1.x.x 』をクリックします。
任意のデバイスに保存します。
「SUGOI MOKUJI（すごいもくじ）LITE」をインストールする
「SUGOI MOKUJI（すごいもくじ）LITE」をインストールします。
- 通常のWordPressプラグインと同じ手順でインストールできます。
Menu『WordPress管理画面 → プラグイン → プラグインを追加』をクリックします。
「プラグインを追加」外面で『プラグインのアップロード → プラグインを選択』の順にクリックします。
保存したPCなどのデバイスから「st-toc-lite.zip」を選択します。
以下のようにファイルが選択されたら、『今すぐインストール』をクリックします。
インストールが完成したら『有効化』して完了です。
Menu『WordPress管理画面 → プラグイン → インストール済みプラグイン』をクリックして、プラグイン一覧に 以下のように表示されていれば完了です。
SUGOI MOKUJI（すごいもくじ）LITEの設定方法
SUGOIMOKUJI LITEを有効化したら、WordPress管理画面の「目次」から設定を行います。
ここでは、おすすめの設定と各項目の設定理由を紹介します。
- SUGOI MOKUJI（すごいもくじ）LITEの設定は『目次』と『カスタマイザー』の2箇所で行います。
WordPress管理の「目次」でできる SUGOI MOKUJI（すごいもくじ）LITE の設定
Menu『WordPress管理画面 → 目次』をクリックします。
SUGOI MOKUJI（すごいもくじ）LITE 管理画面が表示されます。
| 設定項目 | 詳細内容 | おすすめ設定 |
|---|---|---|
| 位置 | ドロップダウンメニューより選択 最初の見出しの前 最初の見出しの後 上 下 | 最初の見出しの前：選択 |
| 表示条件 | 数値入力 2〜10 | 3 |
| 以下の投稿タイプに自動挿入 | post：投稿ページ（記事） page：固定ページ | post：チェックON page：チェックOFF |
| 見出しテキスト | 目次の上にタイトルを表示チェックONで以下の設定が可能 タイトル ユーサーによる目次の表示・非表示を切り替えを許可 表示テキスト 最初は目次を非表示 目次に戻るボタンを表示 | 目次の上にタイトルを表示：チェックON ユーサーによる目次の表示・非表示を切り替えを許可：チェックON 最初は目次を非表示：チェックON 他はチェックOFF ※ 「タイトル・テキスト」自由に決めてください。 |
| 階層表示 | 階層表示を有効化 | 階層表示を有効化：チェックON |
| スムーズ・スクロール | スムーズ・スクロール効果を有効化 | スムーズ・スクロール効果を有効化：チェックON |
| フォントサイズ | ％入力 | -％ |
| JS | JSをヘッダーで読み込む | JSをヘッダーで読み込む：チェックOFF |
| 見出しレベル | h1・h2・h3・h4・h5・h6 | 「h1・h2・h3」 にチェックON「h4・h5・h6 」はOFF |
| PROでできること | - | - |
| 変更を保存 （ボタン） | 設定終了後忘れずに 『クリック』 | ← |
カスタマイザー目次プラグイン（すごいもくじ）のデザイン設定
カスタマイザーを起動します。
Menu『WordPress管理画面 → 外観 → カスタマイズ』をクリックします。
「カスタマイザー」画面で以下の手順で進み、『目次プラグイン（すごいもくじ）』の詳細設定ができます。
オプション（その他）
➡︎
目次プラグイン
（すごいもくじ）➡︎
詳細設定
⬇︎
詳細設定項目
目次プラグイン（すごいもくじ）
背景色
- 色を選択 → #RRGGBB（デフォルト）
- 角丸にする → OFF（デフォルト）
- 目次エリアの背景色は、記事になじむよう薄めの色にすると見やすく仕上がります。
ボーダー
- 色を選択 → #eee（デフォルト）
- 太さ（px）→ 1（デフォルト）→ 3〜5（おすすめ）
目次タイトル
- テキスト色 → #RRGGBB（デフォルト）
- 下線 → #RRGGBB（デフォルト）
- 目次タイトルを太文字にする → ON（デフォルト）
- 目次タイトルを左寄せにする → ON（デフォルト）→ OFF（おすすめ）
- 目次アイコン（※Unicode）→ f107（デフォルト）→ e91c（おすすめ）
第1階層リンク
※ 通常「h2見出し」が表示される階層です。
文字色
- 色を選択 → #RRGGBB（デフォルト）
- センター寄せにする → OFF（デフォルト）
- 数字を表示する → OFF（デフォルト）
- 文字にする → ON（デフォルト）
- 第1階層のみの場合のリンクを太字にする
→ OFF（デフォルト）
第2階層リンク以降
※ 通常「h3見出し」以下が表示される階層です。
文字色
- 色を選択 → #RRGGBB（デフォルト）
リスト数字・アイコン
- 色を選択 → #RRGGBB（デフォルト）
下線
- 色を選択 → #RRGGBB（デフォルト）
- 数字（アイコン）を非表示にする → OFF（デフォルト）
- 文字にする → OFF（デフォルト）
- 数字をアイコンに変更する → OFF（デフォルト）
- 第3リンク以降の数字（アイコン）を非表示にして並列にする
→ OFF（デフォルト）
デザインスタイル
- 6種類のデザインが用意されています。
次の章で、デザインスタイルのイメージをご紹介します。
イメージを掴んでお好みのタイプをお選びください！
- デフォルト（おすすめ）
- タイムライン
- タイムライン（カウント）（おすすめ）
- チェック
- はてな
- ドット
サイトのデザインに合わせて、シンプルな目次デザインにすると見やすくなります。
SUGOI MOKUJI（すごいもくじ）LITEのデザイン例
カスタマイザーでデザインを選択するだけで簡単に設定できるデザインスタイルを6つご紹介します。
設定するときの参考にしてください。
※ カスタマイザーでの色設定はデフォルトのままです。
デフォルト
タイムライン
タイムライン（カウント）
チェック
はてな
ドット
デザインスタイルはお好みでOKです！
サイトの雰囲気に合ったものを選んでみてください。
SUGOIMOKUJI（すごいもくじ）LITEを使うメリット
SUGOIMOKUJI LITEは、シンプルで使いやすい目次プラグインです。
主なメリットは次のとおりです。
- 軽量でサイトに負担をかけにくい
- AFFINGER7との相性が良い
- 見出しから目次を自動で作成できる
- 記事が読みやすくなり、ユーザー体験の向上につながる
AFFINGER7を利用している方なら、無料で使える特典プラグインなので、ぜひ活用してみてください。
目次が表示されないときの対処法
SUGOIMOKUJI LITEを導入しても目次が表示されない場合は、次の項目を確認してみましょう。
- プラグインが有効化されているか
「プラグイン」画面を開き、SUGOIMOKUJI LITEが有効になっているか確認します。 - 見出し数や表示条件を確認する
表示条件を「見出し3個以上」に設定している場合は、見出しが不足している記事では目次は表示されません。 - 投稿タイプの設定を確認する
投稿ページだけでなく、固定ページでも表示したい場合は、表示対象の設定を確認しましょう。 - キャッシュを削除する
キャッシュ系プラグインやブラウザのキャッシュが原因で、設定変更が反映されないことがあります。
まとめ！SUGOI MOKUJI LITEの導入・設定・使い方｜AFFINGER7での設定手順を解説
今回は、AFFINGER7でSUGOI MOKUJI（すごいもくじ）LITEを導入・設定する方法をご紹介しました。
SUGOI MOKUJI LITEは、AFFINGER7購入者向けの無料特典プラグインです。インストールして基本設定を行うだけで、記事に見やすい目次を簡単に設置できます。
また、カスタマイザーからデザインも変更できるので、サイトの雰囲気に合わせた目次を作成できます。
まだ導入していない方は、この記事を参考にSUGOI MOKUJI LITEを設定し、より見やすく読みやすい記事づくりに役立ててみてください。
