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

【Cocoon】ウィジェット[C]目次をサイドバーに対応させる

アイキャッチ画像 Cocoon
この記事は約9分で読めます。
※ 本ページ内には【広告】が含まれています

WordPressテーマ Cocoon

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

MASAa.net|製品レビューとPCやWordPressに関する情報発信サイト
masaa.net

今回は、WordPressテーマ Cocoonで「ウィジェット[C]目次をサイドバー／サイドバーエリア追従に対応」のカスタマイズについてまとめてみました。

ウィジェット[C]目次

これまで「ウィジェット[C]目次」に関するカスタマイズについては、過去3回行ってきました。

【Cocoon】目次のカスタマイズ③
WordPressテーマ Cocoonでの「目次」カスタマイズ③についてまとめてみました。今回のカスタマイズは「目次」に対して主に背景色のグラーデション化、ホバーエフェクト化、アイコン表示廃止、横幅サイズ固定化、各マージン調整を行いました。
masaa.net
2020.12.03
【Cocoon】目次の再カスタマイズ
WordPressテーマ Cocoonの「目次」については以前にもカスタマイズを行ってきました。今回「目次」に対して、PC以外の多くの端末（スマートフォン、タブレット）でも正常に表示される「目次」となるように改めてデザインを変更してみました。
masaa.net
2020.01.29
【Cocoon】目次をカスタマイズする
目次を「Table of Contents Plus」プラグインからWordPressテーマ Cocoonの目次機能に切り換えることにしました。それに伴ってシンプルなデザインの目次をサイトにマッチするようにカスタマイズしてみました。
masaa.net
2019.01.03

これらは「ウィジェット[C]目次」をメインエリアに対応したカスタマイズでした。

そのため「ウィジェット[C]目次」をサイドバー／サイドバーエリア追従に設定すると、次の様な若干違和感のあるスタイルになってしまいます。

【Cocoon】ウィジェット[C]目次をサイドバーに対応させる

そこで「ウィジェット[C]目次」をサイドバー／サイドバーエリア追従に対応したカスタマイズを行いたいと思います。

ウィジェット[C]目次をサイドバー／サイドバーエリア追従対応のカスタマイズ

WordPressテーマ Cocoonでの「ウィジェット[C]目次をサイドバー／サイドバーエリア追従対応」カスタマイズを行います。

カスタマイズ内容

「ウィジェット[C]目次をサイドバー／サイドバーエリア追従対応」カスタマイズ内容は、下記の通りです。

今回「ウィジェット[C]目次」をメインカラムに対応したカスタマイズを行った上で、そのカスタマイズの上書きになります。

そのため事前にこれまでの「目次のカスタマイズ」を行って下さい。

「スタイルシート(style.css)」を開き、下記のカスタマイズ内容をこれまで行ったカスタマイズ（■目次カスタマイズ／■目次ホバーエフェクト化のカスタマイズ）に上書きして下さい。

/*****************************
** ■目次カスタマイズ
*****************************/
.toc {
  display: block;
  border: 2px solid #1469FF!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, #BAD7F0, #fff)!important; /*グラデーション化*/
/*  box-shadow: 6px 6px 6px 0 rgba(0,0,0,0.3)!important; /*シャドー（影）*/
  -webkit-box-shadow: 0 10px 8px -6px #8d8c8c; /*シャドー（影）*/
  -moz-box-shadow: 0 10px 8px -6px #8d8c8c;
  box-shadow: 0 10px 8px -6px #8d8c8c;
}
@media screen and (max-width: 1030px){ /*iPad横表示対応*/
  .toc {
      padding: 0.4em 1em 1em 1em;
  }
}
.toc a { /*目次メニュー*/
  display: block;
  position: relative;
  padding: 3px 6px 0 6px;
  border-bottom: 1px dotted #1469FF; /*h2のアンダーラインの太さとカラー*/
}
.toc-title { /*目次タイトル*/
  background:linear-gradient(160deg, #BAD7F0, #1469FF, #1469FF, #BAD7F0); /*目次タイトル背景カラー*/
  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 #1469FF; /*全体の枠線の色*/
}
.toc-title:hover { /*文字タイトルホバー時*/
  background: #BAD7F0; /*目次タイトル背景カラー*/
  color: #0000EA; /*目次タイトルフォントカラー*/
}
.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:#0000FF; /*フォントカラー*/
}
.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 #1469FF; /*h2のアンダーラインの太さとカラー*/
  font-size: 15px; /*フォントサイズ*/
  font-weight: bold;
  padding-top: 4px;
  padding-bottom: 0;
  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:#0000FF;
  font-style: oblique;
}

#sidebar-menu-content .toc-content,
#sidebar .toc-content { /*サイドバー設置時*/
  padding-top: 5px;
  padding-bottom: 15px;
  padding-right: 8px;
  word-break: break-all; /*表示範囲に合わせて改行*/
}
#sidebar-menu-content .toc ul.toc-list>li>a,
#sidebar-menu-content .toc ol.toc-list>li>a,
#sidebar .toc ul.toc-list>li>a,
#sidebar .toc ol.toc-list>li>a {
  font-size: 13px; /*フォントサイズ*/
  font-weight: 700; /*アイコンの太さ*/
}
#sidebar-menu-content .toc-list > li li,
#sidebar .toc-list > li li {
  font-size: 13px; /*フォントサイズ*/
  font-weight: 700; /*アイコンの太さ*/
}

/*****************************
** ■目次ホバーエフェクト化のカスタマイズ
*****************************/
.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: #1469FF;
  transform: scaleX(0);
  transform-origin: left top;
  transition: transform 0.5s;
  border-radius: 2px;/*角丸コーナー*/
}
.toc-content li a:hover::after {
  transform: scaleX(1);
  transform-origin: left top;
  transition: transform 0.5s;
}

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

/************************************
** ■サイドバースクロール追従 目次マージン調整
************************************/
.sidebar-scroll .toc {
  margin-top: 1em;
  margin-right: 0;
  margin-left: 0; 
}

カスタマイズ後のサイドバー／サイドバーエリア追従のウィジェット[C]目次

今回のカスタマイズによってサイドバー／サイドバーエリア追従の「ウィジェット[C]目次」のスタイルは、次の様になりました。

【Cocoon】ウィジェット[C]目次をサイドバーに対応させる

サイドバー／サイドバーエリア追従の「ウィジェット[C]目次」のフォント調整、間隔調整を行いました。

最後に

今回のカスタマイズによって、サイドバー／サイドバーエリア追従に目次を表示出来るようになりました。

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

シェアする
※ 本ページ内には【広告】が含まれています
管理人@masaa.net

コメント