「メンタルてんきよほー」は”hikaru3.Labo”へリニューアル。

WordPressブログのカスタム記事・スクロール目次をサクッと解説

ワードプレス

こんにちは!なんちゃってWebデザイナー

 

ひかるです。 (@hikaru3blog)

 

 

ワードプレステーマの「の「SANGO(サンゴ)」

 

こちらの機能で気になったのが画面右側の目次がずっとついてくる

 

ブログを見に来てくれた人に、とても親切な機能ですよね。

 

実は、オープンケージの「ストーク」誰でも簡単に出来るんです。

 

CSSのスキルなしでOK (≧∇≦)b

 

どうです? スルスル目次を一緒に作ってみませんか?

 

[box class=”glay_box” title=”カスタムの3ステップ”]

1.プラグイン「Table of Contents Plus」をダウンロード・有効化・初期設定

2.「管理画面」→「外観」→「ウィジェット」で「TOC+」(Table of Contents Plus)を確認

3.「PCスクロール領域」へ「TOC+」(Table of Contents Plus)をドラッグアンドドロップ

[/box]

 

めっちゃ簡単!

 

 

 

スポンサーリンク

カスタムの手順1.プラグイン「Table of Contents Plus」をダウンロード・有効化・初期設定

 

写真のとおりにやっていけばOKです。

 

プラグインの追加は、「管理画面」→「プラグイン」→「新規追加」

 

 

 

 

こんな感じのプラグインの「有効」をクリック

 

 

ダウンロード出来たら、「有効化」をクリック

 

 

下の写真のようになっているとOK

 

プラグインの基本設定

 

写真のとおりにチェックしてください。

特に、赤枠はあとでも変更できるので、ひとまずこれでやってみましょう。

 

 

「「上級者向け(表示)」の「表示」をクリック

 

まだ、設定を更新しない。

 

 

続いて、「上級者向け(表示)」の「表示」させて、

 

赤枠の見出しレベルをH2だけチェックにする!

(H3まで見出しをつけると、スクロール出来ない場合あり)

 

 

あとは何も触らず設定を更新する。

 

 

 

カスタムの手順2.「管理画面」→「外観」→「ウィジェット」で「TOC+」を確認

 

こちらも写真の見たままで「TOC+」(Table of Contents Plus)を確認する。

 

プラグインがきちんと使えるように有効化されていると、「TOC+」が表示されています。

 

 

 

 

 

 

 

カスタムの手順3.「PCスクロール領域」へ「TOC+」(Table of Contents Plus)をドラッグアンドドロップ

 

PCスクロール領域の▼をクリックすると、写真のように開きます。

 

「TOC+」をドラッグアンドドロップ!

 

 

「目次をサイドバーのみに表示」はチェックしない!

 

これやってしまうとスマホの表示で目次が出ない

 

スクロールするのはPCで見た時だけなんです・・・。

 

 

 

オープンケージの「アルバトロス」での注意点!

 

ストークより前に発売された「アルバトロス」

ウィジェットの設定では、下のように注意が必要です。

 

 

 

 

 

「保存」を押したら、早速ブログ記事のどれかを開きましょう。

 

完了で~す。目次がスルスルスクロールしてついてきますね(^^♪

 

 

 

[aside type=”warning”]もしも、目次が出てないよ~って場合![/aside]

 

こちらを参考に、キャッシュをクリアしてください。

 

[box class=”glay_box” title=”Google Chromeのキャッシュのクリア”]

寝ログ|Chromeのブラウザキャシュを簡単に削除する2つの方法+普通の方法

[/box]

 

ひかるでした☆彡

 

おすすめの関連記事はこちらです。

 

エックスサーバーでPHPのバージョンアップとエラーが出ている場合(写真解説)。

ワードプレスブログにアクセス出来ない。乗っ取りかも?改ざん対策は?

ベテランほど知らないWordPressのプラグイン更新する時に気をつけたい事とアップデートの方法。

 

 

この記事を書いた人
ひかるん

当サイト「hikaru3.Labo(ひかるんラボ)」管理人
・うつや双極性障害、HSP、ADHDグレーゾーンの当事者目線で発信中。

ミラーレス片手に自然や大地に近づいて、様々な問題が解消。
Perfumeと仮面ライダー電王で「未来に希望を持つ」

詳しいプロフィールはこちらで~す

ひかるんをフォローする
ワードプレス
この記事が気に入ったら最新ニュース情報を、
いいねしてチェックしよう!
スポンサーリンク
ひかるんをフォローする
hikaru3.labo