Cocoonでサイドバーにスクロール追従する目次を設定し、見た目をカスタマイズする

こんにちは、ゆんつです。

ブログの記事には「目次」がつきものです。

記事に目次があることで、記事の構成を大まかに把握することができますし、目次の見出しをクリックすることで目的の見出しに簡単にアクセスすることができます。

そんな便利な目次ですが、記事内の目次は画面を下にスクロールをすることにより見えなくなってしまいます。

ですので、最近はサイドバーにスクロールに追従する目次があるようなサイトも多く目にします。

WordPressのテーマ「Cocoon」では、スクロールに追従する目次を簡単に設定することができます。

今日はCocoonで

について書きたいと思います。

スクロールに追従する目次を設定する方法

WordPressの管理画面から「外観」⇒「ウィジェット」をクリック。

ウィジェット画面になるので、「目次ウィジェット」をクリックし「サイドバースクロール追従」を選択して「ウィジェットを追加」ボタンをクリック。

すると「サイドバースクロール追従」に目次ウィジェットが追加されます。

• 目次のタイトル
• 目次を表示する深さ
• 目次を表示したくないページ

を設定し、「保存」ボタンをクリック（※目次を表示する深さを設定しても、保存ボタンをクリックすると「H2見出しまで」になってしまうことがありますが、ちゃんと設定は反映されています。）

これにより、サイドバーにスクロールに追従する目次が表示されるようになります。

スクロールに追従する目次をカスタマイズする方法

サイドバーに追加した目次は、何もカスタマイズしていないときは以下のような感じです（※背景色は僕のブログの背景色です）。

この目次を以下のようにカスタマイズしてみたいと思います。

コードは以下の通りです。

/* 目次の位置の調整 */
.sidebar-scroll {
  top: 3%;
}

/* 目次の見出し部分のカスタマイズ */
.sidebar-scroll .widget_toc .widget-title {
  background: red;
  text-align: center;
  color: #fff;
  margin-bottom: 0;
}

/* 余白部分の調整 */
.toc-widget-box .toc-center {
  margin: auto;
  padding: 0 0.5em;
}

.toc-widget-box .toc-list.open {
    padding: .6em 2.5em;
}

/* 目次の背景を白くし、赤線で囲む */
.sidebar-scroll .toc-widget-box {
  background: #fff;
  border: 2px solid red;
}
  

簡単にコードを解説しておきます。

サイドバースクロール追従にしたウィジェットは、デフォルトの状態では上ピッタリに表示されるので、少し間隔をとるために上から3%の場所に表示されるようにしています。

あとは、目次のタイトルや背景色を変えたり、タイトルのセンタリング、余白の設定、目次をぐるっと赤線で囲むなどの簡単なカスタマイズです。

このコードを子テーマのスタイルシートに記述します。

WordPressの管理画面で「外観」⇒「テーマエディタ」をクリック。

「テーマを編集」という画面になるので、「編集するテーマを選択」の欄が「Cocoon Child」になっていることを確認します。

「子テーマ用のスタイルを書く」という項目の下に、先ほどのコードをコピペします。

「ファイルを更新」ボタンをクリックして変更を保存すると、上記のような見た目の目次になります。

PC環境以外では非表示にする

僕のブログの場合。

モバイル環境になるとワンカラムになり、サイドバーは記事の下に移動するよう設定しています。

ですので、モバイル環境で記事を見た場合、スクロールに追従する目次は画面の一番下に位置することになります。

目次が一番下にあっても意味がないので、PC環境以外ではサイドバーの追従する目次を非表示にします。

子テーマのスタイルシートの「レスポンシブデザイン用のメディアクエリ」に「1023px以下」という項目があります。

そこに、以下のコードを記述します。

#sidebar .widget_toc{
  display: none;
}
  

これにより、モバイル環境ではサイドバーに合った追従する目次が非表示になります。

気軽に試してみるといいかも

以上が、サイドバーへの目次の設定とカスタマイズです。

ブログで長文を読んでいるときに、サイドバーに目次があるととても便利なので、もしサイドバーに目次を設定していない場合は、一度試してみてもいいかもしれません。

Cocoonならウィジェットで設定できるので、気軽にサイドバーへの目次を導入することができます。

もしブログに合わなけば、ウィジェットを削除すればいいだけなので、気軽に試すことができます。

何かの参考になれば幸いです。

それでは、またー。