スクロール量(既読率)をプログレスバーで表示するプラグイン「WP Reading Progress 」

ネットサーフィンをしていると、スクロールに応じて増減するバーを見かけることがあると思います。あのバーは「プログレスバー」というもので、主に進捗状況などを表す目的で使われています。

あれを表示していると、どことなくオシャレに見えませんか?

WordPressならプログレスバーも「WP Reading Progress」というプラグインで実装できちゃいます。テーマによっては調整が必要ですが、完璧に使えるように解説するので、ぜひ導入してみてください。

プラグインはテーマや他のプラグイン・WordPressのバージョン次第では、正常に動作しないことがあります。安全なプラグインのみを紹介しておりますが、導入される際は自己責任でお願いします。

目次

プログレスバーとは

プログレスバーとは、タスクの進捗状況を表す目的で表示されるバーのことです。ゲームのロード中に表示される「now loading…」のバーもプログレスバーですね。

当ブログのヘッダー下にある細くて青いバーです

プログレスバーを実装するメリット

プログレスバーを実装するメリット

プログレスバーを使えば「記事をどこまで読んだか」を見える化することができます。しかし、ブラウザには標準でスクロールバーが付いているため、必要性はあまりありません。(スクロールバーが小さいスマホならともかく)。

では、プログレスバーを実装するメリットとは何なのか? それは見た目がカッコいいから。これに尽きます。

特に昨今は有料テーマを使っている人が多いため、どのブログも似たり寄ったりなデザインになりがちです。プログレスバーを実装して、他のブログとデザインで差別化しましょう。

プラグインの導入でサイトが重くならないか?

結論から言えば、WP Reading Progressの導入前と後で表示速度に差は見られませんでした。(全く差が無いということはないと思いますが)

scrollpup.js」などを使えばプラグインなしで実装することも一応可能です。しかし、導入やカスタマイズに手間がかかる上、結局はJavascriptを読み込むため表示速度への影響もプラグインと大差ありません。

WordPressを使っているなら、プラグインの恩恵にあやかっちゃいましょう。WP Reading Progressは動作も軽く、最新バージョンにおける動作も確認されているので安心して使ってください。(2021.10.18時点)

WP Reading Progressの設定と使い方

それでは早速導入していきましょう。

インストールと有効化

まずはプラグインの新規追加から「WP Reading Progress」を検索して、インストールと有効化をしてください。

「WP Reading Progress」のインストール

初期設定

有効化まで終わったら使用前の設定をしていきます。

設定ページはサイドバーの「設定」→「WP Reading Progress」にあります。

「WP Reading Progress」の設定ボタン

設定は1ページのみで完結していますが、全て英語なのでひとつずつ解説していきます。

「WP Reading Progress」の設定ページ

表示とデザインの設定

まずはページ上部のデザイン関係の設定をしていきます。赤枠の部分を順に入力していってください。

WP Progress Readingの表示とデザインの設定
・Stick the bar to this element

プログレスバーを表示する位置です。特定のパーツの下に表示したい場合は、クラス名を入力します。(クラス名の調べ方は後ほど解説)

固定ヘッダーやアドセンスの自動広告などを使用している人は、表示位置が被らないよう注意してください。

topページ最上部
bottomページ最下部
クラス名そのクラスの下(ヘッダーを固定している際などに使用)
・How to stick

プログレスバーの幅が大きすぎる場合に使用します。とりあえずチェックは入れないでおきましょう。

・Color of the progress bar

プログレスバーの色を指定します。ブログカラーに合った見やすい色を設定しましょう。

・Progress bar thickness

プログレスバーの太さを設定します。値は.vhかpxで指定できます。私は.vhに馴染がないのでpxを使用しています。

・Aria label

プログレスバーのラベル(名前)を設定できます。無理に設定する必要はありません。

計測と表示ページの設定

続いてバーの計測と表示するコンテンツを設定していきます。赤枠の部分はチェックを入れましょう。

WP Progress Readingの計測と表示ページの設定
・Make bar start at 0%

プログレスバーを0%から開始する設定。ここは要チェックです。

・On single post page

ページ全体で進行状況(バーの長さ)を測るかどうかの設定です。ここもチェックを入れます。

・Show reading progress on

プログレスバーを実装するページを選択します。post(投稿)はチェックを入れるとして、page(固定ページ)などはお好みで設定してください。

・And on their archives

アーカイブ化するかどうかの設定です。よく分かりませんでしたが、設定しても変化がないため、チェックは必要ありません。

・No css

CSSの適用対象外にする設定です。チェックは必要ありません。

設定は以上です。
忘れずSave Settingsをクリックしましょう。

プログレスバーを固定ヘッダーの下に表示する方法

プログレスバーをヘッダーの下に表示する場合は、一番目の設定「Stick the bar to this element」の項目にヘッダーのクラス名(関数名)を入力する必要があります。

よく分からないという人のためにも流れを解説しておきますね。

固定ヘッダーのクラス名を調べる

今回はChromeのデベロッパーツールを使用して、クラス名を調べていきます。

ちなみに、テーマがSWELLなら「.l-fixHeader」です。
ここは飛ばして構いません。

デベロッパーツールを開く

Chromeで自分のブログの適当なページへ入ったら、URL欄の右にある三点マークをクリック。

「その他のツール」→「デベロッパーツール」 をクリックします。

デベロッパーツールで固定ヘッダーのクラス名を確認する1
固定ヘッダーを指定する

デベロッパーツールが開いたら、ページを適当に下にスクロールして固定ヘッダーを登場させます。(ヘッダーと固定ヘッダーでクラス名が違う可能性があるため)

つづいて、ツールの左上にある矢印マークをクリックして、固定ヘッダーへカーソルを持っていきます。

固定ヘッダー全体を覆うように色が表示されたらクリックします。

デベロッパーツールで固定ヘッダーのクラス名を確認する2
クラス名を確認

ツール画面の右側「スタイル」のタブに表示されたクラス名が、固定ヘッダーのクラス名です。
(“::before”はその前を表す要素なので無視)

デベロッパーツールで固定ヘッダーのクラス名を確認する3

クラス名が分かったら、プラグインの設定「Stick the bar to this element」に調べたクラス名を入力します。スマホと表示が一緒ならこれで設定完了です。

PCとモバイルで表示位置が異なる場合の対処法

プラグインの設定ではひとつのクラス名しか指定できません。そのため、クラス名がPC・モバイルで異なる場合はCSSによる調整が必要です。

モバイルのプログレスバーを位置調整するCSS

以下のCSSをスタイルシートに貼り付ければ、モバイルのプログレスバーの位置を調整できます。
※モバイルの固定ヘッダーの高さ(height)が必要なので、デベロッパーツールなどで調べておいてください

/*スマホの時だけプログレスバーの位置を調整する*/
@media only screen and (max-width:480px){
	#ruigehond006_inner{
		position:fixed;
		top:44px; /*ここに固定ヘッダーの高さ*/
	}

・貼り付け場所:外観>テーマ編集>style.css
・5行目の”44px”を自分の固定ヘッダーの高さに変更してください
・テーマがSWELLの場合は、カスタマイズのヘッダー設定で高さを確認できます

まとめ

以上、WordPressプラグイン「WP Reading Progress」の解説でした。

プログレスバーは派手じゃないながらも機械的なオシャレさがあります。シンプルにセンスがある感じを演出したい人は、ぜひ一度導入してみてください。

当ブログでは他にも色々なプラグインを紹介しています。面白いギミックを追加できるプラグインも紹介していくので、よければご覧ください。

目次
目次
閉じる