THE THOR（ザ・トール）の標準機能で使える目次のデザインはシンプルなので、少し物足りないかもしれません。
出来れば自分好みの目次デザインで可愛くおしゃれにカスタマイズしたいですよね。
今回はTHE THORの目次のデザインをCSSでカスタマイズする方法を解説。この記事の目次には以下の特徴があります。
- PCとスマートフォンの両方に対応
- Googleのモバイルフレンドリーにも合格
CSSはサンプル付きなので良ければコピペしてお使いください。
CSSの変更は自己責任でお願いします。
※おかしい時は削除すれば大丈夫ですが、念のため。
この記事の目次
THE THORの目次をカスタマイズしたCSSを入れる方法
デザイン変更したCSSのサンプルを後ほど紹介しますが、コピペしたCSSをどうやって入れたらいいか不安な方も居るかと思います。
大きく分けると方法は2つあります。
- THE THORのカスタマイザーの追加CSSに貼り付ける
- 子テーマのCSSファイルに直接貼り付ける
ここでは簡単な一つ目の方法を紹介します。
THE THORのカスタマイザーにCSSを貼り付ける
CSSの追加はWordPressのダッシュボードの【外観】→【カスタマイズ】から行えます。
カスタマイズページ内の一番下に【追加CSS】という項目がありますので、次から紹介するCSSをここに貼り付けます。
コピペで使える目次のデザインサンプル
ここでのサンプルはコピペして自由にお使い下さい。フォントサイズやカラーはCSSに詳しくない人でもわかる様にコメントを付けています。
目次の横幅をいっぱいに広げる
.content .outline {
width: 100%; /* お好みで90%くらいでも。 */
}見出しの長さに応じて横に広がりますが、見出しが短い時は目次エリアがとても小さいです。そこで、 ベースとなる目次の横幅を記事のエリアいっぱいに広げておきます。
THE THORのデモサイトとカラーを揃える
THE THORには「デザイン着せ替え機能」がありますが、目次の見た目はどれも同じデザインです。
使っているデモサイトのカラーを取り入れる事で目次にも一体感を出せますよね。
① デモサイト01のカラー【#a83f3f】
② デモサイト02のカラー【#9cbfb0】
③ デモサイト03のカラー【#80aebf】
④ デモサイト04のカラー【#5ba5ad】
⑤ デモサイト05のカラー【#ac873d】
⑥ デモサイト06のカラー【#bf416f】
⑦ デモサイト07のカラー【#e3c792】
⑧ デモサイト08のカラー【#53c3f1】
⑨ デモサイト09のカラー【#fb7494】
もちろんこれ以外の好きな色に変えても大丈夫です。簡単なので解説しますね。
枠線のカラーを変更する
.content .outline {
border: 1px solid #a83f3f; /* 背景カラー変更箇所 */
}色の変更は、カラーコードを変更する事で可能になります。ハッシュ「#」で書かれた箇所です。SNSのハッシュタグでもお馴染みですね。
※サンプルはデモサイト01のカラーを使いました。
枠線だけでなく背景色も同じ要領で変更可能です。
カラーコードをもっと知りたい方はこちらの記事も参考にどうぞ。
THE THORの目次タイトルを中央揃えにする
.content .outline {
width: 100%;
margin:0 auto;
border: 1px solid #a83f3f; /* ボーダーカラー変更箇所 */
display:block;
position:relative;
}
.outline__title {
text-align: center;
display: block;
font-weight: bold;
}
.content .outline__switch {
position: absolute;
right: 3rem;
top: 2rem;
}大抵の場合、見出しや本文は左揃えかと思います。
「目次」のタイトルが中央にある事でコンテンツエリアと区別出来るので目次全体が見やすくなります。
ちなみに目次は閉じずに表示させる設定にしておくのがおすすめ。
理由は、ユーザーが記事の全体像を掴みやすくなるから。記事の導入文だけでなく、記事の後半の内容に興味を示すことも結構あります。
THE THORの目次タイトルにアイコンを付けて目立たせる
.content .outline {
width: 100%;
margin: 0 auto;
border: 1px solid #a83f3f; /* ボーダーカラー変更箇所 */
display: block;
position: relative;
}
.outline__title {
text-align: center;
border-bottom: 1px dotted #a83f3f; /* ボーダーカラー変更箇所 */
padding: 0 0 2rem 0;
display: block;
font-weight: bold;
}
.outline__title:before {
display: inline-block;
font-family: "icomoon"; /* アイコンフォント */
content: "\ea51";
margin-right: .5rem;
width: 3.5rem;
height: 3.5rem;
text-align: center;
border-radius: 50%;
padding-top: 0.25rem;
color: #a83f3f; /* フォントカラー変更箇所 */
}
.content .outline__switch {
position: absolute;
right: 3rem;
top: 2rem;
}THE THORでは「icomoon」というアイコンフォントを使っています。コードを指定すれば色んなアイコンを表示させることが出来ます。
また、画像ではありませんので、フォントサイズやカラーをCSSで変更する事も簡単です。
目次の余白を調整する
.content .outline {
width: 100%;
margin: 0 auto;
padding: 2rem 3rem;
border: 1px solid #a83f3f; /* ボーダーカラー変更箇所 */
display: block;
position: relative;
}
.outline__title {
text-align: center;
border-bottom: 1px dotted #a83f3f; /* ボーダーカラー変更箇所 */
padding: 0 0 2rem 0;
display: block;
font-weight: bold;
}
.outline__title:before {
display: inline-block;
font-family: "icomoon"; /* アイコンフォント */
content: "\ea51";
margin-right: .5rem;
width: 3.5rem;
height: 3.5rem;
text-align: center;
border-radius: 50%;
padding-top: 0.25rem;
color: #a83f3f; /* フォントカラー変更箇所 */
}
.content .outline__switch {
position: absolute;
right: 3rem;
top: 2rem;
}
.content .outline__switch+.outline__list {
margin-left: 0;
}
.content .outline__link:hover {
border: none;
color: #a83f3f; /* フォントカラー変更箇所 */
}デフォルトのままだと詰まった感じがして読みづらいです。枠線とテキストの間の余白を調整してスッキリさせました。
見出しの番号をかわいく装飾する
.content .outline {
width: 100%;
margin: 0 auto;
border: 1px solid #a83f3f; /* ボーダーカラー変更箇所 */
display: block;
position: relative;
}
.outline__title {
text-align: center;
border-bottom: 1px dotted #a83f3f; /* ボーダーカラー変更箇所 */
padding: 0 0 2rem 0;
display: block;
font-weight: bold;
}
.outline__title:before {
display: inline-block;
font-family: "icomoon"; /* アイコンフォント */
content: "\ea51";
margin-right: .5rem;
width: 3.5rem;
height: 3.5rem;
text-align: center;
border-radius: 50%;
padding-top: 0.25rem;
color: #a83f3f;
}
.content .outline__switch {
position: absolute;
right: 3rem;
top: 2rem;
}
.content .outline__number {
display: inline-block;
color: #fff;
background: #a83f3f; /* 背景カラー変更箇所 */
border-radius: 50%;
padding: 0px .65rem;
}
.content li ul li .outline__number {
background: transparent;
color: #191919; /* フォントカラー変更箇所 */
}
.content .outline__switch+.outline__list {
margin-left: 0;
}
.content .outline__link:hover {
border: none;
color: #a83f3f; /* フォントカラー変更箇所 */
}見出しの先頭に付いている番号に丸い背景を付けています。
目次のタイトルに背景色を付けて分かり易くする
.content .outline {
width: 100%;
margin: 0 auto;
padding: 0 0 2rem 0;
border: 1px solid #a83f3f; /* ボーダーカラー変更箇所 */
display: block;
position: relative;
}
.outline__title {
text-align: center;
background: #a83f3f; /* 背景カラー変更箇所 */
padding: 1rem 0;
display: block;
color: #fff; /* フォントカラー変更箇所 */
font-weight: bold;
}
.outline__title:before {
display:inline-block;
font-family: "icomoon"; /* アイコンフォント */
content: "\ea51";
margin-right: .5rem;
width: 3.5rem;
height: 3.5rem;
text-align: center;
border-radius: 50%;
padding-top: 0.25rem;
color: #fff; /* フォントカラー変更箇所 */
}
.content .outline__switch {
display: none;
}
.content .outline__number {
display: inline-block;
color: #fff;
background: #a83f3f; /* 背景カラー変更箇所 */
border-radius: 50%;
padding: 0px .65rem;
}
.content li ul li .outline__number {
background: transparent;
color: #191919; /* フォントカラー変更箇所 */
}
.content .outline__switch+.outline__list {
margin-left: 0;
}
.content .outline__link:hover {
border: none;
color: #a83f3f; /* フォントカラー変更箇所 */
}まとめ
THE THORの雰囲気を壊さない程度にカスタマイズしてみました。やり過ぎて記事が読み見づらくなってしまっては本末転倒です。
フォントサイズやカラーはお好みで変更してくださいね。ブログのメインカラーをベースに考えると合わせやすいです。
note
目次が表示されていればクリックで一気に移動出来ます。記事冒頭で離脱されるのは避けたいですよね。