シバくん！目次は作れるようになったんだけどなんだか質素
もっとオシャレになる方法ないの？
ペンさん！実はとっておきの方法があるんです
それってやっぱり時間かかる？
この記事は、目次が作成できることを前提で話を進めます。まだ目次を作れないと言う方は、こちらの記事をご覧ください
【追記】目次の文字消えてしまう現象が起こるとのコメントを受け、コードを修正致しました
目次を装飾する
目次の装飾は３つの手順で終わります。
- こちらが用意したコードをコピーする
- そのコードを自分好みに少し編集
- 指定した場所に貼り付ける
たったこれだけの手順をこなすだけで下記のような目次に変化を遂げさせることができます
順番を追って説明しましょう
①こちらが用意したコードをコピー
まずはこちらをコピーして下さい
<style type="text/css">
<style type="text/css">
/*目次のデザイン変更*/
.entry-content .table-of-contents {
position:relative;
margin-left: 0;
padding: 15px 10px 15px 35px; /* 枠内の余白(上右下左) */
font-size: 100%; /* 文字の大きさ */
font-weight:bold;
list-style-type:decimal; /*数字以外が良ければ変更 */
background:#fff;
border-top:40px solid #90caf3; /* 「この記事の目次」周りの色 */
border-left:2px solid #90caf3; /* 線の太さ */
border-right:2px solid #90caf3;
border-bottom:2px solid #90caf3;
line-height: 200%; /* 行間 */
border-radius: 3px; /* 角丸にしない場合は不要 */
color:#444; /* 数字（マーク色変更） */
}
/*「この記事の目次」の周囲変更*/
.entry-content .table-of-contents::before {
font-family: 'blogicon';
content: "039 目次";
display: block;
font-size: 130%;
font-weight: bold;
position: absolute;
top: -40px;/*上からの位置調整*/
left: 0px; /*左からの位置調整*/
color: #fff !important;
}
/*リンクの色変更と下線を消す*/
.entry-content .table-of-contents li a{
color:#444; /* 目次リスト部分のテキスト色 */
text-decoration:none; /* リンクの下線をつけたくない場合 */
}
</style>
こちらの記事を参考にしています
https://www.oyomiyo.com/entry/2018/09/13/170534_1
こちらをコピーしたら、一度メモ帳か何かにコピーします。
②コードを編集しよう
次に、コピーしたコードを編集していきます。
るいさんと同じ目次で大丈夫！と言う方は、こちらを飛ばして手順③に移動してください！
まずは目次の名前を変えよう
content: "039 目次";
こちらのコードです。
目次 と書いてあるところを消して、自分好みの「もくじ」や「Contents」にすると良いでしょう。
次に色の変更です
まずは、下記のサイトから、自分好みの色を見つけて、コードをメモっておきましょう。
#90caf3 ←このコードが色を表わすものです
コードをメモった方は、記事の目次周辺の色を修正していきましょう。
border-top:40px solid #90caf3; /* 目次周りの色変更 */
このコードです。
#90caf3 の部分を先程メモったお好みの色のコードに修正して下さい。
さいごに
border-left:2px solid #90caf3; /* 線の太さ */
border-right:2px solid #90caf3;
border-bottom:2px solid #90caf3;
こちらのコードの色の部分(#90caf3)も上記で選んだ色と合わせた方が、整って見えると思います。
cssコードの編集方法がわかってきたでしょうか？他にも変えたい場所がある方は、各コードの隣に、何のコードか書いてあるので、
元のコードを一度保存して、自分好みに修正を加えていくと良いでしょう。
③コードを貼り付けよう
ここまで来れば一瞬で終わります。
デザイン→カスタマイズ→記事→記事上
のところにコードを貼り付けます。
まずはデザインを選択します
次にカスタマイズ→記事の順でクリックします
最後に、記事上のところの枠に、上記でコピーしたコードを貼り付けます
これで変更を保存すれば、目次そのものが変わっているはずです。自分の目次をプレビューでみてみましょう。
スマホ版もコード修正までは同じです
上記で作ったコードをコピーして
デザイン→スマートフォン→記事→記事上にコードを貼り付けます
デザイン→スマートフォンまでは分かると思いますので、まずは、記事をクリックします
次に下記の手順で終了です
①スマートフォン用にHTMLを設定するをクリック
②記事上にコードを貼り付け
これで完全に終了となります。
不具合や疑問点等ございましたら、お問い合わせフォーム、またはるいブログツイッターアカウントまでご連絡ください
人の悩みの9割ってここに収束するんです
— るい (@luis734634035) 2019年6月22日
・健康、美容
・夢、将来
・人間関係
・金銭関連
悩みって複雑なようで、大半が同じようなことで悩んでます！自分だけじゃないって気持ちを持って、思いつめたりしないで下さい
悩みの先にはきっと幸せが待ってると信じて🤗
【追記】それでもスマホ版だけ表示されない方へ
デザイン→スマートフォン→詳細設定→レスポンシブデザインにチェックをして下さい
以上で目次設定は終了になります。
おつかれ様でした。