サイトリニューアル中
・一部見えづらい画像があります。
ご不便をおかけしますが、しばらくお待ち下さい。

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

ABOUTこの記事をかいた人

月間約10万アクセスのブログの運営者。HSP(繊細で敏感な人)であることがわかってから、自分のあり方を模索中。 双極性障害2型・PTSDを現在治療中。ブログを書きはじめて、回復しています。 【詳しいプロフィールはこちらで~す




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

 

ひかるです。 (@hikaru3blog)

 

 

最近、発売されたワードプレステーマの「SANGO(サンゴ)」が注目されています。

 

キレイな見た目ですが、機能面では画面右側の目次がずっとついてくる

 

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

 

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

 

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

 

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

 

カスタムの3ステップ

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

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

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

 

めっちゃ簡単!

 

 

 

カスタムの手順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で見た時だけなんです・・・。

 

 

 

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

 

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

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

 

 

 

 

 

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

 

目次がスルスルスクロールしてついてきますね(^^♪

 

ひかるん
完了で~す。

 

もしも、目次が出てないよ~って場合!

 

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

 

 

ひかるでした☆彡

 

 



シェアありがとうございます

HSPメールマガジンを読んでみませんか?


ブログでは伝えきれない情報

メールマガジンで配信しています。

 

◆ LINE@のメンバーさん。

◆ 最近、このブログを知ってくださったあなた。

 

現在、登録を大募集中!

メルマガ登録フォームはこちら