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

先日「WordPressの投稿の編集画面をパワーアップするプラグインTinyMCE Advancedのご紹介」という記事を書きましたが、その時TinyMCE Advancedより良さそうなプラグイン無いかなぁ、と探していた時に偶然見つけたプラグインですが、まさに日本語向けの中々かゆいところに手が届く感じだったのでご紹介します。

ルビを付けるプラグインと紹介してますが、他にも定義リストを入れたり注釈を付けたり、あると便利なおまけも付いてきます。

WP-Yomiganaの導入

1
プラグイン新規追加でWP-Yomiganaで検索インストール有効化します。

日本の方が作成したプラグインなので説明もわかりやすいです。2010年に作成されたプラグインなんですね、今まで知らなかったのが悔やまれます。

WP-Yomiganaの設定

2
設定>ルビ設定からそれぞれチェックしていく

WP-Yomiganaの使い方

設定すると投稿画面の上の欄にボタンが追加されます。今回は全部3行目に追加されるように設定しました。

ルビ(ふりがな)の使い方

まずはルビの使い方。簡単です。ブラウザの問題もありますが2015年12月現在ほとんどのブラウザで対応しているようです。

ルビの挿入。ボタンを押すと設定項目が現れます。
ルビの挿入。ボタンを押すと設定項目が現れます。すこし表示が下に被ってて見づらいですが…ブラウザの問題かな。
ルビの削除。削除したいところにカーソルを合わせ、ルビボタンをクリックすると削除ボタンが出てきます。
ルビの削除。削除したいところにカーソルを合わせ、ルビボタンをクリックすると削除ボタンが出てきます。

終焉を招く舞踏会ナイトメア・ダンス・パーティー
出典:中二病をこじらせた名前や技名や言葉 | ログ速@2ちゃんねる(net)

上のようになります。ちょっと裏ワザ的なやり方で文法的に微妙ですがこんな感じ・・・・・傍点ぼうてん風にすることも出来ます。傍点はCSSでも出来ますがFirefoxの対応がまだなのでいまいち使えないですね。もうすぐ対応するらしいですが…。

因みにこの記事のタイトルにつけてるものは直接タグを書き込んでます。

※これテーマによってはhtmlエスケープされてたり、メタタグの方で逆にエスケープされてなかったりするので表示が崩れたりしたら戻しましょう。

注釈の使い方

注釈ボタンも付いてます。htmlの<small> タグが挿入されるようです。これも使い勝手いいですね。

テキストを選択して注釈ボタンをクリックするだけ。
テキストを選択して注釈ボタンをクリックするだけ。

※この文は実際の注釈の例です。

定義リストの使い方

dlタグですね。これ結構使えるのに、確かDreamweaverからもボタン無くなってたような気がします。少し使い方が特殊なようですね。なるほど確かにボタンつけにくいかもしれませんね。

最初に文章を書いておいて後からタグつけていった方がわかりやすいと思います。
最初に文章を書いておいて後からタグつけていった方がわかりやすいと思います。削除は定義リスト部分を選択して解除で出来ます。
2015.12.12
晴れ / 室温:20度 / 湿度:52%
2015.12.11
雨 / 室温:18〜21度 / 湿度:60%
2015.12.10
曇り / 室温:不明 / 湿度:不明

で、こんな感じの定義リストを作ってみました。※体裁はテーマに依存します。

引用関係

もともとWordPressの投稿画面にもブロック引用ボタンは付いているので使い方は限定されるかもしれませんがちょっとした短い引用とかには良いかもしれません。また、引用元もciteタグで明記できるので厳格に引用を使いたい方には良いでしょう。

インライン引用

失敗!インライン引用で中にタグが入ってると全てエスケープされるようです。
失敗!インライン引用で中にタグが入ってると全てエスケープされるようです。まぁこの量の引用はブロックでやったほうが良いでしょうね。短いフレーズとか向けですね。
リンク先を明記します。
引用先URLを明記します。リンクもつけると親切です。

爆ぜろリアル! 弾けろシナプス! Van!shment Th!s World!

ブロック引用

最後に引用元を明記してリンクをつけると親切ですね。
最後に引用元を明記してリンクをつけると親切ですね。

ガールズ&パンツァー』(ガールズ アンド パンツァー[注 1]GIRLS und PANZER)は、2012年10月から同年12月までと2013年3月に放送された[注 2]テレビアニメ。全12話+総集編2話。略称は「ガルパン」ないし海外系のサイト等では「GuP」が用いられる[注 3]

題名にある「パンツァー(Panzer)」はドイツ語「Panzer Kampf Wagen」(装甲戦闘車輌)の略語で、元々は「甲冑」「装甲」を意味する単語であったが現代ではこれ一語でも「戦車」と言う意味で通用する。

本作の著作権表記では、通常は英語で書かれている部分がドイツ語になっており、”GIRLS und PANZER Projekt[注 4]“となっている。

出典:ウィキペディア ガールズ&パンツァー より

注意点とまとめ

以前に紹介したTinyMCE Advancedプラグインとも一緒に使えますし、注釈やルビは特に日本語の文章を書く上では非常に重宝すると思いますのでおすすめです。

ただし、一番気をつけるのはWordPressテーマやブラウザによっては対応していないということです。ブラウザに関しては新しいものであれば殆ど問題ないと思いますが、テーマに関してはインライン引用とか引用元とかはスタイル当てて無かったりします。

特に野良テーマとかだとスタイル当ててなかったりしますので使う時はプレビューとかで確認してからが良いでしょうね。

あと、どうでもいいことですがボタンのアイコンがsvgとかでRetinaに対応されれば良いなあと思いました。ホントどうでもいいですけど。

投稿者: Peax

孤独すぎてウェブとかの事を書いたりしてるアニヲタのおっさん。

コメントを残す