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

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」になっていることを確認します。

編集するテーマがCocoon Childになっていることを確認

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

カスタマイズ用のコードを記述

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

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

僕のブログの場合。

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

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

モバイル環境になるとサイドバーの目次は一番下に表示される

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

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

レスポンシブデザイン用のメディアクエリ

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


#sidebar .widget_toc{
  display: none;
}
 

モバイル環境で非表示にするための記述

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

モバイル環境でサイドバーの目次が非表示に

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

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

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

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

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

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

それでは、またー。

コメント