ワードプレスでルビ(フリガナ)を文字の上に振る方法〜プラグインで楽々!?と思いきや結局1文字1文字振っていくのね

HTMLが苦手でもワードプレスはレスポンシブ対応できる

ワードプレス編集画面

筆者は最近、お仕事で
ワードプレスでLP(ランディングページ)を
作成させていただいております。
訓練校の授業でも、ワードプレスの講義を
少しだけ取り入れておりました。

ちなみに当サイトも
ワードプレスで作成しています。
HTMLが苦手な筆者もレスポンシブ対応できるので
本当に本当に、重宝しております。

今後は、ワードプレスのちょっとしたノウハウに関して
書く機会も増えるかと思います。

ルビを振るプラグイン「WP-Yomigana」インストール

クライアントの「ルビを振ってほしい」という要望に対応すべく、
プラグイン「WP-Yomigana」をインストール!

・・・したいところですが、
新しいプラグインを安易に入れるのはリスキーなので、
このサイトで実験してみているところです。

それぞれのサイトによって
プラグインとプラグインの相性が干渉して
思いもよらないエラーが起こる可能性があります。

ですので、バックアップを取るなどして
元に戻れるようにしてくださいね。

当サイトで問題がなくても
あなたのサイトでは問題が発生する可能性があります。
(好きではない言葉なのですがプラグイン導入は「自己責任」でお願いします)

プラグインを導入する方法→「プラグイン」から新規追加

プラグインを導入するには
「プラグイン」から新規追加で検索します。

ここでは「WP-Yomigana」と入力して検索。

なんだか凄い文言のサムネイルですが
「今すぐインストール」して「有効化」します。

すると・・・

設定の中に「ルビ設定」が表示されるので

「rubyタグのボタン」の「1行目に表示する」を選び、
変更を保存します。

投稿ページでルビを振ってみる!

プラグインを導入したので
早速ルビを振ってみようと思います!

素材は上の2行。




ところがです。




「Gutenberg(ブロックエディタ)問題」でルビが振れません(泣

Gutenberg(ブロックエディタ)問題を解消する


過去に、久しぶりにブログを更新しようとして
ワードプレスの編集が
新しい「Gutenberg(ブロックエディタ)」に変更されていて、
ビビったことがあります。

せっかくプラグインを入れたのに、
旧エディターの「ビジュアル」エディターでないと
ルビの作成ができないので

WordPressのバージョン4.9まで採用されていた
「クラシックエディター」表示ができるようにしたいと思います。

プラグイン「Classic Editor」でクラシックエディターに戻す

さて、クラシックエディターに戻すために
プラグインを導入するに至ったのですが、

ワードプレスは何かしようとしたら、
その準備のために違う何かをして、
また違う何かをして、と
YOU TUBE沼に似た状態になります。
そして、どんどんプラグインが増えていきます。

自制との戦いです。

筆者の目先のゴールは、クラシックエディターに戻すことなので、

プラグイン「Classic Editor」をインストール、
有効化してみると、
投稿画面がクラシックエディターに戻ります!

クラシックエディターとGutenbergを併用したい場合

「慣れ」って大事です。

Gutenbergに変わっていて対応できなかった痛い記憶を教訓に、
新しいGutenbergも使える状態にしておきたい。

クラシックエディターばかり使っていてはダメ。

その場合は、投稿設定を変更します。

投稿設定

設定の「投稿設定」で
旧エディターにチェックし
さらに
「ユーザーにエディターの切り替えを許可」もチェックします。

投稿一覧ページを見てみると

投稿一覧


編集(ブロックエディター)と編集(旧エディター)、
編集方法を両方から選択できるようになります。

 

「ルビを振ってみよう」に戻ります

このように、
ワードプレスは作業が行ったり来たり
脱線の連続で
「何やってたっけ?」ってなります。

私が今、何をやってたかというと
ルビを振りたいのでした。

ということで
投稿を旧エディターで編集してみると・・・

ツールバールビ
ツールバーの一番左に「ルビ」が
表示されています!

早速というには、脱線して時間がかかり過ぎてるので

遅速!!ルビを振ってみます。

文字列を選択して
「ルビ」をクリックします。

ルビ画面「親文字」と「ルビ」が表示されるので、
「ルビ」にふりがなを入力すると・・・



〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

プラグインを導入どうにゅうしたので

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜




2行目も振ってみます。




〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

早速さっそくルビをってみようとおもいます!

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜


感動・・・・


文字を選択、
「ルビ」をクリック、
ふりがなを入力、
OKをカチっ

という作業の繰り返し。
単純作業で楽しいです。


頭脳をリフレッシュできるので
こんなバイトがあったら、やってみたいなあ・・・。

 

というわけで、
ワードプレスのプラグインを使って
ルビを振ってみましたが

旧エディターもGutenbergも両方使える方法が
意外な収穫でした!

ワードプレス編集画面
Share on twitter
Twitter