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

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

追記
[開く(閉じる)]を使用しているサイトでは、閉じた際に巨大アイコンがはみ出てしまうため、コードを一部修正しました。

カスタマイズは自己責任でやろう!

「自己責任」の意味がわからない方、初めてカスタマイズする方はこちら

カスタマイズは自己責任。ぼくはこんな風に思っています。


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

こんな感じで変更

Before
After

このサイトの環境

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

使うソフトなどはこちら

必須

WordPressWordPress

グーグルクロームGoogle Chrome

推奨

ファイルジッラFile zilla

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

カスタマイズの準備

追加方法難しさ
追加CSS
テーマエディター
FTPソフト

はじめてカスタマイズをする方におすすめなのは追加CSSです。

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

夏だし髪を斬りに行こう!

夏だしどっか行こう!

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

 

確認の手順

  1. カスタマイズコードを保存
  2. カスタマイズしたページを開く
  3. cntrl+F5を押す

いわゆるキャッシュ削除ですね。詳しい手順はこちらの記事で書いています。

カスタマイズはキャッシュ削除をマスターしてからです

   

まとめ

追加CSSのまとめ
手順をザクッと説明
変更手順
  • 目次(TOC)の設定
  • FTPソフトとテキストエディタを開いて準備OK。
  • 追加のコードを書き込んで、保存。アップロード。
  • 更新して確認。
MENくん
可愛くて見やすい目次ができたよ!
くま3号
右下のアイコン、、、、ええやん