サイドバーに追従目次を表示させる方法

ブログを読んでいると、

サイドバーに目次がスクロールして、

ついてくるブログがあります。

これってあると便利ですよね?

この追従する目次の、WordPressでの設置方法です。

WordPressで、Cocoonのテーマを使っています。

サイドバーに追従する目次を設置する

WordPressで、テーマCocoonでの、

サイドバーに目次が追従してくれる設定です。

cocoon設定の目次タブで目次の設定を、

ウィジェットの目次設定で、追従する設定をします。

追従する目次があるといいこと

ちょっとしたことですが、

サイドバーに目次がついてくると、

けっこう下へスクロールする、長めの記事だと便利です。

サイドバーってなに?

ところで、サイドバーとは?

ブログを読んでいると、本文の右や左に、

縦のメニューなどがあるブログがあります。

これが、サイドバーです。

目次ってなに?

ブログ記事を書いていて、項目が増えてくると、

項目ごとの案内があると、読みやすくなります。

H2やH3などのタグを使って「見出し」を作って、

WordPressにある、「目次」機能を使うと、

自動で目次を作って、表示してくれるようになります。

参考記事を載せておきます。

ブログのテーマをいじくっていたら壊したので復旧の話と目次についてです。

目次の作り方

では、目次から作っていきましょう。

Cocoon設定にある「目次」タブの設定

サイドメニューのCocoon設定の、

目次タブから設定をおこないます。

上から、□にチェックを入れたり、

目次のラベルを入れたりして、設定していきます。

途中から下は、

表示の条件などの、設定になっています。

下の「変更をまとめ保存」をクリックして、

目次の完成です。

外観のウィジェットからの設定

サイドメニューの「外観」にある、「ウィジェット」へ行き、

サイドバーの追加をします。

「サイドバースクロール追加」そして、下の「ウィジェットを追加」です。

つぎは、「サイドバースクロール追従」の設定です。

「タイトル」と「目次表示の深さ」を決めます。

これで完成です!

プラグインでもできる「Easy Table of Contents」

もしも、使ているテーマに、目次機能がなかったら、

プラグインを使って、作ることが可能です。

プラグインは、たくさんありますが、

「Easy Table of Contents」を使っていたことがあります。

ブログのテーマをいじくっていたら壊したので復旧の話と目次についてです。

目次を作るにあたって注意するといいこと

見出しタグの付け方

記事のタイトルが、H1になるので、

記事の見出しは、H2から始めると良いです。

見出しには、階層があるので、

H2、H3、H4、あたりの順番に気をつけましょう。

階層は、こんな感じです。

H1 タイトル

-H2 ○○○○

ーーH3 ○○

ーーーH4○○

-H2 ○○○○

ーーH3 ○○

ーーH3 ○○

ところで、見出しってなに?

雑誌や本にある、表題や項目と同じで、

その項目の内容の、わかりやすい案内のこと。

記事の整理ができます。

見出しタグの表示の深さ

デフォルトでは、すべての見出しを、

表示する設定になっています。

ここを、H3あたりまでにしておくと、

ちいさい画面のパソコンなどでも、

目次が、画面からはみださないようです。

※目次の数にもよりますが、目次が多い場合だと、

下のほうが切れてしまうときがあるようです。

まとめ

わりと長い記事が書けるようになってきて、

目次があったら便利かな?

そして、迷子にならないように、

サイドメニューにも、あったら便利かも?

ということで、作ることにしました。

お役に立てるとうれしいです。

☆おすすめ記事などのリンクです。

★ブログをはじめる

カテゴリー: ブログとサーバー

カテゴリー:WordPress

ブログとアフィリエイトのはじめかた【まとめ

WordPressのテーマをcocoonにした方法【まとめ

年間920円(税抜)からの格安ドメイン取得サービス─ムームードメイン  】

【 ロリポップ!なら初心者でも安心!
大人気のWordpress簡単インストールやショッピングカートなど
誰でもカンタンに使える機能が満載!
 

月額900円(税抜)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』

A8.netの申し込みページはこちら

ゲーム動画関連のこと

【PS4&Xbox】SKYRIM スカイリム

スカイリムの魅力【まとめ】動画記事とともに

★The latest videos are on YouTube!

【YouTubeのXbox版スカイリム【The Elder Scrolls V: Skyrim】

【Xbox】SKYRIM mod game play with beauty lady ♪

★OBSstudio関連記事

☆【OBS studioの使い方【まとめ】

☆【OBSstudioのダウンロードとインストール方法

☆【OBSstudioを使ってみた感想と設定した方法(XboxOne初期型です)

☆【OBSstudioの使い方・最低限の設定・GC550PLUSでXboxのゲーム配信と録画をする

 

現在、使っているパソコンです。

OS:Windows10
CPU:i5 4210M
メモリー:16Gに増設しました。
SSD512G
グラフィックボードは、積んでいません。。

中古パソコン 中古ノートパソコン Windows10 NEC VersaProシリーズ テンキー無モデル 新世代 第四世代 Corei5 高速 8Gメモリー 新品SSD SDカードスロット 無線LAN Wifi対応 最新OS Office付 中古動作良好品【あす楽】

価格:29,999円
(2020/5/27 16:53時点)
感想(556件)

 

コメント



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