WordPress設定

Read Meter 推定読書時間と進捗状況バーを表示 設定方法と使い方読み終わるまで 1

Read Meter 推定読書時間と進捗状況バーを表示 設定方法と使い方 アイキャッチ

ワードプレス(WordPress)のRead Meterプラグインの設定方法と使い方を解説します。

この記事を見ることで得られるメリット

  • Read Meterの使い方と詳細な設定方法がわかります

Read Meterで実現できること

 Read Meterを導入すると、投稿ページに推定読書時間と進捗バーを表示させることができます。

ショートコードを使って任意の位置に表示させることもできます。

Read Meterのインストール方法

Read MeterラグインをWordPressにインストールする方法を解説します。

  1. WordPressのダッシュボード(管理者画面)の「プラグイン」をクリックします
  2. 「新規プラグインを追加」をクリックします
  3. 検索ボックスに”Read Meter”と入力すると下に検索結果が表示されます
  4. ”Read Meter”の今すぐインストールボタンをクリックします
WoredPressのダッシュボード(管理者画面)の新規プラグイン追加画面WoredPressのダッシュボード(管理者画面)の新規プラグイン追加画面
“Read Meter”のインストール完了画面“Read Meter”のインストール完了画面

↑Read Meterのインストールが完了すると有効化ボタンが表示されるのでクリックします。

"Read Meter"を有効化すると表示されるプラグイン画面“Read Meter”を有効化すると表示されるプラグイン画面

これでRead Meterのインストールと有効化は完了です。

Read Meterの設定と使い方

Read Meterプラグインを有効化するとダッシュボード(管理画面)の設定の中に「Read Meter」が表示されます↓

ダッシュボード(管理画面)の設定の中にある「Read Meter」ダッシュボード(管理画面)の設定の中にある「Read Meter」

Read Meterの設定項目

Read Meterには下記の設定項目があります。 

  • General Settings(一般設定):投稿タイプ、単語数、画像とコメントを含めるか否か
  • Read Time(読み取り時間):推定読書時間の表示設定
  • Progress Bar(プログレスバー):進捗バーの表示設定
  • Getting Started(はじめる):使い方とショートコード

設定画面はすべて英語表記なので、以降は日本語に翻訳した画像を載せています。 

General Settings(一般設定)

Read Meterプラグインの設定画面 General Settings(一般設定)Read Meterプラグインの設定画面 General Settings(一般設定)

設定画面の上から

  • 投稿タイプを選択してください:初期設定は投稿です
  • 1分あたりの単語数:初期設定は275です
  • コメントを含める:推定読書時間にコメントのテキストを含めるか否か
  • 画像を含める:推定読書時間に画像を含めるか否か

設定変更後は保存ボタンを押して保存します。

Read Time(読み取り時間)

Read Meterプラグインの設定画面 Read Time(読み取り時間)Read Meterプラグインの設定画面 Read Time(読み取り時間)

設定画面の上から

  • 推定読み取り時間を表示する:推定読書時間を表示するページを選択。初期設定は単一の投稿
  • 読み取り時間位置:推定読書時間を表示する位置を選択。初期設定はコンテンツの上
  • 読書時間のプレフィックス:推定読書時間の前の文言。初期設定はReading Time
  • 読書時間の後置:推定読書時間の後ろの文言。初期設定はmins
  • フォントサイズ:推定読書時間の文言の文字サイズ。初期設定は15px
  • マージン:定読書時間の文言の文字の外側の余白。初期設定は全て1px
  • パディング:定読書時間の文言の文字の内側の余白。初期設定は上下が0.5em、左右が0.7em
  • 背景色:定読書時間の背景色。初期設定#eeeeee
  • テキストの色:定読書時間の文字色。初期設定#333333

設定変更後は保存ボタンを押して保存します。

Progress Bar(プログレスバー)

Read Meterプラグインの設定画面 Progress Bar(プログレスバー) その1Read Meterプラグインの設定画面 Progress Bar(プログレスバー) その1

進捗状況を表示するプログレスバーの表示位置を下記の3箇所から選択できます。

  • なし ※初期設定
  • ページの先頭
  • ページの下
Read Meterプラグインの設定画面 Progress Bar(プログレスバー) その2Read Meterプラグインの設定画面 Progress Bar(プログレスバー) その2

表示位置を”ページの先頭”or”ページの下”を選択すると下記の設定を変更できます。

  • スタイル:普通とグラデーション(勾配)を選択。初期設定は普通
  • 背景色:進捗バーの背景色を選択。初期設定#e8d5ff
  • 原色:進捗バーの原色を選択。初期設定#5540D9
  • 二次色:スタイルがグラデーション(勾配)選択時のみ表示。グラデーションの2つ目の色を選択。初期設定#ee7fff
  • バーの厚さ:進捗バーの太さを変更。初期設定は12px

設定変更後は保存ボタンを押して保存します。

Getting Started(はじめる)

Read Meterプラグインの設定画面 Getting Started(はじめる)Read Meterプラグインの設定画面 Getting Started(はじめる)

↑使い方とショートコードが載っています。

推定読書時間の表示確認

投稿記事に表示された推定読書時間(初期設定)投稿記事に表示された推定読書時間(初期設定)

↑記事上部に表示させた初期設定時の推定読書時間(赤枠部分)です。
アイキャッチ画像の下に表示されます。

文言を日本語に変更

Read Meterプラグインの設定画面で推定読書時間の文言を日本語に変更Read Meterプラグインの設定画面で推定読書時間の文言を日本語に変更

↑上の画像のように、文言を日本語に変更して表示させてみました。

投稿記事に表示された推定読書時間(文言を日本語に変更)投稿記事に表示された推定読書時間(文言を日本語に変更)

↑日本語の文言に変更し、記事上部に表示させた初期設定時の推定読書時間(赤枠部分)です。

進捗バー(プログレスバー)の表示確認

ページの先頭に表示された進捗バーページの先頭に表示された進捗バー
ページの下に表示された進捗バーページの下に表示された進捗バー

↑色や太さはすべて初期設定状態の進捗バーです。

ショートコード

下記のショートコードを使って任意の位置に推定読書時間を表示させることもできます。

[[read_meter]]

表示が重複するので設定項目の”推定読み取り時間を表示する(Select Post Types )”はすべてオフにします。

実際にRead Meterを使った感想とメリットデメリット

実際にRead Meterを使ってみた感じたメリットとデメリットです。

Read Meterのメリット

設定で簡単に文字のサイズ、色、背景色などを変更でき、CSSなどの知識がなくても自分好みのデザインにカスタマイズできます。

進捗バーはデフォルトで非表示になっているので、そもそも不要な場合は設定変更の手間が掛かりません。

Read Meterのデメリット

設定画面が英語なので少々意味が判り難い点があります。

まとめ

Read Meterは簡単に推定読書時間を表示させることができ、読書状況の進捗バーを表示させることができるプラグインです。

他の他の推定読書時間表示プラグインよりも、カスタマイズ範囲が広いので、自分好みのデザインに簡単に変更できます。

例えば、一般設定のマージン(Margin)のLEFTの値を400等に変更して、推定読書時間の表示位置を右寄せにすることもできます。

さらに、ショートコードを使って任意の位置に表示させることもできるので、ウィジェット機能を使って、記事の上部などにも表示させることができます。

設定項目を変更するだけで柔軟にデザインをカスタマイズでき、使い勝手が良いのでおすすめの推定読書時間表示プラグインです。