プログラミング

【JINカスタマイズ】サイドバーの目次を良い感じにする方法【WordPress】

目次を良い感じにするJIN

こんにちは!エンジニアブロガーのきりん(@kikiki_kirin)です。

このブログでも使用しているWordPressのテーマ、『JIN』。

デザインが可愛くて使いやすいので気に入っているんですが・・・サイドバーの目次だけ違和感がありました。

なので、カスタマイズしました!

ビフォーアフターがこちら。

before
目次をカスタマイズする前
after
目次をカスタマイズした後

どうでしょう?結構見やすくなってませんか?

今回はこの3分でできるカスタマイズ方法を紹介したいと思います!

では行きましょう。

カスタマイズする前にバックアップをおすすめ

カスタマイズをする前に、バックアップを取っておくことをお勧めします。

うまくいかなかった時に元に戻せなくなってしまいますので。

また、カスタマイズをするときは必ず子テーマのファイルを編集するようにしましょう。そうしないとテーマをアップデートすると関連のファイルが上書きされてしまいます。

子テーマはこちらからダウンロード可能。
>>JIN【子テーマ】のダウンロードページ

サイドバーの目次を見やすくするカスタマイズ手順

では手順です。たったの2STEPです!

そもそも目次が表示されてないけど?という方はこちらのマニュアルで導入可能です。
>>JINマニュアル

手順1:外観 > カスタマイズ > 追加CSSを開く

 

目次の手順1
目次の手順2

手順2:そこにコードを貼り付けましょう。


/*--------------------------------------
目次
--------------------------------------*/

.toc_widget_list li ul a::before{
padding-right: 5px;
color: silver;
content: ">";
}

.toc_widget_list li{
font-weight: bold;
padding-top:5px;
padding-bottom:5px;
}

.toc_widget_list li ul li a {
font-weight: normal;
color: #626262;
}

終わりです!簡単ですね。

「あれ・・・変更が反映されない」って方はキャッシュのせいかもしれませんので「Shift+Command+R」で更新してみてください。いわゆる「スーパリロード」ってやつですね。

もしこれでも変わらないっていう方がいましたら、Twitter(@kikiki_kirin) でおしらせください。できる限りお答えしますので。

 

まとめ:カスタマイズ案募集してます

以上、「サイドバーの目次を良い感じにする方法」でした。

今回取り上げた目次のほかにカスタマイズ要望がありましたら対応できますのでメッセージください。エンジニア3年やってるのである程度対応できるかと思います!

>>Twitterはこちら

では、良いブログライフを( ´▽`)ノ

ABOUT ME
Avatar
きりん
『好きなだけ漫画を語る。』そう思い立ち『きり漫』を立ち上げました。内容は大好きな漫画やアニメ・海外ドラマのこと。プログラミングもします。 私の発信する情報が皆さんのためになる事を願って記事を書いています。