おすすめ機能

WordPressで文字の上にフリガナ(ルビ)や傍点を振る方法【超簡単!】

殿と鳥

こんにちわ高桑たかくわです。

 

今回は、WordPress上でのルビの振り方・傍点(ぼうてん)の打ち方 について説明していきます。

エリザベス
エリザベス

ちなみに

ルビっていうのは文字の上にフリガナを振る、

高桑たかくわです。←これ

 

傍点(ぼうてん)ていうのは、その語句に注意を向けさせる為に使う

高桑・・です。←これのことを言います。

 

さて、ブログを運営していると、どうしても難しい漢字を使わないといけない時、または、使った方が文章の流れ的に分かりやすい時ってありますよね?そんな時

 

高桑(たかくわ)です。

 

というように、文字の後ろに注釈として、カッコ書きするのが一般的です。ですが、

まさお
まさお
文字の上にフリガナ(ルビ)を打つのも、かっこ良くね?!

という訳で今回は、Wordpressで文字の上にフリガナ(ルビ)を振る方法と、傍点(ぼうてん)を打つ方法について解説します。

WordPressで文字の上にフリガナ(ルビ)を振る方法

殿と鳥

WordPressでは、 HTMLで直接ルビを振る方法と、プラグインを使う方法の2種類あります。

 

ですが、ルビってそんなに多用するものでもないので、わざわざプラグインを入れるまでもないかなって思います^^なのでココでは、HTMLで直接ルビを振る方法について解説していきますね!

2ステップ!HTMLでフリガナ(ルビ)を振る手順

①テキストモードに切り替えます

WordPressの投稿画面には、『ビジュアル』『テキスト』といった2種類のモードがあります。今回は『テキスト』を使ってフリガナ(ルビ)を振っていきましょう^^

Wordpress投稿画面

ビジュアルエディタは、文字の装飾を自動的にHTMLに変換するモード

テキストエディタは、HTMLを直接編集するモードです。

エリザベス
エリザベス
今回はHTMLを直接入力してルビを振るので、『テキスト』を使うんだね

 

②HTMLコードを入れてみよう

テキストモードに、以下のコードを入れます。

<ruby>ここに文字列<rt>ここにフリガナ</rt></ruby>

ここに文字列のところに→漢字

ここにフリガナのところに→フリガナ(ルビ)

 

Wordpressにルビ

ビジュアルモードに切り替えると・・・

Wordpress投稿画面

嬉しいので、拡大!!デデデデデン!!

高桑

やっぱり嬉しいので拡大!!!『どうも、高桑です!!』

高桑

 

 

 

高桑やで!

高桑

WordPressで文字の上に傍点(ぼうてん)を打つ方法

傍点の打ち方

冒頭でも説明しましたが、傍点とは

 

高桑・・です。こんな感じで、その語句に注意を向けさせる為に使うものです。

厳密に言うと傍点を打つというより、HTMLで傍点ぽく見せるといった方が正解かもしれません

傍点を打つのも、ルビを振る方法と何ら変わりありません。

こちらも2ステップ!HTMLで傍点(傍点)を打つ手順

①テキストモードに切り替えます

Wordpress投稿画面

 

②以下のコードを入力します

 <ruby>ここに文字列<rt>ここに傍点</rt></ruby>

ここに文字列のところに→ 文字(語句)

ここにフリガナのところに→・・・・(文字の数に合わせて『・』)を入れる。

 

Wordpressで傍点

ビジュアルモードに切り替えると

Wordpress投稿画面

同じ文章(一文)に、続けてフリガナ(ルビ)や傍点を入れる方法

 

おな文章ぶんしょうつづけて、ルビ・・方法ほうほう

このように、一文に続けてルビや傍点を振ることも出来ます。方法としては、上記で説明したことの応用になります。

上記で説明したコード

<ruby>ここに文字列<rt>ここにフリガナ</rt></ruby>

これを使うだけなのですが、入力したものを改めて見てみると・・・

<ruby>同<rt>おな</rt></ruby><ruby>文章<rt>ぶんしょう</rt></ruby><ruby>続<rt>つづ</rt></ruby>けて、<ruby>ルビ<rt>・・</rt></ruby><ruby>振<rt>ふ</rt></ruby><ruby>方法<rt>ほうほう</rt></ruby>

まさお
まさお
わっけわかんないよね。ムカつくよね。

分かりやすく分けてみるとこんな感じ!

<ruby>同<rt>おな</rt></ruby>

<ruby>文章<rt>ぶんしょう</rt></ruby>

<ruby>続<rt>つづ</rt></ruby>

けて、

<ruby>ルビ<rt>・・</rt></ruby>

<ruby>振<rt>ふ</rt></ruby>

<ruby>方法<rt>ほうほう</rt></ruby>

続けて使うと見た目ややこしいですが、 ルビや傍点を振る文字にのみ、コードを使っているだけですよ!

ブログでフリガナ(ルビ)や傍点を使うと便利な場面は?

漫画

ブログでは文章を書くときに、ルビや傍点を使わなくても困ることって、特にないかと思います。ですが、使った方が便利!分かりやすい!そんな場面もありますよね。

 

ここからは、 ルビや傍点を使うと良い場面について、解説していきます。

英語の訳

 

アナと雪の女王Frozen

こんにちわHELLO

 

こんな感じで使うのも良いかも知れません。

ひらがなが続くときパート1

読みづらい漢字ってありますよね?そんな時あえて、ひらがなにする人も多いかと思います。

しかし、一文にひらがなが多い(続く)場合、ひらがなにすることで逆に読みづらさを感じてしまう時もありますよね。

 

そんな時は、

WordPressの初期設定は、ややこしくつまづくことが多いです。

 

WordPressの初期設定は、ややこしくつまづくことが多いです。

 

というように、漢字の上にルビを振るのも良いかも知れません^^

ひらがなが続くときパート2

上記のように、 ひらがなが続く時に漢字を使わず、傍点を打つのも良いですね^^

WordPressの初期設定は、ややこしくつまづく・・・・ことが多いです。

 

少し見やすくなりましたね!!

難しい地名や駅名

 

放出はなてん

吹田すいた

中百舌鳥なかもず

十三じゅうそう

大阪の地名(駅名)なのですが、特殊な読み方をする文字に、ルビを振ってみてはどうでしょうか?^^

同字異音語

同字異音とは、同じ漢字で異なる複数の読みがあること

例えば

下手・・・この文字には『へた』『しもて』『したて』『げしゅ』と、複数の読み方があります

 

読み手は話の流れで、どの読み方が適切か判断しながら読むものですが、「どうだろう?」と不安に感じる時は、ルビを打つと良いですね!

漢字とは違う読みをしてほしい時(当て字)

機械マシン

本気マジ

理由わけ

時間とき

子供に読ませたいブログ記事

自由研究・読書感想文の書き方など、子供に読ませたい記事は、ルビを振ると親切ですよね!

まとめ:Wordpressで文字の上にフリガナを振る方法は簡単!

たったの2ステップで出来るなんて、簡単ですよね。

 

フリガナ(ルビ)や傍点は読み手から見て、あった方がより読みやすいな。そう感じるところに使ってみると良いかも知れませんね。

 

おっしまーい!^^

ABOUT ME
のりこ
(株)みらいきって代表|メディア編集長|文章を書くことと、コンテンツ制作が大好き|キャリアコンサルタント|3姉妹の母|大阪府民| お腹が減ると、ちょっと不機嫌になります!鮭おにぎりが好き