【SANGOカスタマイズしてみた】目次のデザインを可愛くしてみた

SANGOの目次のデザインを可愛くしてみた

追記
[開く(閉じる)]を使用しているサイトでは、閉じた際に巨大アイコンがはみ出てしまうため、コードを一部修正しました。
カスタマイズは自己責任で!
ワードプレステーマ
SANGO
子テーマ
PORIPU

この記事では 目次のデザインをカスタマイズした方法を説明。
CUSTOM POINT
ちょうどいい感じで行送りになるようにしました。余白調整も行いました。右下のアイコンはお好きなものに変更できます。
目次のプラグインTOC+の設定はこちらを参考にしてください。
目次をシンプルにカスタマイズする【SANGOを自分でカスタマイズ】「もくじ」にオリジナル感を出してみる

こんな感じで変更

Before
After

このサイトの環境

テーマ
子テーマ
プラグイン

使うソフトなどはこちら

必須

WordPressWordPress

グーグルクロームGoogle Chrome

推奨

ファイルジッラFile zilla

サブクライムテキストsublime text

カスタマイズの準備

カスタマイズ方法

追加CSSの手順
外観
カスタマイズ
追加CSS
子テーマの手順
外観
テーマの編集
FTPソフトの手順
FTPソフト起動
自サイトに接続
style.cssを開く

追加CSSの使い方はこちら

カスタマイズを加速させる追加CSSブログのカスタマイズを加速させる「追加CSS」の使い方

カスタマイズコードの追加

 
確認の手順
保存ボタンを押す
ブラウザでキャッシュを削除して更新
   

まとめ

追加CSSのまとめ
手順をザクッと説明
変更手順
  • 目次(TOC)の設定
  • FTPソフトとテキストエディタを開いて準備OK。
  • 追加のコードを書き込んで、保存。アップロード。
  • 更新して確認。
MENくん

可愛くて見やすい目次ができたよ!

くま3号

右下のアイコン、、、、ええやん