話題の節約術「ポイ活」って知ってる?

【JIN】目次の余白を調整するカスタマイズ

JINの目次の余白を調整

JINをスマホから見たとき、目次の余白が広すぎるのでカスタマイズしました。

▽Before
JIN目次カスタマイズBefore

▽After
JIN目次カスタマイズAfter

事前準備

このカスタマイズはスタイルシートを編集します。

親テーマを使っているとアップデートなどに対応出来ないので、子テーマのインストールを推奨します。

子テーマのダウンロードは公式サイトからどうぞ。

親テーマがインストールされている状態で、小テーマをインストール・有効化するだけで使えるようになります。

カスタマイズ方法:style.cssの編集

子テーマを有効化したら、ダッシュボード>外観>テーマの編集にアクセスします。

JINのstyle.css

最初から記入されている文字の下に、下記コードをコピー&ペーストします。

MEMO
外観>カスタマイズ>追加CSSでも可。

コードをコピー&ペースト

CSS
/*目次の余白*/
@media (max-width:767px){
	#toc_container .toc_list {
		padding: 0 10px 20px 10px;
	}
	#toc_container .toc_list > li {
		padding-left: 25px;
	}
	#toc_container .toc_list > li > ul > li {
 	   padding-left: 20px;
	}
}

コピペしたら、「ファイルを更新」をクリックして完了です。

動作確認

目次が表示されている記事を開いて、CSSが反映されているか確認してみましょう。

このカスタマイズはスマホ表示のみ適用なので、動作確認にGoogleChromeのデベロッパーツールを利用します。

  • STEP.1
    Chromeのデベロッパーツールを開く

    GoogleChromeで目次が表示されている記事を開いて、右クリック→検証。

    ショートカットでも可。

    Win:「F12」

    Mac:「command(⌘)」+「option(⌥)」+「I」で更新

  • STEP.2
    デバイスモードに切り替える

    表示されたデベロッパーツールの左上にあるボタンをクリックします。

    Chrome検証画面

    Chrome検証画面

  • STEP.3
    スマホサイズに変更

    画面上部の「Responsive」をクリックしてスマホサイズを選択します。

    Chrome検証画面

  • STEP.4
    反映されているか確認
    スマホ画面サイズになったら、カスタマイズが反映されているか確認します。

    Win:「Ctrl」+「F5」で更新

    Mac:「Command(⌘)」+「Shift」+「R」で更新

  • STEP.5
    反映していれば完了
    デザインが反映されていれば完了です。

    お疲れ様でした(^^)

    注意
    キャッシュ系のプラグインを利用している場合は、キャッシュを削除しておきましょう。

デベロッパーツールは色々なことが出来るので、使えるようになると便利ですよ😊

おまけ

パソコンから見たときに、第一階層だけ太字にするカスタマイズ。

JIN目次カスタマイズ

CSS
/*目次を太字にする*/
@media (min-width:768px){
	#toc_container .toc_list > li > a{
		font-weight:bold;
	}
}

りら

この記事が少しでもお役に立てたら嬉しいです

 

コメントを残す

メールアドレスが公開されることはありません。