PR ブログ

【Cocoon】サイドバーの目次に現在位置を表示する【コピペOK】

2021年2月13日

【Cocoon】サイドバーの目次に現在位置を表示させる方法【コピペOK】
  • 目次の現在位置を表示させたい
  • コピペでCocoonの目次をカスタマイズしたい

このような疑問に、答えます。

結論、Cocoonで目次の現在位置を表示する手順は以下の2ステップです。

  • 手順①:Cocoonの目次をサイドバーに固定する方法
  • 手順②:コピペで目次に現在位置を表示する

この2ステップについて、本記事で深堀りしていきます。

以下のように、目次の現在位置の背景色を変えることで、自分がどこを読んでいるかわかりやすくできます。

サイドバーの目次に現在位置を表示する

僕の目次のデザインはパクってもOKです。(※現在はCocoonからAFFINGER6に移行したので、デザインが変わっています。)

なお、目次全体のデザインをカスタマイズしたい方は以下の記事を参考にしてください。

参考:CSSで目次のデザインをカスタマイズする

【コピペOK】目次のデザインをCSSでカスタマイズする【Cocoon】
【コピペOK】CSSで目次のデザインをカスタマイズする【Cocoon】

続きを見る

Cocoonで目次をサイドバーに固定する方法

サイドバーに目次が固定できている方は読まなくてもOKてす。

前提として、サイドバーに目次を表示させる必要があります。

なので、ますはCocoonテーマを利用している方向けに、目次のカスタマイズ方法を解説します。

それでは、管理画面から[外観➡︎ウィジェット]を選択してください。

Cocoonで目次をサイドバーに固定する方法


下にスクロールすると『[C]目次』があるのでクリック。

[サイドスクロール追従]を選択し、『ウィジェットを追加』を選択しましょう。

目次をサイドバーに固定

以下のように表示されると思うので、タイトルや目次表示の深さを設定しましょう。

目次設定
もし、目次表示の深さをH5見出しまでに設定したらH6見出しが目次に表示されません。

あとは、保存をクリックしたらサイドバーに固定されています。

以上で準備は完了です。

コピペで目次に現在位置を表示する

コピペで目次に現在位置を表示する

少し遅くなりましたが、ここからが本題です。

紹介するコードをコピペをするだけで、目次に現在位置を表示させることができます。

コードのコピペ場所

それでは紹介するコードのコピペ場所を開きましょう。

管理画面から[外観➡︎テーマエディター➡︎Cocoon Child]を表示してください。

[編集するテーマを選択]がCocoon Child(子テーマ)であることを確認しましょう。

もしなってない場合はCocoon Childに設定してください。

JavaScript、CSSのコピペ場所

紹介するコードを好きなとこに追加してください。

※よくわからない方は一番下にコードを追加しましょう。

コピペするコード

それでは、コピペするコードを紹介します。

JavaScript

jQuery(function() {
// ナビゲーションのリンクを指定
var navLink = jQuery('#sidebar-scroll li a');
if(!navLink[0]) {
return false;
};
// 見出しを配列に格納
var contentsArr = new Array();
for (var i = 0; i < navLink.length; i++) {
// 見出しを取得
var targetContents = jQuery(navLink.eq(i).attr('href'));
// 配列に格納
contentsArr[i] = targetContents
};
//投稿記事エリアの次の要素を最終位置取得用に追加
contentsArr[i] = jQuery('.article-footer');
// 現在地をチェックする
function currentCheck() {
navLink.removeClass('current');
// 現在のスクロール位置を取得
var windowScrolltop = jQuery(window).scrollTop() + 50;
for (var i = 0; i < contentsArr.length-1; i++) {
// 現在のスクロール位置が、見出しと次の見出しの間にあるものを調べる
if(contentsArr[i].offset().top <= windowScrolltop && contentsArr[i+1].offset().top > windowScrolltop) {
//ナビゲーションにclass="current"をつける
navLink.eq(i).addClass('current');
//目次のカレントが表示領域から出たら見える位置までスクロール
var tocList = jQuery('.toc-content>ol');
var posTop = navLink.eq(i).position().top;
if (tocList.innerHeight() < posTop + 60) {
tocList.scrollTop(tocList.scrollTop()- tocList.innerHeight() + posTop + 60);
}
if (posTop < 60) {
tocList.scrollTop(tocList.scrollTop() - 60);
}
break;
}
};
}
// ページ読み込み時とスクロール時に、現在地をチェックする
jQuery(window).on('load scroll', function() {
currentCheck();
});
// ページ読み込み時とリサイズ時に目次のMaxHeightを設定
var timer = false;
$(window).on("load resize", function() {
if (timer !== false) {
clearTimeout(timer);
}
timer = setTimeout(function() {
jQuery('.toc-content>ol').css('max-height', jQuery(window).height() - 100);
}, 100);
});
});

長くなって申し訳ないm(_ _)m

こちらはjavascript.jsにコピペしましょう。

参考にさせていただいたサイトはこちら

こちらのサイトのコードにCocoonのID、Classを指定しました。

style.css

.toc li .current {/*現在位置*/
color: #333;/*文字色*/
padding: 6px 6px 6px;
background-color: #f5f5f5;/*背景色*/
}

結構短いですね。
こちらのコードはstyle.cssにコピペしましょう。

こちらのコードでは、目次の現在位置の文字色、背景色を変えるように指定しました。

文字の大きさを変えてもいいかもしれませんね。
コピペは以上です。

「カスタマイズが難しい…」という方へ

Cocoonはカスタマイズが必要なので、エラーの対処やCSSの学習しなければいけません。「Cocoonでは収益化は難しいな…」という印象です。

僕もCocoonのWEBデザインに3ヶ月ほどかかってしまい、収益化まで遠回りしてしまいました。

そこで、「カスタマイズが難しい…」という方はAFFINGER6の導入がオススメです。僕もAFFINGER6でサイトを運営しており、13歳で月収5桁を達成しました。

AFFINGER6は、それなりに稼ぐアフィリエイターから大人気のテーマなので、詳しくチェックしておきましょう。

参考:CocoonとAFFINGER6を比較

【比較】稼ぎたいならCocoonよりAFFINGER5がおすすめな理由
【比較】なぜCocoonよりAFFINGER6の方が収益化しやすいの?【移行すべき理由】

続きを見る

「収益化するにはCocoonでいいの?」という方は、以下の記事で「僕が有料テーマをオススメする理由」をすべて解説しているので、参考にしてください。

参考:Cocoonで収益化できない理由

【事実】Cocoonで収益化できない本当の理由【解決策あり】

続きを見る

※無料ニュースレターを発信中:僕は持病を抱えつつも、13歳でブログで月収5万円を達成しました。その状況で得た「健康×ビジネス」の知識をニュースレターで共有していきます。無料登録はこちら。いつでも解約できます。

-ブログ
-