LION MEDIA 目次のデザインをCSSでカスタマイズ

LION MEDIAのテーマを使い始めてからずっと、そのままの目次を使っていたんですが「目次デザインをカスタマイズしてみたい」

急に思いました。急にです。

WordPressのプラグインにある「Table of Contents Pplus」を使うか迷いましたがプラグインを増やさないと決めたので自分で目次カスタマイズをしてみる事にします。

1. LION MEDIAの目次はカスタマイズして欲しいと言っている
2. 目次はテーマファイルのcontent.cssを見ると分かる
3. LION MEDIAの目次カスタマイズをした変化
4. 目次カスタマイズをCSSでいろいろな表現に変えてみる
5. LION MEDIAの目次と見出しの統一感は必要になる
6. まとめ

LION MEDIAの目次はカスタマイズして欲しいと言っている

今回は目次のカスタマイズという事で目次の画像を記事内に多く使っているので、くれぐれもクリックしないで見るだけにしてください(というよりクリックできないです)

目次カスタマイズの前に先ず見てもらいたいのがLION MEDIAで生成される目次がどんな目次なのか。

その後にカスタマイズした目次をみてください。

上記画像のようにシンプルだけど少し寂しい気がします。

多分、この目次から「自分の好きなようにカスタマイズしてください」って事で製作者はシンプルな目次にしてると私は勝手に思っているので、目次の見出し番号の枠や外枠をサイトにあったカラーに変更するだけでも意外と目次の見た目は変わるかもしれない。

なのでLION MEDIAの目次をカスタマイズします。なぜか急にです急に…

目次はテーマファイルのcontent.cssを見ると分かる

LION MEDIAの目次のデザインを変えるためにはテーマ編集のどこ見ればいいのか分からなかったのでChromeの検証で見ると目次が「.content」となっているではありませんか。

なのでテーマファイルを見にいきます。

テーマファイルの中にある「CSS」に「content.css」を発見。

「content.css」で目次をすぐ発見出来たのでCSS知識が弱い私としてはラッキー。

outlineプロパティがあるし「__swich」⇐こんなのもあるし「開く/閉じる」があるしで…

てか「/*目次*/」ってコメントアウトありますやん…

という事で、その後の知識ないサイト運営者(⇐私)の努力の結果でLION MEDIA目次の外枠と見出しの番号あたりをカスタマイズすることがができました。

LION MEDIAの目次カスタマイズをした変化

いろいろな目次デザインにしてみたのですが最終的に外枠は無くしてしまって、見出し番号の枠は丸くすることに。

そして記事内の見出しのカラーにはブルーを使っているので目次の見出しでもブルーにしています。

いかがだろうか？LION MEDIAの最初の目次から比べると良くなったかなと思います。

目次の枠を取っただけ？なのかも。

いやいや、１個作ったCSSから目次枠ありバージョンにも変身させるのはこの後からでごわす。

もし、この目次で試してみたいという人がいれば何も気にせずパクってください。

この目次をパクってくれたことで私がもっとゴイスーな目次カスタマイズする励みになる事は間違いない。

目次カスタマイズをCSSでいろいろな表現に変えてみる

.content .outline {
    border-radius: 10%;
    border-color: #fff;
    /*外枠*/
}
.content .outline__switch::before {
    border-radius: 20%;
    border-color: #5f69dd;
    /*閉じ枠*/
}
.content .outline__number {
    border-radius: 50%;
    background-color: #5f69dd;
    /*見出背景色*/
    color: #fff;
    /*見出し数字*/
}
.content .outline__link {
    border-bottom: 1px dotted #838b8b;
    /*下線*/
}

目次をカスタマイズしたCSS記述は上記です。

記述の一番上の5行目「border-color:」が目次の外枠のカラーなので、外枠を表示しする場合は「#fff」のところに自分の好きなカラーをカラーコードなどなどで指定します。カラーを適用した場合は外枠が点線で角が丸い目次が表示されます。

次に「閉じ枠」の「border-radius:」7行目のところが20％にしてありますが、閉じるの枠をもっと丸くしたい場合は40%や50%に変更すれば丸く変更可能です。

逆に四角にしたければ0%

そして、閉じ枠のカラー変更するには「border-color:」8行目で変更。

あとは、目次の外枠と同じですが「border-redius」の%の数字を変更すれば丸くしたり四角にしたりが可能です。

ここで目次の枠を丸くしすぎた場合の残念な目次パターンも紹介しなければならないので読み進めてほしい。

目次を閉じてる時は、なんだか可愛らしく見えています。

ですが…

残念です…悲しくて仕方がない

実際にやっていただくことで、更にこの残念さが分かってもらえると思うので時間がある人は試してください。

この残念な目次のような枠を丸くし過ぎないように、くれぐれも適度な数値を指定してください。

次に目次の見出し番号の枠を丸ではなく四角にしたい場合「.content .outline__number」の「border-radius:」11行目、50％の数字部分を10％や20％に変更できます。

目次の番号の枠カラーを変更するには13行目「見出背景色」のところのカラーコードを変更で、目次の数字カラー変更は14行目の「見出数字の色」で変更です。

目次にある見出しのタイトルの下の線のカラーも変更できるので、18行目「dotted」の横のカラーコードを変更してください。

bottedの手前の「border-bottom」で1pxから数字を上げていけば下線は次第に太くなります。

目次の下線を太くした時の注意点は、マウスを文字に置くとブレが半端ないです。これは私には解決ができなかったので是非、CSSに詳しい人はチャレンジして欲しい。むしろ教えて欲しい！

更に、目次の中の下線が点線でイヤだという場合は「下線」に記述しているボーダースタイルの値を変更してあげることで変更できます。

ボーダースタイルの値を何個か載せておきます。

none ⇒下線が消えます

solid ⇒1本線

double ⇒2本線

dashed ⇒破線

破線を使ってborder-bottom3pxにした目次が上記画像の目次です。

目次の一番外枠も点線で細っそいのにしたCSSにしてあるので、破線にしたりsolidで一本線にしたい場合は下記の赤いCSSの部分をその下のCSSに変更します。

.content .outline{border-radius: 10% ; border-color:#fff;/*外枠*/ }

border: dashed 2px ;
border-color: #5f69dd;/*一番外枠*/

目次の外枠があると分かりやすく「目次コーナー」という感じになるので良いかもしれませんね。それに下の点線がなくても見た目が良くなりそうです。

最終的にもっとシンプルな目次にしたい願望があるのでLION MEDIAの目次をカスタマイズする下記のcssを書いてみました。

.content .outline {
    border-top: solid 3px;
    border-bottom: solid 3px;
    border-left: none;
    border-right: none;
    border-color: #838cef;
}
.content .outline__switch::before {
    border-color: #838cef;
    /*閉じるの枠*/
}
.content .outline__number {
    font-weight: bold;
    color: #838cef;
    /*見出数字の色*/
    background-color: #fff;
    /*見出背景色*/
}

そして目次の表示は目次の上下に線が入っただけのシンプルなLION MEDIAの目次にしてます。