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

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

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

ちなみに

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

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

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

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

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

高桑（たかくわ）です。

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

文字の上にフリガナ（ルビ）を打つのも、かっこ良くね？！

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

概要 [目次を表示]

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

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

ですが、ルビってそんなに多用するものでもないので、わざわざプラグインを入れるまでもないかなって思います^^

なのでココでは、HTMLで直接ルビを振る方法について解説していきますね！

プラグインを使ってフリガナ（ルビ）を振る方法について知りたい方は、

⇒WordPressの投稿画面とうこうがめんでルビ（ふりがな）を付けるプラグインWP-Yomiganaのご紹介

2ステップ！HTMLでフリガナ（ルビ）を振る手順

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

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

豆知識

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

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

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

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

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

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

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

ここにフリガナのところに→ フリガナ（ルビ）を入れるんだね！

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

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

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

高桑やで！

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

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

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

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

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

めっちゃ簡単でござる！

こちらも2ステップ！ＨＴＭＬで傍点（傍点）を打つ手順

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

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

<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>

る

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

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

ブログでフリガナ（ルビ）や傍点を使うと便利な場面は？

ブログでは文章を書くときに、ルビや傍点を使わなくても困ることって、特にないかと思います。

ですが、使った方が便利！分かりやすい！そんな場面もありますよね^^

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

英語の訳

アナと雪の女王Frozen

こんにちわHELLO

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

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

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

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

そんな時は、

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

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

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

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

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

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

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

難しい地名や駅名

放出はなてん

吹田すいた

中百舌鳥なかもず

十三じゅうそう

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

同字異音語

同字異音とは、同じ漢字で異なる複数の読みがある事をいうよ

例えば

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

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

漢字とは違う読みをしてほしい時（当て字）

機械マシン

本気マジ

理由わけ

時間とき

本気と書いてマジと読む！パラリラパラリラ～チュンチュン

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

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

まとめ

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

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

関係ありませんが、わたしはあまりブログで技術的な記事って書かないので（詳しくないので）、今回の記事は、書くのにいつも以上時間がかかりました。

だから・・・

だれか・・・

褒めてくれ。

ぐふ

おっしまーい！^^

⇓次はこの記事がおススメ⇓

あなたは間違ってない？！ブログ集客に効果的な記事の作り方とは？

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