THE THOR:目次のデザインをカスタマイズ – CSSサンプル有り

THE THOR:目次のデザインをカスタマイズ - CSSサンプル有り

THE THOR(ザ・トール)の標準機能で使える目次のデザインはシンプルなので、少し物足りないかもしれません。

出来れば自分好みの目次デザインで可愛くおしゃれにカスタマイズしたいですよね。

今回はTHE THORの目次のデザインをCSSでカスタマイズする方法を解説。この記事の目次には以下の特徴があります。

  • PCとスマートフォンの両方に対応
  • Googleのモバイルフレンドリーにも合格

CSSはサンプル付きなので良ければコピペしてお使いください。

CSSの変更は自己責任でお願いします。
※おかしい時は削除すれば大丈夫ですが、念のため。

THE THORの目次をカスタマイズしたCSSを入れる方法

デザイン変更したCSSのサンプルを後ほど紹介しますが、コピペしたCSSをどうやって入れたらいいか不安な方も居るかと思います。

大きく分けると方法は2つあります。

  1. THE THORのカスタマイザーの追加CSSに貼り付ける
  2. 子テーマのCSSファイルに直接貼り付ける

ここでは簡単な一つ目の方法を紹介します。

THE THORのカスタマイザーにCSSを貼り付ける

画像:THE THORで目次のデザインを変更するCSSの記述場所

CSSの追加はWordPressのダッシュボードの【外観】→【カスタマイズ】から行えます。

カスタマイズページ内の一番下に【追加CSS】という項目がありますので、次から紹介するCSSをここに貼り付けます。

コピペで使える目次のデザインサンプル

画像:THE THORで目次のデザインサンプル

ここでのサンプルはコピペして自由にお使い下さい。フォントサイズやカラーはCSSに詳しくない人でもわかる様にコメントを付けています。

目次の横幅をいっぱいに広げる

画像:THE THORで目次エリアを広げて読みやすくする
.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】

もちろんこれ以外の好きな色に変えても大丈夫です。簡単なので解説しますね。

枠線のカラーを変更する

画像:THE THORで目次の枠線をテーマカラーに合わせる
枠線のカラーを変更する
.content .outline {
  border: 1px solid #a83f3f; /* 背景カラー変更箇所 */
}

色の変更は、カラーコードを変更する事で可能になります。ハッシュ「#」で書かれた箇所です。SNSのハッシュタグでもお馴染みですね。

※サンプルはデモサイト01のカラーを使いました。

枠線だけでなく背景色も同じ要領で変更可能です。

カラーコードをもっと知りたい方はこちらの記事も参考にどうぞ。
画像:配色に迷わない!作って試せる配色パターン参考サイトを紹介

THE THORの目次タイトルを中央揃えにする

画像: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の目次タイトルにアイコンを付けて目立たせる

画像: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で変更する事も簡単です。

目次の余白を調整する

画像:THE THORで目次の余白を広げてゆったりとした印象に。
ボーダーと広い余白で緩やかな印象に
.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; /* フォントカラー変更箇所 */
}

デフォルトのままだと詰まった感じがして読みづらいです。枠線とテキストの間の余白を調整してスッキリさせました。

見出しの番号をかわいく装飾する

画像: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;
}
.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で目次のタイトルに背景色を入れて目立たせる
目次タイトルに背景色を付ける
.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の雰囲気を壊さない程度にカスタマイズしてみました。やり過ぎて記事が読み見づらくなってしまっては本末転倒です。

フォントサイズやカラーはお好みで変更してくださいね。ブログのメインカラーをベースに考えると合わせやすいです。

画像:配色に迷わない!作って試せる配色パターン参考サイトを紹介
画像:WordPressテーマの「ザ・トール」とプラグインの相性を解説
画像:THE THORでワードプレスのプロフィール写真・画像設定