Cocoonのサイドバーに目次を簡単に表示させるには

cocoonのサイドバーに目次を表示すると便利

このページは、Cocoon ユーザーの

サイドバーウィジェットに目次を入れたい

こんなお悩みを解決します。

画面の右側に目次を表示させてあるサイトをよく見かけます。

Cocoonでもできるかな?と思ったら、ウィジェットを追加するだけで出来てしまいました(めちゃ簡単)。

目次

サイドバーの目次は長文に便利

文章が長くなると、目次があると大変便利ですよね。

読む側も、書く(編集)側も。

Cocoonの基本設定では、投稿ページの上部に目次ができます。

その他に、ウィジェットを利用するとサイドバーや好きなところへ目次を配置できます。

 

Cocoonの追従サイドバーへ目次を配置する手順

画面を下へスクロールしてもすぐに右側のサイドバーに目次を表示すると、サイト訪問者がページ内を移動する時にとても便利になります。

ここでは、画面の右側に目次を表示させる方法、スクロールしても表示し続けている方法を説明します。

 

1.レフトバー→外観→ウィジェットへ移動

 

2.[C]目次を開く

 

3.右側の設定で表示する深さを選択して終了

 

なんと、たったこれだけで目次を配置することができます。

そよパパ
そよパパ

もちろん、他の場所にも配置できますよ♪ですが、一括で追加できて、一括で削除(移動)できるから、ウィジェットに入れるのがオススメです♪

 

Cocoonの目次は自動表示される

Cocoonの基本設定で、目次の表示については次のような選択ができます。

Cocoon設定→目次タブ

  • 目次の表示・非表示の設定
  • 表示ページの選択(投稿・固定・カテゴリー・タグ)

また、ブロック内に、[-toc-] というショートコードを設定すれば目次を表示させることができます。(※”-”は削除して使用します。)

WordPressを触り始めたばかりだと、何からやって良いかも、何がWordPressの機能なのか、何がテンプレートの機能なのかさっぱりわからないと思います。そんな方には、こちらの本をおすすめします。(実際に手を動かして作るのが一番ですよ♪)

 

ページ内で目次へ戻りやすくする方法

右側の目次は、PCユーザーには見えますが、モバイルユーザーにはみえません。

そういう方が簡単に移動ができるように、見出しの区切り毎に目次へ戻るリンクを作成すると便利ですよ。

△目次へ戻る

こういうのがあると移動が楽ですよね。

リンク先はつぎのとおりです。

#toc

これをリンクで追加してあげましょう。

△目次へ戻る

リンクをクリックするとページ上の目次へ移動するのが確認できます。

何度も使うブロックは再利用ブロックへ登録しよう

この目次へ戻るリンクは、ページ内で沢山利用しそうですよね。そういうときは、再利用ブロックへ登録しましょう。

リンクの変更もできますし、前後に何かを追加したいときも一括で作業できるので大変便利ですよ。

登録はブロックをクリックして表示される︙メニューから、「再利用ブロックへ追加」を選択するだけです。

次からは、「/名前」で呼び出すことができますよ。

Cocoonに目次を追加するまとめ

今回は、サイドバーの追従へ追加したのは

画面スクロールしても右側でいつも表示してくれているから。

これだと好きなところから読み直しもできて便利ですよね。

WordPressの無料テーマ・Cocoonのカスタマイズで、やりたいなーっと思ったらネットでググると大体答えが見つかる。本当、このテーマは沢山のユーザで支えられているのね。感謝しかないです♪

WordPressテーマ Cocoon

シンプルで使いやすい、それでいて機能が豊富。有料テーマに負けないテーマ!

SoyoLifeではこちらのテーマを利用させて頂いています。

Cocoon公式サイト

??󥿥륵???С? ??®???ⵡǽ??????????Ρڥ?...
??󥿥륵???С? ??®???ⵡǽ??????????Ρڥ??å????????С??? ??®???Ĺ⤤????????ؤ????ǽ??󥿥륵???С??ڥ??å????????С??۲?ƯΨ99.99??ʾ?ι⤤???????ǡ??ȳ??ȥåץ??饹?ι⥳???ȥѥե????ޥ󥹤?ؤ???ʼ???󥿥륵???С??Ǥ??????990??(?ǹ?)???????Ѳ?ǽ???ޤ???̵?????10?...
 
そよパパ
そよパパ

Twitterで日々の生活のことTweetしています。気に入ってもらえたらフォローよろしくお願い致します♪

コンテンツがお役に立てれば幸いです。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

目次