こんにちは!!ハイジです!
AFFINGER5使いの皆さんはもちろん、SUGOI_MOKUJI(すごいもくじ。以下、すごいもくじ)使っていますよね?
すごいもくじは目次のクリック数を計測してくれるのでどの目次がよくクリックされているかがわかり、クリック数の多い箇所をもう少し上の方に持っていくなどリライトなどの際に重宝する、文字通りのすごいもくじです。
さて、そんなすごいもくじ、当ブログでも使用しておりますがデザインを結構カスタマイズしてますのでその方法を公開します。
現在はAFFINGERではなく「SWELL」というテーマを使っています。
デザインはシンプル美でありながら高機能なオススメのテーマです。
AFFINGERからの移行をサポートするプラグインもあるのでこの機会にSWELLを検討してみてはいかがでしょうか。

SWELLを半年使用してのレビューを書いてみましたので興味のある方はご覧ください!
- こちらのカスタマイズはH2・H3の見出しにのみ対応しております。また、目次の表示/非表示の切り替えには対応しておりません。
こんな感じになります。


完成形はこのようになります。

どこかで見たようなデザインですが。。。
SANGO礁界隈の方なら見慣れたデザインかもしれませんがfor men | やってみるをサポートを運営されているくまさん(@Bearface18)がカスタマイズしたTOC+のデザインをパク・・参考にさせていただいています。
カスタマイズは自己責任でお願いします。
準備
まず、ダッシュボードの「目次」を開いて

「プラグインの CSS スタイルを読み込まない場合はチェック(フォントサイズ指定を除く)」にチェックを入れます。
フォントサイズはこの画面で設定したものが反映されるので好きな数字にすればいいでしょう。
次にカスタマイザーの「オプションカラー」の「目次プラグイン(すごいもくじ)」の

一番下にある「ペーパー風デザインを適用する(*専用プラグイン)」のチェックを外します。
CSSを追加する
以下のCSSを追加してください。
これだけで完了!!・・・ではありません。
あとはカスタマイザーから設定します。
カスタマイザーでの設定

カスタマイザー「オプションカラー」→「目次プラグイン(すごい目次)」
各チェック項目は上の画像を参考に同じ様に設定をお願いします。
あ、でも「背景を角丸にする」に関しては好みでお選びください。
角丸にすると柔らかな印象で、しないとピシッとした印象になりますね。
目次アイコンはFont Awesomeより好きなアイコンを選びそのユニコードを記載します。
背景色はお好みの色を設定してください。
ボーダー色は先程のCSSコードの8行目、background: #4c4e69;
の色コードと同じ色コードにします。
カスタマイザーの設定変更とCSSコードの8行目の色コード(目次タイトル背景色)を変更するだけで下の画像のようにガラッと印象を変えることができます。


ピンクのアイコンのユニコードはf004
、ブルーのアイコンのユニコードはf097
を設定しています。
まとめ

AFFINGER5で作られたサイトではあまり見ないデザインでいいよね

SANGO礁界隈ではよく見かけるデザインですが・・・
現在はAFFINGERではなく「SWELL」というテーマを使っています。
デザインはシンプル美でありながら高機能なオススメのテーマです。
AFFINGERからの移行をサポートするプラグインもあるのでこの機会にSWELLを検討してみてはいかがでしょうか。

SWELLを半年使用してのレビューを書いてみましたので興味のある方はご覧ください!
COMMENT_お気軽にコメント下さい