(確認事項)このMASAa.netには【広告】【PR記事】が掲載されています。MASAa.netご利用の方はプライバシーポリシーをご確認下さい。
WordPress関連Cocoon

【Cocoon】目次をカスタマイズする

アイキャッチ画像 Cocoon
この記事は約5分で読めます。

【広告】

※ 本ページには【広告】が含まれています

目次

WordPressテーマ Cocoonで使われている「目次」のカスタマイズについてまとめてみました。

テーマCocoonの目次

これまでWordPressテーマ Simplicity2で構築されているMASAa.blog(https://wp.masaa.me/)の流れで、MASAa.netでも目次生成プラグインとして「Table of Contents Plus」を使っていました。

WordPressテーマ Cocoonでは目次機能が備わっているので、今回MASAa.netの目次を「Table of Contents Plus」プラグインからWordPressテーマ Cocoonの目次機能に切り換えることにしました。

WordPressテーマ Cocoonで使われている「目次」は次の様になっています。

【WordPress】目次をカスタマイズする

非常にシンプルな目次です。

これまで「Table of Contents Plus」プラグインで目次をカスタマイズして使ってきたため、以前の目次と比べると見た目の差がかなり有ります。

目次のカスタマイズ

シンプルさを残しつつも、目次をサイトに有ったデザインに変更するカスタマイズを行います。

カスタマイズ内容

「目次」のカスタマイズは、下記の通りです。

このカスタマイズ内容を「スタイルシート(style.css)」に追記します。

/*****************************
** ■目次カスタマイズ
*****************************/
.toc {
  border: 2px solid #fe619a; /*全体の枠線の色*/
  font-size: 14px; /*フォントサイズ*/
  line-height: 1.5; /*行の高さ指定*/
  padding: 0;
  margin-top: 3em; /*目次上の空間*/
  margin-bottom: 1em; /*目次下の空間*/
  min-width:65%; /*目次横幅*/
  border-radius: 6px;/*角丸コーナー*/
  background: #fff9fc; /*背景カラー*/
  box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.3); /*シャドー(影)*/
}
@media screen and (max-width: 1030px){
  .toc {
    min-width:100%; /*モバイル時の目次横幅*/
  }
}
.toc-title {
  background: #fe619a; /*目次タイトル背景カラー*/
  color: #fff; /*目次タイトルフォントカラー*/
  font-size: 16px; /*目次タイトルフォントサイズ*/
  text-align: center; /*目次タイトル中央寄せ*/
  padding: 6px 16px;
  font-weight: bold; /*文字強調*/
  font-style: oblique; /*斜体フォント*/
}
.toc-title::before {
  font-family: FontAwesome;
  content: '\f0f6'; /*目次タイトルのアイコン指定*/
  margin-right: 0.3em;
  font-weight: 500; /*アイコンの太さ*/
  font-style: normal; /*通常フォント*/
}
.toc-content {
  padding: 6px;
}
.toc-content li a:hover {
  text-decoration:none; /*選択時装飾無し*/
  background: #ffd3ee; /*選択時の背景カラー*/
  transition: all 0.8s ease; /*ふわっと変化するアニメーション*/
}
.toc ul.toc-list>li, .toc ol.toc-list>li {
  margin-top: 0.4em; /*h2の上側の空間*/
}
.toc ul.toc-list>li>a, .toc ol.toc-list>li>a {
  border-bottom: 1px solid #fe619a; /*h2のアンダーラインの太さとカラー*/
  font-weight: bold;
}
.toc ul li a, .toc ol li a {
  display: block;
  border-bottom: 1px dotted #fe619a; /*h3~h6のアンダーラインの太さとカラー*/
  margin-left: -20px; /*アンダーライン調整*/
  padding-left: 20px; /*アンダーライン調整*/
}

カスタマイズ後の目次

今回のカスタマイズによって、WordPressテーマ Cocoonで使われている「目次」は、次のようになりました。

【WordPress】目次をカスタマイズする

今回のカスタマイズによって、目次がサイト全体とマッチするようになり違和感が無くなりました。

最後に

今回「Table of Contents Plus」プラグインの目次からWordPressテーマ Cocoonの目次機能に切り換えた訳ですが、プラグインは管理やサイトスピードの面から一つでも少なくしたいので、プラグインを一つ無くすことが出来たのは良かったでしょう。

今回の目次は、シンプルなデザインなのでどのサイトでも合うと思います。

MASAa.netをご覧頂きありがとうございます!
もしMASAa.netの記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

シェアする
※ 記事内には【広告】が含まれています

コメント

  1. ゆう より:

    はじめまして!
    目次のカスタマイズとても良くて
    使用させていただきました。
    数字と文字が2行に分かれて表示されてしまうのですが、その場合にはどちらを修正すれば宜しいでしょうか?
    初歩的な質問で大変申し訳ございませんが教えていただけると嬉しいです。

    • 初めまして、コメントありがとうございます!
      ご質問頂いた件について実際にどうなっているか分からないのであくまでも憶測ですが、
      要素の表示形式がブロックボックス(block)で表示されているため、横並びを実現するためのCSSプロパティ(float、display)で指定する必要があると思われます。
      float: right;
      display: inline;
      display:inline-block;

      新しく目次の再カスタマイズについてのエントリー記事もアップしていますので、こちらもご覧頂ければ幸いです。
      https://masaa.net/2020/01/29/post-200117-1/

【広告】