こんにちは！エンジニアブロガーのきりん(@kikiki_kirin)です。
このブログでも使用しているWordPressのテーマ、『JIN』。
デザインが可愛くて使いやすいので気に入っているんですが・・・サイドバーの目次だけ違和感がありました。
なので、カスタマイズしました！
ビフォーアフターがこちら。
[2col-box]
[2-left bg_color=”#f7f7f7″ title=”before” style=”1″]
[/2-left]
[2-right bg_color=”#f7f7f7″ title=”after” style=”1″]
[/2-right]
[/2col-box]
どうでしょう？結構見やすくなってませんか？
今回はこの3分でできるカスタマイズ方法を紹介したいと思います！
では行きましょう。
目次
カスタマイズする前にバックアップをおすすめ
カスタマイズをする前に、バックアップを取っておくことをお勧めします。
うまくいかなかった時に元に戻せなくなってしまいますので。
また、カスタマイズをするときは必ず子テーマのファイルを編集するようにしましょう。そうしないとテーマをアップデートすると関連のファイルが上書きされてしまいます。
子テーマはこちらからダウンロード可能。
>>JIN【子テーマ】のダウンロードページ
サイドバーの目次を見やすくするカスタマイズ手順
では手順です。たったの２STEPです！
そもそも目次が表示されてないけど？という方はこちらのマニュアルで導入可能です。
＞＞JINマニュアル
手順１：外観 ＞ カスタマイズ ＞ 追加CSSを開く
[jin-img shadow=”on”]
[/jin-img]
[jin-img shadow=”on”]
[/jin-img]
手順２：そこにコードを貼り付けましょう。
/*--------------------------------------
目次
--------------------------------------*/
.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;
}
[jin-img shadow=”on”]
[/jin-img]
終わりです！簡単ですね。
「あれ・・・変更が反映されない」って方はキャッシュのせいかもしれませんので「Shift+Command+R」で更新してみてください。いわゆる「スーパリロード」ってやつですね。
もしこれでも変わらないっていう方がいましたら、Twitter(@kikiki_kirin) でおしらせください。できる限りお答えしますので。
まとめ：カスタマイズ案募集してます
以上、「サイドバーの目次を良い感じにする方法」でした。
今回取り上げた目次のほかにカスタマイズ要望がありましたら対応できますのでメッセージください。エンジニア３年やってるのである程度対応できるかと思います！
では、良いブログライフを( ´▽｀)ノ