Luxeritas(ルクセリタス)で、読了時間を新しい方法で表示してみた。

2018年6月20日日々雑感, 日進月歩Luxeritas(ルクセリタス), Word Press(ワードプレス), そうだったのか!

読了時間: 約441

記事を再編集するまでしばし御猶予を!

2018年11月24日 追記
せっかく御覧いただいている記事ですが、コードを参照・コピーさせていただいていた
ブログ「スズシンラボオフィシャル」が最近リセットされてしまったらしく、参照先のリンクがなくなってしまいました。
コードを当ブログ中に表示させる機能などを調べて、改めて記事を「読了時間」の表示方法を御紹介いたします。

なお、以下の記事は、リンク切れの状態なので、コードのコピーなどはできませんが、
手順だけはわかるようになっておりますので、予習がてらご覧ください。

2018年11月末までにはなんとかしたいと思っていますので、今しばらくの御猶予を賜りますようお願い申し上げます。

編集前の記事

読了時間を表示するため、はじめは専用のプラグインを使っていました。
しかし、プラグインを使わなくても、読了時間を表示させることができるとわかり、
とある方のブログを参考にしながら表示させました。
それが以下の記事です。

しかし、最近この方のブログは刷新され、この記事に張っていたリンク先がなくなってしまったので、
上記の記事もがっつり参考にしていただくことはできなくなってしまいました。

あらたな方法で読了時間を表示する方法を示していらっしゃるので、
今回は、それを参考にしながら、
Luxeritas(ルクセリタス)ならどうすればいいかを書いていきます。

ちなみに、参考にさせていただくのは、「スズシンラボオフィシャルブログ」の以下の記事です。コードそのものは、リンクを張っておくので、そちらからコピー&ペーストしてください。
WordPress ブログ記事の読了時間を表示する方法

プラグイン「Code Snippets」を追加する

Word Press(ワードプレス)ダッシュボード >プラグイン>新規追加で、プラグイン追加のページに飛びます。
プラグインを追加のページ>「プラグインの検索」ボックスに、
「Code Snippets」を記入して検索します。
Code Snippetsをインストールして「有効化」します。
Left Caption

Lukia

ちなみに、snippet とは、「切れ端」「断片」という意味だそうです。
下記の記事を読んでみたけど、さっぱりわかりませんでした。(笑)

Code Snippetsにスニペットを追加


Word Press(ワードプレス)ダッシュボード>プラグイン>インストール済みプラグインのページで、CodeSnippetsが有効化されているかを再度確認して、上記画像で赤い四角で囲まれたSnippetsをクリックします。

上記画像の赤い四角で囲んであるAdd New(新規追加)か、Perhaps you would like to add a new one?(もしかして新しく追加したいですか?)をクリックします。
Left Caption

Lukia

「おっと!まだスニペットがひとつもないみたいです。」なんて、
作者の遊び心を感じますね。
スズシンラボオフィシャルブログの「WordPress ブログ記事の読了時間を表示する方法」記事内、
2.2 Code Snippetsに読了時間表示用スニペットを追加 を開いておきます。
スニペットのタイトルを記入します。
スズシンラボオフィシャルブログの「WordPress ブログ記事の読了時間を表示する方法」記事内、「2.2 Code Snippetsに読了時間表示用スニペットを追加」  より、
コードをコピーさせてもらい、上記画像の青い四角部分に貼り付けます。コード2行目の数字が、1分間に読む文字数にあたりますので、当ブログでは700字/分に設定するため、700に変更しました。
Only run on site font-end のボタンをオンにします。
Save Changes and Activate(保存して有効化)をクリックして終了します。

これまでに「読了時間を表示」させていたら・・・。

今回初めて「読了時間を表示」させる方、またはプラグインを使って「読了時間を表示」していた方は、ここを飛ばしてもらってもよいです。

しかし、プラグインを使わずに「読了時間を表示」していた方は、
おそらくfunctions.phpにコードを書き込んでいると思いますので、そちらを削除しておきましょう。

Luxeritas(ルクセリタス)>子テーマの編集>functions.phpタブ  に移動します。

「ReadingTime」というようなコードがあると思うので、そのコードを消します。

記事での「読了時間」の表示をカスタマイズする。

スズシンラボオフィシャルブログの「WordPress ブログ記事の読了時間を表示する方法」記事内、「2.3 CSSの設定」 を開いておきます。
Luxeritas(ルクセリタス)>子テーマの編集>style.cssタブ  を開きます。
スズシンラボオフィシャルブログの「WordPress ブログ記事の読了時間を表示する方法」記事内、「2.3 CSSの設定」 から、CSSのコードをコピーさせてもらいます。
style.cssタブ内の37行目以降にコードを貼り付けます。
Left Caption

Lukia

1行目から36行目までは、Luxeritas(ルクセリタス)の作者るなさんからのメッセージが茶色の文字で書かれていますので、絶対にいじらないようにしましょう
最悪、動かなくなるおそれがあります。
点線の色と、時間の色を変えたければ変えます。
当ブログでは、点線の色#aaaaaaは変更しませんでしたが、
分数・秒数の色は、#6d9eed から #0004fc に変更しました。
保存して終了します。

RGBで思い出しました。

ちなみに、#0004fc などをRGB値といいます。
RGBとは、Red・Green・Blue(赤・緑・青)の頭文字です。
左から2桁ずつ割り当てられています。
そして、一桁あたりは16進数がもちいられています。

Lukia_74

Lukia

私たちの日常生活では、10進数を使っています。
これは、一つの位に、0~9までの十個の数が入ったら、位が一つ繰り上がる。という方式です。
16進数というのは、一つの位に十六個の数が入る。というもので、十七個目の数でひとつ位が繰り上がります。
ややこしいですよね。(笑)

16進数ともなれば、10以降を1桁で表すことができないため、10~15にアルファベットを割り当てています。
ゆえに各桁は半角英数字の「0・1・2・3・4・5・6・7・8・9・A・B・C・D・E・F」と表されます。
ちなみに、アルファベットは大文字・小文字の区別はありません。好みの問題です。

一桁に16種類の文字があるわけですから、計算上は、 $$\Large 16^6 = 16,777,216$$

色を表すことができます。(1600万色って・・・。)

ちなみに、#000000は黒、#FFFFFFは白。
#FF0000が赤、#00FF00が緑、#0000FFが青です。

ちなみに、「読了時間を表示」するCSSで、点線のRGB値が#aaaaaaとなっていますが、これは灰色を示します。
私は、#C0C0C0の灰色が好きでよく使います。
また当ブログの基本の文字色は、#4E4E4Eと黒味の強い灰色を用いています。

ネット上には色見本のサイトもたくさんありますので、自分のお気に入りの色を見つけてカスタマイズし、自分のサイトにより深い愛着がわけば幸いです。

カテゴリー