【注意】このMASAa.netはWordPressテーマ Cocoonを使用しており、THE THORはZMASAa.blogで使用中です。クリックするとZMASAa.blogを開きます。
WordPressTHE THOR

【Cocoon】目次のカスタマイズ③

アイキャッチ画像 Cocoon
この記事は約8分で読めます。
スポンサーリンク

WordPressテーマ Cocoon

このMASAa.netは、WordPressテーマ Cocoonを使って構築しています。

MASAa.net | WordPressのカスタマイズとPCのある生活を楽しむための情報発信サイト
このMASAa.netは、WordPressテーマのカスタマイズ、自作PC、ソフトウェア、ハードウェア、Windows、パソコンなどのあらゆるPC関連に関する情報を掲載しています。

今回は、WordPressテーマ Cocoonでの「目次」のカスタマイズ③についてまとめてみました。

WordPressテーマ Cocoon 目次

WordPressテーマ Cocoonの「目次」については、これまで2度カスタマイズを行ってきました。

【Cocoon】目次の再カスタマイズ
WordPressテーマ Cocoonの「目次」については以前にもカスタマイズを行ってきました。今回「目次」に対して、PC以外の多くの端末(スマートフォン、タブレット)でも正常に表示される「目次」となるように改めてデザインを変更してみました。
【Cocoon】目次をカスタマイズする
目次を「Table of Contents Plus」プラグインからWordPressテーマ Cocoonの目次機能に切り換えることにしました。それに伴ってシンプルなデザインの目次をサイトにマッチするようにカスタマイズしてみました。

これまでのカスタマイズによって現在のWordPressテーマ Cocoonの「目次」のスタイルは次の様になっています。

【Cocoon】目次のカスタマイズ③

数字からアイコン表示化などによって見やすい「目次」になっているのですが、更に見やすい「目次」を目指してカスタマイズ③としてまとめてみました。

目次カスタマイズ③

WordPressテーマ Cocoonの「目次」カスタマイズ③を行います。

カスタマイズ内容

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

「スタイルシート(style.css)」を開き、次のカスタマイズ内容を以前カスタマイズを行った箇所に上書きします。

/*****************************
** ■目次カスタマイズ
*****************************/
.toc {
  display: block;
  border: 2px solid #ff75a7!important; /*全体の枠線の色*/
  font-size: 14px; /*フォントサイズ*/
  line-height: 1.7; /*行の高さ指定*/
  padding: 0.5em 1.5em 1.2em 1.5em;
  margin-top: 4em; /*目次上マージン*/
  margin-bottom: 4em; /*目次下マージン*/
  margin-right: 8%; /*目次右マージン*/
  margin-left: 8%; /*目次左マージン*/
  border-radius: 10px;/*角丸コーナー*/
  background:linear-gradient(160deg, #ffddee, #fff)!important; /*グラデーション化*/
  box-shadow: 6px 6px 6px 0 rgba(0,0,0,0.3)!important; /*シャドー(影)*/
}
@media screen and (max-width: 1020px){
  .toc {
      padding: 0.4em 1em 1em 1em;
  }
}
.toc a { /*目次メニュー*/
  display: block;
  position: relative;
  padding: 3px 6px 0 6px;
  border-bottom: 1px dotted #fe619a; /*h2のアンダーラインの太さとカラー*/
}
.toc-title { /*目次タイトル*/
  background:linear-gradient(160deg, #ffddee, #fe619a, #fe619a, #ffddee); /*目次タイトル背景カラー*/
  border-radius: 18px;/*角丸コーナー*/
  margin-top: 1.2em; /*目次タイトル上マージン*/
  margin-bottom: -0.3em; /*目次タイトル下マージン*/
  color: #fff; /*目次タイトルフォントカラー*/
  font-size: 16px; /*目次タイトルフォントサイズ*/
  text-align: center; /*目次タイトル中央寄せ*/
  padding: 1px 0;
  font-weight: bold; /*文字強調*/
  font-style: oblique; /*斜体フォント*/
  border: 2px solid #fe619a; /*全体の枠線の色*/
}
.toc-title:hover { /*文字タイトルホバー時*/
  background: #ffddee; /*目次タイトル背景カラー*/
  color: #f32469; /*目次タイトルフォントカラー*/
}
.toc-title::before { /*目次タイトルアイコン設定*/
  font-family: "Font Awesome 5 Free";
  content: '\f0cb'; /*目次タイトルのアイコン指定*/
  margin-right: 0.3em;
  font-size: 18px; /*フォントサイズ*/
  font-weight: 900; /*アイコンの太さ*/
  font-style: normal; /*通常フォント*/
}
.toc-content li a:hover {
  text-decoration:none; /*選択時装飾無し*/
  color:#ff005d; /*フォントカラー*/
}
.toc .toc-list ul, .toc .toc-list ol {
  padding-left: 1.2em;
  margin: 0;
}
.toc ul.toc-list>li>a, .toc ol.toc-list>li>a {
  display: block;
  border-bottom: 1px dotted #fe619a; /*h2のアンダーラインの太さとカラー*/
  font-size: 15px; /*フォントサイズ*/
  font-weight: bold;
  padding-top: 6px;
  padding-bottom: 1px;
  margin-left: -20px; /*アンダーライン調整*/
  padding-left: 20px; /*アンダーライン調整*/
  margin-right: -15px; /*アンダーライン調整*/
  padding-right: 15px; /*アンダーライン調整*/
}
.article .toc-list li {
  font-size: 15px; /*フォントサイズ*/
  font-weight: 700; /*文字強調*/
}
.article .toc-list > li li {
  font-size: 14px; /*フォントサイズ*/
/*  list-style: none; /*H3以下目次ナンバー非表示*/
  font-weight: 700; /*文字強調*/
}
.toc-content li::marker {
  color:#000;
}
.toc-content li:hover::marker {
  color:#ff005d;
  font-style: oblique;
}

続いて、同じく「スタイルシート(style.css)」に次のカスタマイズ内容を追記します。

/*****************************
** ■目次ホバーエフェクト化のカスタマイズ
*****************************/
.toc-content li a { /*ホバーエフェクト化*/
  position: relative;
}
.toc-content li a::after {
  position: absolute;
  color: rgba(255,255,255,1);
  bottom: -3px;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  background: #fe619a;
  transform: scaleX(0);
  transform-origin: left top;
  transition: transform 0.3s;
  border-radius: 2px;/*角丸コーナー*/
}
.toc-content li a:hover::after {
  transform: scaleX(1);
  transform-origin: left top;
  transition: transform 0.3s;
}

カスタマイズ後の目次

今回のカスタマイズ③によって、「目次」のスタイルは次の様になりました。

【Cocoon】目次のカスタマイズ③

また、「目次」をホバーしている時のスタイルは次の様になりました。

【Cocoon】目次のカスタマイズ③

【Cocoon】目次のカスタマイズ③

【Cocoon】目次のカスタマイズ③

【Cocoon】目次のカスタマイズ③

【Cocoon】目次のカスタマイズ③

今回の「目次」カスタマイズ③では、主に下記について行いました。

  1. 背景色及びタイトルのグラデーション化
  2. ホバーエフェクト化
  3. アイコン表示廃止
  4. 各マージン調整
  5. 横幅サイズの固定化

なお、今回のカスタマイズを実施する上でWordPressテーマ Cocoon側の設定で、目次ナンバーの表示を「数字(デフォルト)」にしておく必要があります。

最後に

今回の「目次」カスタマイズ③によって、更に見やすくて使いやすい「目次」になったと思います。

特に下位の目次を指していても上位の目次が何であるかが分かりやすくなりました。

今後も気になる事があればカスタマイズを行い更に使いやすくて見やすいブログサイトを構築していきたいと思います。

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

……… THE THOR(ザ・トール)購入について ………
下記バナーからTHE THOR(ザ・トール)をご購入の方には、
当掲載のカスタマイズについて優先的にサポートさせて頂きます。

下記バナー経由でTHE THOR(ザ・トール)を購入した日付と時刻
を合わせてお問い合わせフォームからご連絡下さい。



気軽にプレイできるPC向けウェブブラウザ対応ゲーム!
邪神ちゃんドロップキック
精霊幻想記アナザーテイル
空島クロニクル
ラストラグナロク
ビビッドアーミー
城姫クエスト 極
下記バナーからスマホゲームのインストールお願いします!
MU:アークエンジェル
Cave Shooter
イース6オンライン
ザ・アンツ
リネージュ2M
クッキーランキングダム
ドラゴンとガールズ交響曲
魔剣伝説
パズにゃん
ブレイドエクスロード

おすすめWordPressテーマ!
WordPressテーマ WING(AFFINGER6)
WordPressテーマ THE THOR(ザ・トール)
WordPressテーマ Diver

MASAa.net

コメント