最終更新日：2020.08.25
本を読む・買う時、説明書を読む時、イベントに参加する時、目次が無いといまいち概要がつかみにくいと思います。
この本がどんな内容なのか、自分の求めているものなのかパット見でわかる目次はタイトルと合わせて大切な要素です。
ブログについても記事の入り口でこの記事はどんな事が書かれているか見ている人に解りやすくなるので有るといいですよね。
私も使っているLION MEDIA(ライオンメディア)テーマの目次がさっぱりしすぎているのでCSSを調整してデザインを変更してみました。
完成図
ちょっぴりアニメーションも入れて楽しいメニューにしました。
やり方
CSSを子テーマに追加していきます。
子テーマはメインテンプレートがアップデートされた時、折角書いたコードが消えるリスクを防いだりテンプレートベースを触るリスクを抑えたりしてくれます！ありがや
【外観】→【テーマ】で「LION MEDIA Child」を有効にしてください。
■FTPで開いて追加する
「/wp-content/themes/lionmedia-child」内style.css
「/wp-content/themes/lionmedia-child」内style.css
■【外観】→【テーマの編集】で追加する
style.css
style.cssファイルの一番下にはりつけてください。
コピー
/*/////////////////////////////////////////////////
//目次装飾
/////////////////////////////////////////////////*/
.content .outline {
width: 100%;
border: 0px dotted #D8D8D8;
border-radius: 5px;
padding: 20px;
margin-top: 40px;
display: inline-block;
border-bottom: 0;
background: linear-gradient(-45deg, rgba(0, 93, 177, .8), rgba(219, 201, 0, .8)),
url(images/bg-cherrybrossam.jpg);
background-size: cover;
background: linear-gradient(-45deg, rgba(238, 119, 82, .8), rgba(231, 60, 126, .8), rgba(35, 166, 213, .8), rgba(35, 213, 171, .8));
background-size: 400% 400%;
-webkit-animation: Gradient 30s ease infinite;
-moz-animation: Gradient 30s ease infinite;
animation: Gradient 30s ease infinite;
}
.content .outline .outline__title {
padding: 0px;
color: #fff;
font-weight: bold;
display: block;
float: left;
}
.content .outline__switch {
display: block;
float: right;
}
.content .outline__switch::before {
content: "開く";
cursor: pointer;
border: solid 1px #D8D8D8;
background: #fff;
padding: 5px;
font-size: 1.2rem;
margin-left: 5px;
}
.content .outline .outline__list {
display: block;
clear: both;
}
.content .outline .outline__list:first-child {
margin-top: 10px;
}
.content .outline .outline__list li{
padding: 10px 0 0 25px;
width: 100%;
}
.content .outline .outline__link {
background: #fff;
width: 100%;
border: 0px dotted #D8D8D8;
padding-top: 10px;
border-radius: 5px;
}
.content .outline .outline__link:hover {
box-shadow: 0 2px 4px rgba(0,0,0,0.3);;
transform: translate(-10px,0px);
transition: box-shadow 0.1s ease,
transform 0.1s ease,
z-index 0s 0s ease;
}
.content .outline .outline__number {
margin: 0 5px 5px 0;
background: #000;
color: #fff;
padding: 5px 10px;
font-size: 80%;
border-radius: 5px;
color: #fff;
min-width: 10%;
text-align: center;
z-index: 1;
}
完成！！
まとめ
配色やアニメーションを変えてみて楽しいオリジナルの目次にしてくださいね♪
LION MEDIA(ライオンメディア)テーマカスタマイズ
