ブログ運営

【WordPress】AFFINGER5でサイドバーにTOC+の目次を固定する

アフィンガー5のサイドバーにTOC+の目次を固定する

ブログのサイドバーに目次を置いていて、記事をスクロールしても目次がいつも画面内にあるブログをたまに見かけます。

長い記事のページだとサイドバーにずっと目次が置いてあったら意外と便利です。

そこでWordpressのテーマ、アフィンガー5(AFFINGER5)を使っているブログでサイドバーに目次を固定してみました。

 

ぜろくん
最初はやり方を調べてやってみても上手くいかなかったんだよね
みどちん
でもアフィンガーではプラグインなしでも簡単にきれいに置くことが出来たので、まとめてみました♪
ぜろくん
アフィンガーを使っていて目次をサイドバーにうまく固定出来なくて困っている人がいたら参考にしてみてください

 

目次をサイドバーに固定するメリット

目次をサイドバーに固定することで、様々なメリットがあります。

通常、プラグインを使って記事に目次を設定するとリード文の後ろ(1番目のh2見出しの前)にこのような目次が表示されます。

見出しの上の目次

 

この目次は記事を読み進めてページを下にスクロールしていくと画面の上の方に消えていってしまいます。

短い記事ならそれでもいいんですが、長い記事や項目が多い記事では記事の最初の方にしか目次がないと、読みたい項目に戻ったり先に飛んだりする時に不便です。

 

そこで、サイドバーにこのような目次を設置します。

サイドバーの目次

 

この目次を画面をスクロールしてもいつも画面の中にあるように設定すると、以下のようなメリットがあるんです。

目次をサイドバーに固定する4つのメリット

  • いつでも目次が目に入り、記事に何が書かれているのかがすぐわかる
  • すぐに自分の読みたい項目に移動することが出来る
  • 読者が記事を読みやすくなる
  • 空きスペースを有効に活用することが出来る

 

では早速サイドバーに目次を固定してみたいと思います。

ぜろくん
サイドバーに固定できるのはパソコン表示の場合のみです♪

 

記事に目次を設置するプラグイン

まず、記事に目次を設置していない場合は設置する必要があります。

設置済みの人は飛ばしてこちら

設置済みでアフィンガーを使用している人はこちら

 

ここでは Table Of Contents Plus というプラグインを使って目次を自動的に作成して記事に挿入します。

 

Table Of Contents Plusのインストール

WordPress の管理画面からプラグイン>新規追加をクリック。

プラグイン>新規追加

 

Table Of Contents Plus と検索してインストール→有効化します。

tocをインストール

 

Table Of Contents Plusの設定方法

プラグインを有効化したら、WordPressの管理画面の「設定」の中にTOC+という項目が出来ているのでクリックします。

このサイトでの現在の基本設定はこんな感じ。

toc基本設定

上級設定の見出しレベルはこんな感じ。

上級設定の中

好きなように設定してみてください。

 

特定の記事だけ目次の表示位置を変えたい場合

記事の表示したい位置に以下のショートコードを挿入します。

コピペする場合はスペースは削除してください。

[ toc ]

 

特定の記事だけ目次を非表示にする場合

目次を表示させたくない記事の好きなところに以下のショートコードを挿入します。

コピペする場合はスペースは削除してください。

[ no_toc ]

編集の邪魔にならないように記事の最下部などの目立たない所に書くといいと思います。

 

サイドバーに目次を置く方法

Table Of Contents Plus(以下 TOC+)で作成した目次は記事内だけではなくサイドバーにも置くことが出来ます。

WordPress管理画面のプラグイン>ウィジェットをクリックします。

プラグイン>ウィジェット

するとその中に TOC+ というウィジェットがあります。

ウィジェットの中のTOC+

ウィジェットのページの左側に「サイドバーウィジェット」という項目があるので、その中に TOC+ のマスをドラッグして入れればサイドバーに表示されます。

サイドバーウィジェットはここ

ウィジェットのサイドバーの中へ

 

サイドバーに置いた目次を固定する方法

サイドバーウィジェット」の中に「TOC+」を入れただけではスクロールした際の目次の固定が出来ません。

TOC+にはサイドバーに目次を表示する機能があっても固定する機能はないからです。

サイドバーにウィジェットを固定するには専用のプラグインがあります。

Q2W3 Fixed Widget というプラグインがそれです。

 

WordPress の管理画面からプラグイン>新規追加をクリック。

Q2W3 Fixed Widget と検索してインストールし、有効化します。

Q2W3 Fixed Widgetインストール

 

Q2W3 Fixed Widget有効化

 

そして、WordPress管理画面のプラグイン>ウィジェットをクリックします。

サイドバーウィジェットの中に TOC+ をドラッグします。

この時、サイドバーの一番下の目次が来るように入れないと動作がおかしくなるので注意が必要です。

サイドバーウィジェットの中に入れた TOC+ を展開します。

すると Fixed widget という項目が出来ているのでチェックを入れます。

 

サイドバーにtocを入れる

 

するとこんな感じでスクロールし続けると、画面上に出ていく手前で目次が固定されます。

追尾するメニュー

 

しかし、項目が多いページではこんな風にフッター部分に飛び出しています…。

はみ出た目次

記事下にどこまでサイドバーの項目を置いていいかは Q2W3 の設定で設定することは可能です。

外観>Fixed Widget 設定 から設定できます。

Fixed Widget 設定の中の「下マージン」で調整出来ます。

ちなみに「横マージン」をブログのテンプレートの横幅のサイズにすると、それより小さい端末やスマホで追尾しなくなります。

しかし、このブログのフッターの高さは固定ではないので、ちょっと困るんですよね…。

 

AFFINGER5 ならプラグインなしでサイドバーに固定できる

しかし、高機能なアフィンガーなら、プラグインなしでもサイドバーに目次を固定出来るんです!(早く言え)

わたしの検索能力が乏しくてちょっと回り道をしてしまったんですが。

いろいろな機能がたくさんあるアフィンガー。

きっとサイドバーに固定する機能があるんではないかと思って、外観>ウィジェットの中身をまじまじ眺めてみました。

 

すると…。

サイドバーウィジェットの下にある「スクロール広告用

これなんとなく気になります。

スクロール広告用

開けてみましょう。

スクロール広告用集中線

 

サイドバーの下でコンテンツに追尾するボックスエリアです。

「カスタムHTML」等をここにドロップして内容を入力してください。

※PC以外では非表示部分

 

みどちん
これは、まんま探してた機能じゃないですかーーーー!!!

 

早速「スクロール広告用」の中に TOC+ をドロップしてみましょう!

スクロール広告用の中にTOC

さすが、元々備わっている機能だけあって、フッターにも重なりません♪

きれいに収まっていいかんじですね!

目次がはみ出さない!

しかし、なぜかスマホでも表示されています(固定はされない模様)

スマホでも表示されてる

 

ブログに合わせて適した場所に目次を設置しよう

サイドバーにも目次があると、読んでくれる人にとっても見やすくなると思います。

しかし、全てのブログで必ずしもそうだとは限りません。

目次よりももっと大事だったり見せたいものがあるブログもあるでしょう。

サイドバーの下は割と広く空いているので、有効活用したいものです。

ですので、目次をサイドバーに固定するのが自分のブログにあっているのか、よく考えて決めてみてくださいね♪

 

まとめ

WordPressのテーマにアフィンガーを使っている場合のサイドバーに目次を固定する方法の紹介でした。

わたしは最初プラグインを使っても思い通りに出来なかったので、メモを兼ねてまとめてみました。

もしも、同じように困っているひとがいましたら、参考にしてみてくださいね。

みどちん
一緒に読みやすいブログを作っていきましょう♪
 
\記事が気に入ったらシェアしてね/
  • この記事を書いた人
アバター

みどちん

工場勤務から小売、事務職までいろいろ経験したけど、真っ黒ブラック企業に入っちゃって職をなくしてフリーランスになった子持ちの主婦。 旦那の収入はあてにならないしお金もない職もないでどうなっちゃうの?! そこでゼロから始める在宅ワーク! 本当に在宅ワークやブログはちゃんと稼ぐことが出来るのか?! このブログでレポートしていきます♪

おすすめ記事一覧

在宅ワークってどんな仕事? 1

在宅ワークを始めてみようと思っても、初めてだとどんな仕事をすればいいか迷っていませんか?
初めての在宅ワークにおすすめのお仕事のひとつに「在宅コールセンター」があります。
でも在宅のコールセンターって家で一人でお仕事するのに、初めてでも出来るのかと不安があるかもしれません。
そこで今回は、私が実際にやっている「在宅コールセンター」のお仕事内容を紹介したいと思います。

【Googleアドセンス申請に向けて】収益化しやすいブログの始め方 2

お金を稼ぐためのブログの始め方を、他にも複数のwebサイトを開設した経験を元にまとめてみました!
「どんなブログにするか」はという内容はだいたい決まっている、若しくはとりあえずブログという形を作りたいという人向けに、具体的に収益化するためのブログを始める方法を紹介します。

在宅ワークイメージ 3

私は現在、在宅でアウトバウンドのコールセンターのお仕事をしています。
この仕事を始めて1か月ぐらい経ちました。仕事は少し慣れてきたかなって感じです。
そんな私が現在1日どれぐらい稼いでいるのかを報告します。

開業届の簡単な作り方♪ 4

難しいことは置いといて、フリーランスや個人事業主になるために簡単に開業届と青色申告で確定申告するのに必要な書類を作って、郵送で申請する方法を知りたい!という方の為にさくっと作ってさくっと送る方法をまとめました🎵

主婦にオススメのタイピング練習サイト 5

タイピングが速くなれば、その分仕事が速くたくさん出来るようになって、その結果収入も上がります。タイピング練習できるおすすめのサイトを紹介します。

-ブログ運営
-, , ,

© 2020 ゼロから始める在宅ワーク-ぜろわく!