目次をサイドバーに表示 Cocoon設定

WordPressの使い方

やろうとしていること

WordPressの機能で[目次を表示する]という機能がありますが、通常は表示位置はタイトルの下の本文中です。ページが長い場合(目次を配置するページはたいてい長い)スクロールすると目次が見えなくなります。

わざわざ上に戻って目次を確認するよりもサイドバーのスクロールに追従して配置されるといいなと思ったのでやってみました。

ウィンドウ幅が狭くなったときはサイドバーを非表示としています。その時は通常の位置に表示位置はタイトルの下の本文中に表示するように対応しました。

現状→サイドバーに目次は表示しない。

5201-1.表示確認

修正後→サイドバーに目次を表示し本文中には表示しない。

5207-3.表示確認

目次の設定をやっていきます

WordPressテーマの確認

[外観]→①[テーマ]をクリック
Cocoon と Cocoon Child をインストールしています。どちらも無料です。

5001-1.テーマの設定

[[C]目次]ウィジェットの配置

左サイドのメニューで[外観]を選択
①[ウィジェット]をクリック
②[利用できるウィジェット]の中から[[C]目次]をクリック

5202-1.ウィジェット設定

①[C目次]をクリック

5202-2.ウィジェット設定

①[サイドバースクロール追従]をクリック
②[ウィジェットを追加]をクリック

5202-3.ウィジェット設定

画面右側の列の[サイドバースクロール追従]に[[C]目次]が追加されます。

5202-7.ウィジェット設定

サイドバーの一番上に表示するために並び順を入れ替えます。
並び順はドラッグ&ドロップで変えられます。

5202-8.ウィジェット設定

①[[C]目次]の[▼]をクリックして詳細を表示します。

5202-9.ウィジェット設定

[タイトル]、[目次表示の深さ]は好きなものを設定します。
①[表示設定]をクリックすると、設定項目が表示されます

5202-4.ウィジェット設定

①[ウィジェットの表示]→チェック・入力したページで表示
②[ページ]タブを選択
③[投稿]をチェック
※[投稿]以外にチェックを入れても大丈夫です。
④[保存]をクリック

5202-5.ウィジェット設定

①「保存しました」が表示されたら、
②[完了]をクリック

5202-6.ウィジェット設定

Cocoonの設定 – [全体]タブ

サイドバーを表示する設定にしていなければ、サイドバーに目次を配置しても表示されません。
ということで、サイドバーを表示するように設定します。

左サイドのメニューで①[Cocoon設定]を選択
「Cocoon設定」が表示されたら
②[全体]タブをクリック

5203-1.Coccon設定全体

下へスクロールします。
①[サイドバーの位置]を選択します。
※ここでは[サイドバー右]を選択していますが、左でもOkです。
②[変更をまとめて保存]をクリック

5203-2.Coccon設定全体

Cocoonの設定 – [目次]タブ

ウィンドウ幅が狭くサイドバーが非表示になったとき、本文中に目次を表示する設定をします。

左サイドのメニューで①[Cocoon設定]を選択
「Cocoon設定」が表示されたら
②[目次]タブをクリック
③[目次の表示]→目次を表示する をチェック
④[表示ページ]→投稿ページ をチェック
※投稿ページ以外にチェックを入れてもOKです。
下へスクロールします。

5204-1.Coccon設定目次

他の項目は好みに応じて設定します。
①[変更をまとめて保存]をクリック

5204-2.Coccon設定目次

投稿記事の目次表示設定

ウィンドウ幅が狭くサイドバーが非表示になったとき、本文中に目次を表示する設定です。

投稿記事の編集画面を開きます。
右側の[ページ設定]→①[目次を表示しない]のチェックを外します。
②[更新]をクリック

5205-1.投稿設定

本文中の目次の表示設定

サイドバーに目次が表示されているとき、本文中の目次を非表示にする設定をします。

ブラウザで投稿記事のページを開きます。
キーボードで[F12]を押下します。
右側にHTMLが表示されます。
①のボタンをしてクリックして、目次が表示されている当たり(②)をクリックします。
③id を確認します。

が設定されています。

5206-1.CSS設定

スタイルシートにtocの表示・非表示を設定します。
①[外観]→②[テーマファイルエディタ]をクリック
③[スタイルシート]をクリック

5206-2.CSS設定

[選択したファイルの内容]に[スタイルシート]が表示されます。

[選択したファイルの内容]に以下を入力します。(画像内①参照)

ウィンドウ幅が1024px以上になるとサイドバーが表示されるので
1024px以上で本文中の目次を非表示にします。

/1024px以上/
@media screen and (min-width: 1024px){
  toc {
    display: none;
    margin: 0;
  }
}

②[ファイルを更新]をクリック

5206-3.CSS設定

①のメッセージが表示されればOKです。

5206-4.CSS設定
1024pxはどこからでてきたか?

キーボードの[F12]を押下してディベロッパー・ツールを表示した状態で、ウィンドウ幅を拡大縮小すると、ページ内の右上にウィンドウのサイズが表示されます。→①
ここでウィンドウ幅を確認します。

5206-5.DevTools

目次の表示を確認

ウィンドウ幅が広いとき(1024px以上)
目次はサイドバーに表示されます。本文中の目次は非表示。

5207-3.表示確認

ウインドウ幅を狭いとき(1024px以下)
本文中に目次が表示されます。サイドバー自体が非表示です。

5207-1.表示確認

さらにモバイル(タブレット、スマホ)で表示
本文中に目次が表示されます。サイドバー自体が非表示です。

5207-2.表示確認

番外編

失敗作です。
スタイルシートの設定時に本文中の目次を非表示にする最小ウィンドウ幅を 1023px としたため、サイドバーと本文中の両方に目次が表示されました。
ウィンドウ幅が 1024px の場合、両方に表示されます。

5207-4.表示確認

こうやって試行錯誤しながらやってます。

タイトルとURLをコピーしました