ネットサーフィンをしていると、スクロールに応じて増減するバーを見かけることがあると思います。あのバーは「プログレスバー」というもので、主に進捗状況などを表す目的で使われています。
あれを表示していると、どことなくオシャレに見えませんか？
WordPressならプログレスバーも「WP Reading Progress」というプラグインで実装できちゃいます。テーマによっては調整が必要ですが、完璧に使えるように解説するので、ぜひ導入してみてください。
プログレスバーとは
プログレスバーとは、タスクの進捗状況を表す目的で表示されるバーのことです。ゲームのロード中に表示される「now loading…」のバーもプログレスバーですね。
WP Reading Progressを使えば、このようなプログレスバーを実装することができます。
プログレスバーを実装するメリット
プログレスバーを使えば「記事をどこまで読んだか」を見える化することができます。しかし、ブラウザには標準でスクロールバーが付いているため、必要性はあまりありません。(スクロールバーが小さいスマホならともかく)。
では、プログレスバーを実装するメリットとは何なのか？ それは見た目がカッコいいから。これに尽きます。
特に昨今は有料テーマを使っている人が多いため、どのブログも似たり寄ったりなデザインになりがちです。プログレスバーを実装して、他のブログとデザインで差別化しましょう。
プラグインの導入でサイトが重くならないか？
結論から言えば、WP Reading Progressの導入前と後で表示速度に差は見られませんでした。(全く差が無いということはないと思いますが)
「scrollpup.js」などを使えばプラグインなしで実装することも一応可能です。しかし、導入やカスタマイズに手間がかかる上、結局はJavascriptを読み込むため表示速度への影響もプラグインと大差ありません。
WordPressを使っているなら、プラグインの恩恵にあやかっちゃいましょう。WP Reading Progressは動作も軽く、最新バージョンにおける動作も確認されているので安心して使ってください。(2021.10.18時点)
WP Reading Progressの設定と使い方
それでは早速導入していきましょう。
インストールと有効化
まずはプラグインの新規追加から「WP Reading Progress」を検索して、インストールと有効化をしてください。
初期設定
有効化まで終わったら使用前の設定をしていきます。
設定ページはサイドバーの「設定」→「WP Reading Progress」にあります。
設定は1ページのみで完結していますが、全て英語なのでひとつずつ解説していきます。
表示とデザインの設定
まずはページ上部のデザイン関係の設定をしていきます。赤枠の部分を順に入力していってください。
| Stick the bar to this element | プログレスバーを表示する位置 top(最上部)、bottom(最下部)、クラス名(ヘッダー固定時などに使用) |
|---|---|
| How to stick | プログレスバーの幅が大きすぎる場合に使用 とりあえずはチェック不要です |
| Color of the progress bar | プログレスバーの色 ブログカラーに合った見やすい色を指定しましょう |
| Progress bar thickness | プログレスバーの太さ 値は .vh(画面に対する割合) か .px(絶対値) で指定できます |
| Aria label | プログレスバーのラベル（名前） 設定しなくても問題ありません |
補足：Stick the bar to this element
特定のパーツの下に表示したい場合は、クラス名を入力します。(クラス名の調べ方は後ほど解説)
固定ヘッダーやアドセンスの自動広告などを使用している人は、表示位置が被らないよう注意してください。
計測と表示ページの設定
続いてバーの計測と表示するコンテンツを設定していきます。赤枠の部分はチェックを入れましょう。
| Make bar start at 0% | プログレスバーを0%から開始する設定 チェックを入れない場合は10%前後の長さから伸びます |
|---|---|
| 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欄の右にある三点マークをクリック。
「その他のツール」→「デベロッパーツール」 をクリックします。
- 固定ヘッダーを指定する
-
デベロッパーツールが開いたら、ページを適当に下にスクロールして固定ヘッダーを登場させます。(ヘッダーと固定ヘッダーでクラス名が違う可能性があるため)
つづいて、ツールの左上にある矢印マークをクリックして、固定ヘッダーへカーソルを持っていきます。
固定ヘッダー全体を覆うように色が表示されたらクリックします。
- クラス名を確認
-
ツール画面の右側「スタイル」のタブに表示されたクラス名が、固定ヘッダーのクラス名です。
(“::before”はその前を表す要素なので無視)
クラス名が分かったら、プラグインの設定「Stick the bar to this element」に調べたクラス名を入力します。スマホと表示が一緒ならこれで設定完了です。
PCとモバイルで表示位置が異なる場合の対処法
固定ヘッダーの高さがデバイスによって異なる場合、デバイス毎に位置を調整する必要があります。
モバイルのプログレスバーを位置調整するCSS
以下のCSSを使えば、モバイルのプログレスバーの位置を変更できます。
※モバイルの固定ヘッダーの高さ(height)が必要なので、デベロッパーツールなどで調べておいてください
/*スマホの時だけプログレスバーの位置を調整する*/
@media only screen and (max-width:480px){
#ruigehond006_inner{
position:fixed;
top:〇〇px; /*ここに固定ヘッダーの高さ*/
}以上のように、プログレスバーのデザインを弄る場合は”#ruigehond006_inner“を編集しましょう。
・貼り付け場所はスタイルシート(style.css)、もしくはカスタマイズの追加CSS
・5行目に固定ヘッダーの高さ(height)を入力する
・タブレットも含める場合は1行目を480px→959pxに変更
まとめ
以上、WordPressプラグイン「WP Reading Progress」の解説でした。
プログレスバーは派手じゃないながらも機械的なオシャレさがあります。シンプルにセンスがある感じを演出したい人は、ぜひ一度導入してみてください。
当ブログでは他にも色々なプラグインを紹介しています。面白いギミックを追加できるプラグインも紹介していくので、よければご覧ください。