Twitterはこちら仕事依頼はこちら

【Cocoon】サイドバー目次追尾カスタマイズ!スクロール付き

Cocoonサイドバー目次追尾カスタマイズ

リクエストがあったのでCocoonのサイドバー目次追尾のカスタマイズを紹介します。

サンプルは当ブログです!

サンプル画像も貼っておきます。見出しが多いときはスクロールができるように、見出しが少ないときは見出しの数分の高さになります。

Cocoonサイドバー目次追尾
見出しが多いときはスクロールあり
Cocoonサイドバー目次追尾
見出しが少ないときはスクロールなし

見出しが多いときに画面オーバーしてしまうってことがなくなります。

2パターン、カスタマイズ用意しました。使用してる目次のカスタマイズを行ってください。

手順は以下の通りです。

手順

簡単です!

STEP1:CSSコピペ

こちらはCocoonの目次機能を使った手順です。プラグインTOC+を使ってる方はこちらから。

CSSをコピペしていきます。

メモ

「外観→テーマエディター→style.css(子テーマ)」。もしくは、「外観→カスタマイズ→追加CSS」に貼り付けてください。

CSSが反映されない場合はスーパーリロード(Ctrl+F5orShift+F5)してください。

Copy
/************************************
** サイドバー追尾目次
************************************/
.sidebar-scroll{
	top:15px !important;
}
.sidebar h3{
	font-size:0.9em;
	padding: 7px 12px;
}
.sidebar .widget_toc{
	 box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}
.sidebar .toc-widget-box{
	margin-top: -0.9em;
}
.sidebar .toc{
	padding: 0;
	width:100%;
}
.sidebar .toc-content {
	overflow-y: scroll;
	max-height: 390px;
	background: #fff;
	padding: 0.5em 1.5em;
}
.sidebar .toc li{
	line-height:1.6;
	margin-bottom: 1em;
	font-size:0.85rem;
	color:#3cb8f1;
}
.sidebar .toc-content > ol  > li,.sidebar .toc-content > ul  > li{
	font-weight:600;
	padding-left: 0.5em;
}
.sidebar .toc-content a{
	letter-spacing:0.5px;
}
.sidebar .toc .toc-list ul, .sidebar .toc .toc-list ol {
	margin: 1em 0;
	list-style-type:none;
	font-weight:500;
}
@media screen and (max-width: 768px){
	.sidebar-menu-button .widget_toc{
		display:none;
	}
}

数字の色を変える方法

数字の色を変えるにはCSSの31行目にある

color:#3cb8f1;

のカラーコードを変更してください。

高さを変える方法

どれくらいの高さまでいったらスクロールにするか。

その高さを示すのがCSSの23行目にある

max-height: 390px;

です。

この数値を変更すればスクロールに移行する高さが変更されます。

STEP2:ウィジェット設定

1.ウィジェット設定画面を開く

WordPressの管理画面を開いて、外観ウィジェットを開いてください。

Cocoonサイドバー追尾目次設定1

2.【C】目次を選択

【C】目次を選択してください。

Cocoonサイドバー追尾目次設定2

3.サイドバースクロール追従を選択

サイドバースクロール追従を選択して「ウィジェットを追加」をクリックしてください。

Cocoonサイドバー追尾目次設定3

4.タイトル、見出しの数を決めて保存

タイトルと見出しの数を決めて保存してください。

Cocoonサイドバー追尾目次設定4

これで終わりです!

お疲れ様でした!

手順は以下の通りです。

手順

STEP1:CSSコピペ

こちらはプラグインTOC+を使った手順です。Cocoonの目次機能を使ってる方はこちらから。

CSSをコピペしていきます。

メモ

「外観→テーマエディター→style.css(子テーマ)」。もしくは、「外観→カスタマイズ→追加CSS」に貼り付けてください。

CSSが反映されない場合はスーパーリロード(Ctrl+F5orShift+F5)してください。

Copy
/************************************
** サイドバー追尾目次
************************************/
.sidebar-scroll{
	top:15px !important;
}
.sidebar h3{
	font-size:0.9em;
	padding: 7px 12px;
}
.sidebar .toc_widget{
	box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}
.sidebar .toc_widget_list{
	overflow-y: scroll;
	max-height: 390px;
	background: #fff;
	padding: 1em 1.5em 1em 2.3em;
	margin-top:-0.9em;
	list-style-type: decimal;
}
.sidebar .toc_widget_list li{
	line-height:1.6;
	margin-bottom: 1em;
	font-size:0.85rem;
	color:#3cb8f1;
}
.sidebar .toc_widget_list  > li,.sidebar .toc_widget_list  > li{
	font-weight:600;
	padding-left: 0.5em;
}
.sidebar .toc_widget_list  > li ul,.sidebar .toc_widget_list  > li ul{
	padding-left:1em;
	font-weight:500;
	list-style:none;
}
.sidebar .toc_widget_list a{
	letter-spacing:0.5px;
	color:#333;
	text-decoration:none;
}
@media screen and (max-width: 768px){
	.sidebar-menu-button .toc_widget{
		display:none;
	}
}

数字の色を変える方法

数字の色を変えるにはCSSの26行目にある

color:#3cb8f1;

のカラーコードを変更してください。

高さを変える方法

どれくらいの高さまでいったらスクロールにするか。

その高さを示すのがCSSの16行目にある

max-height: 390px;

です。

この数値を変更すればスクロールに移行する高さが変更されます。

STEP2:ウィジェット設定

ウィジェット設定をして終わりです!

1.ウィジェット設定画面を開く

WordPressの管理画面を開いて、外観ウィジェットを開いてください。

Cocoonサイドバー追尾目次設定1

2.TOC+を選択

TOC+を選択してください。

Cocoonサイドバー追尾TOC設定2

3.サイドバースクロール追従を選択

サイドバースクロール追従を選択して「ウィジェットを追加」をクリックしてください。

Cocoonサイドバー追尾TOC設定3

4.タイトルを決めて保存

タイトルとを決めて保存してください。

Cocoonサイドバー追尾TOC設定4

これで終わりです!

お疲れ様でした!

スマホで目次追尾のカスタマイズ

PCだけでなくスマホでの目次追尾カスタマイズも行ってます。

詳しくは下記記事をご覧ください。

【Cocoon】スマホで目次を追従させる方法
WordPressテーマ「Cocoon」利用者むけのスマホで目次を追従するカスタマイズです。縦長になりがちなスマホにオススメのカスタマイズです。離脱率も下がるかもしれません!コピペで簡単なのでぜひやって見てください。

コメント

ページトップへ