![](https://takuweb1.com/wp-content/uploads/2020/07/reading.progressbar.png)
ブログを読んでいて自分がこのページのどの辺りまで読んだのか
あとどのくらいなのか気になったりしませんか。
文字数の多い記事だと知りたくなりますよね。
そこで画面上部にプログレスバーを設置して
記事の上部からどのくらい進んだのかをわかるようにできる
プラグイン「Reading progressbar」の紹介です。
プログレスバーの色の指定ができるのでテーマを壊さないですよ。
ここでは画像付きで設定、使い方を説明してるので参考にしてみてください。
Reading progressbarとは
WordPressで作成したブログ記事の上から下への読む進捗状況を
プログレスバーで表示するプラグインです。
ユーザーが読んでいる箇所が記事全体のどのあたりに
位置するのかわかりやすくなります。
プラグイン「Reading progressbar」のインストール
それでは進めていきましょう。
WordPressにログインしたら
ダッシュボードから「プラグイン」→「新規追加」へとクリックします。
![](https://takuweb1.com/wp-content/uploads/2020/07/1-26.png)
プラグインを追加のページが表示されたら
キーワード検索欄に「Reading progressbar」と入力しましょう。
検索結果は、自動で反映されます。
![](https://takuweb1.com/wp-content/uploads/2020/07/2キャプチャ-27.jpg)
Reading progressbarを見付けたら
「今すぐインストール」をクリックします。
*稀に下の方や右側、または違うページにある場合があります。
![](https://takuweb1.com/wp-content/uploads/2020/07/3キャプチャ-26.jpg)
インストールが終わると「有効化」をクリックしましょう。
![](https://takuweb1.com/wp-content/uploads/2020/07/4キャプチャ-26.jpg)
有効化すると自動でインストール済みプラグインのページに移動します。
もし、WordPressバージョンの違いで移動しない場合は
自分で「プラグイン」→「インストール済みプラグイン」に移動しましょう。
![](https://takuweb1.com/wp-content/uploads/2020/07/5キャプチャ-24.jpg)
Reading progressbarのインストールは終わりです。
プログレスバーの初期設定
ここではプログレスバーの色や設置などを決めていきます。
簡単なのでサクッと進めていきましょう。
管理メニューから「設定」→「Reading progressbar」をクリックします。
![](https://takuweb1.com/wp-content/uploads/2020/07/6.png)
Reading progressbar optionsページが開くので
ここで各項目を設定していきます。
各項目の設定は画像の下にあるので参考にしてみてください。
![](https://takuweb1.com/wp-content/uploads/2020/07/7キャプチャ-17.jpg)
Progressbar height (pixels): プログレスバーの高さを決めます。
ここでは「5」にしています。
Foreground color: プログレスバーの色を決めます。
ここでは「赤色」にしてみました。
Background color: プログレスバーの背景色を決めます。
ここでは「灰色」にしてみました。
Progressbar position: プログレスバーの設置場所を選びます。
「Top」「Bottom」「Custom」
ここではわかりやすいように上部に設置する
「Top」にしています。
![](https://takuweb1.com/wp-content/uploads/2020/07/8キャプチャ-13.jpg)
Target fixed HTML element: HTMLをターゲットにしてバーを下に固定します。
class/id to stick the bar on it’s ここではデフォルトで使うので空白にしています。
bottom
Select templates to apply progressbar: プログレスバーを適応させる
テンプレートを選びます。
Front-page:フロントページ
Blog page:ブログページ
Archives and categories/・・・ :アーカイブとカテゴリー
Single post / page / custom post type:シングルページ
ここでは「Single post」にしています。
![](https://takuweb1.com/wp-content/uploads/2020/07/9キャプチャ-14.jpg)
Select post types to apply: プログレスバーを付ける投稿タイプを選びます。
progressbar 「投稿」「固定ページ」「メディア」
すべてにチェックを入れています。
最後に「変更を保存」をクリックしましょう。
これでプログレスバーの初期設定はOKですよ。
ブログ記事でプログレスバーの確認
それではブログ記事を開いて
実際にどのように表示されるのか確認していきましょう。
「サイトを表示」をクリックします。
![](https://takuweb1.com/wp-content/uploads/2020/07/10名称未設定-6.png)
トップページが開くので
適当にブログページを開きましょう。
![](https://takuweb1.com/wp-content/uploads/2020/07/11キャプチャ-12.jpg)
マウスで下の方へスクロールすると
画像のようにプログレスバーが左から右へ伸びますよ。
これだと訪問者もどこまで読んだのかわかりやすいですね。
![](https://takuweb1.com/wp-content/uploads/2020/07/12キャプチャ-10.jpg)
これでReading progressbarの紹介は終わりです。
プログレスバーの数値を指定することで
アンケート結果など作成できるものもありますよ。
また、ページの読み込み中にパーセントで表示するものもあります。
興味のある方はここより参考にしてみてください。
まとめ
記事の上から下への進行状況をプログレスバーで表示するプラグインでした。
ちょっとしたことですがこういうプログレスバーがあると読み手は便利ですよね。
このブログでも当てはまりますが
見出しが8個以上ある場合はプログレスバーがあるといいかもしれません。
ちなみにランニングページなどのアフィリエイトページには
不向きなので注意してください。
そこでこれをやらなきゃ損をするということで
ブログ維持のためにアフィリエイトを始めてみませんか。
大きく稼ぐには全力で挑む必要がありますが
ブログ維持費なら片手間でも大丈夫!
気になる方はここよりアフィリエイト会社(ASP)の紹介を見てみましょう。