先日「WordPressの投稿の編集画面をパワーアップするプラグインTinyMCE Advancedのご紹介」という記事を書きましたが、その時TinyMCE Advancedより良さそうなプラグイン無いかなぁ、と探していた時に偶然見つけたプラグインですが、まさに日本語向けの中々かゆいところに手が届く感じだったのでご紹介します。
ルビを付けるプラグインと紹介してますが、他にも定義リストを入れたり注釈を付けたり、あると便利なおまけも付いてきます。
WP-Yomiganaの導入
![1](http://peax-wp.com/wp/wp-content/uploads/2015/12/1-5-300x145.gif)
日本の方が作成したプラグインなので説明もわかりやすいです。2010年に作成されたプラグインなんですね、今まで知らなかったのが悔やまれます。
WP-Yomiganaの設定
![2](http://peax-wp.com/wp/wp-content/uploads/2015/12/2-5-300x145.gif)
WP-Yomiganaの使い方
設定すると投稿画面の上の欄にボタンが追加されます。今回は全部3行目に追加されるように設定しました。
ルビ(ふりがな)の使い方
まずはルビの使い方。簡単です。ブラウザの問題もありますが2015年12月現在ほとんどのブラウザで対応しているようです。
![ルビの挿入。ボタンを押すと設定項目が現れます。](http://peax-wp.com/wp/wp-content/uploads/2015/12/3-3-300x145.gif)
![ルビの削除。削除したいところにカーソルを合わせ、ルビボタンをクリックすると削除ボタンが出てきます。](http://peax-wp.com/wp/wp-content/uploads/2015/12/4-1-300x145.gif)
終焉を招く舞踏会
[icon name=”link” class=”” unprefixed_class=””]出典:中二病をこじらせた名前や技名や言葉 | ログ速@2ちゃんねる(net)
上のようになります。ちょっと裏ワザ的なやり方で文法的に微妙ですがこんな感じで傍点風にすることも出来ます。傍点はCSSでも出来ますがFirefoxの対応がまだなのでいまいち使えないですね。もうすぐ対応するらしいですが…。
因みにこの記事のタイトルにつけてるものは直接タグを書き込んでます。
1 |
WordPressの<ruby>投稿画面<rt>とうこうがめん</rt></ruby>でルビ<small>(ふりがな)</small>を付けるプラグインWP-Yomiganaのご紹介 |
※これテーマによってはhtmlエスケープされてたり、メタタグの方で逆にエスケープされてなかったりするので表示が崩れたりしたら戻しましょう。
注釈の使い方
注釈ボタンも付いてます。htmlの<small> タグが挿入されるようです。これも使い勝手いいですね。
![テキストを選択して注釈ボタンをクリックするだけ。](http://peax-wp.com/wp/wp-content/uploads/2015/12/5-1-300x145.gif)
※この文は実際の注釈の例です。
定義リストの使い方
dlタグですね。これ結構使えるのに、確かDreamweaverからもボタン無くなってたような気がします。少し使い方が特殊なようですね。なるほど確かにボタンつけにくいかもしれませんね。
![最初に文章を書いておいて後からタグつけていった方がわかりやすいと思います。](http://peax-wp.com/wp/wp-content/uploads/2015/12/6-1-300x145.gif)
- 2015.12.12
- 晴れ / 室温:20度 / 湿度:52%
- 2015.12.11
- 雨 / 室温:18〜21度 / 湿度:60%
- 2015.12.10
- 曇り / 室温:不明 / 湿度:不明
で、こんな感じの定義リストを作ってみました。※体裁はテーマに依存します。
引用関係
もともとWordPressの投稿画面にもブロック引用ボタンは付いているので使い方は限定されるかもしれませんがちょっとした短い引用とかには良いかもしれません。また、引用元もciteタグで明記できるので厳格に引用を使いたい方には良いでしょう。
インライン引用
![失敗!インライン引用で中にタグが入ってると全てエスケープされるようです。](http://peax-wp.com/wp/wp-content/uploads/2015/12/7-1-300x145.gif)
![リンク先を明記します。](http://peax-wp.com/wp/wp-content/uploads/2015/12/9-1-300x145.gif)
爆ぜろリアル! 弾けろシナプス! Van!shment Th!s World!
ブロック引用
![最後に引用元を明記してリンクをつけると親切ですね。](http://peax-wp.com/wp/wp-content/uploads/2015/12/8-1-300x145.gif)
『ガールズ&パンツァー』(ガールズ アンド パンツァー[注 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に対応されれば良いなあと思いました。ホントどうでもいいですけど。