LION MEDIAの目次を自分好みにカスタマイズ！【WordPress】

多機能で非常に使い勝手が良いLION MEDIAですが、デフォルトの状態でめちゃめちゃ便利なので、カスタマイズしなくてもいいかと思いがちなってしまいます。

どちらかというと、他の人と同じというのがあまりすきではないので、他の人とは少しでも違うものにしたいと思ってしまいます。
そんな中、最初に気になったのが、目次の機能！

プラグインを使わなくても搭載されている機能で、便利なのですが、シンプルすぎるデザインな感じがします。
今回はその目次を少し装飾してみましょう。

コピペで簡単にできるので、お気軽にお試しください♪

完成後はこんな感じになります。

上の目次の画像と下の目次が連続して分かりにくいですが、上の目次は画像です(笑)

子テーマを使用しましょう
いざカスタマイズ
1. コード
2. 解説
まとめ

新たにレンタルサーバーを選ぶならこれ！

エックスサーバー

国内シェアNo.1の高速サーバーなのでストレスフリー！
自動バックアップ機能に標準対応で安心運用可能！

気になるポイント！	キャンペーン中に契約すれば.com等のドメインを永久無料で使えます！

WordPressでサイトを運用すると重くなりがちですが、使用しているレンタルサーバーのスペックがあまり良くないと、どんなにWordPress側で高速化をしていても、なかなか高速化の成果が反映されません。サイトの表示スピードが上がらない原因がレンタルサーバーの場合は、エックスサーバーにしてみると改善するかもしれません！またサーバー等のバックアップを自動で行っているので、安心してサイトの運用をすることができます！またマルチドメイン、メールアドレスを無制限で使えるというのもうれしいですね。

公式サイトはこちら

子テーマを使用しましょう

style.cssを編集するので、子テーマを使用しましょう。
子テーマの使い方がわからないという方はこちらの記事をご参考ください。

WordPressテーマ「LION MEDIA」の導入方法と子テーマの使い方！【ダウンロード】

多機能で無料で使えるLION MEDIAHTMLやCSSの知識がなくても十分に使えるので、ブログ初心者にとっては神様的なテーマだと思います。使うのは簡単ですが、超初心者にとっては、導入すること自体がハードルが高いかもしれません。そんなLIO...

いざカスタマイズ

子テーマの準備が出来たら、カスタマイズをしていきましょう。

ちなみに何もしていないデフォルトの状態はこのようになっています。

無色でシンプルな感じですね。
これがいいという人もいると思いますが、自分のテーマカラーに合わせたいという人もいると思います。

そんな方は次のコードをコピペしてください。

コード

以下のコードをstyle.cssにコピペしてください！

/*--目次カスタマイズ--*/
.content .outline{
	border-color:#ce4040;/*一番外の枠*/
}
.content .outline__switch::before{
	border-color:#ce4040;/*閉じるの枠*/
}
.content .outline__number{
	background-color:#ce4040;/*見出背景色*/
	color:#fff;/*見出数字の色*/

}
.content .outline__link{
		border-bottom:1px solid #ce4040;/*見出し下線色*/
}
/*--ここまで--*/