freoカスタマイズ集

※今回はWordPress用のTinyMCEにrubyタグを入力するプラグイン WP-Yomigana を改造致しました。なお配布につきましては同プラグインの作者である高橋文樹氏より了解をいただいております。

※rubyタグは対応しているブラウザ（Internet Explorer, Chrome, Safari）と未対応のブラウザ（Firefox, Opera）では見え方が違うのでご注意ください。←firefox38、Opera15でrubyタグに対応済

※rubyプラグイン導入の方法

• ダウンロード
  （このプラグインはfreo用に調整してありますのでTinyMCEを導入している他のブログで使えるかどうかはわかりません）

1. ダウンロードしたファイルを解凍して yomigana フォルダを tiny_mce/plugins/ フォルダの中に入れてアップします。
2. js/admin.js の「//TinyMCE」以降のうち赤字部分を追加してアップします。

   //TinyMCE
   tinyMCE.init({
   ～（略）～
     extended_valid_elements: "iframe[*],ruby,rt,rp",
   ～（略）～
     plugins: 'advimage,advlink,autosave,contextmenu,fullscreen,inlinepopups,pagebreak,searchreplace,table,visualblocks,yomigana',
   ～（略）～
     heme_advanced_buttons2: 'forecolor,backcolor,removeformat,|,link,unlink,image,charmap,pagebreak,|,search,replace,|,undo,redo,ruby',
   ～（略）～

   導入するとTinyMCEにrubyボタンが表示されます。（うっすらと「る」の字が見えます）
   

※ruby入力の方法

1. 文章を入力してルビを入れたい文字をドラックするとrubyボタン（「る」）がくっきりと表示されます。
   
2. rubyボタンを押すと「ルビの編集」ダイヤログが表示されます。
   「親文字」の欄にはドラックした文字が既に入力されているので「ルビ」の欄にふりがなを入力します。そしてrubyタグ未対応ブラウザ用のために「rpタグのサポート」にチェックを入れて「挿入」を押します。
   
3. すると画面の文章にルビが振られます（rubyタグ未対応ブラウザではルビは振られずふりがな部分はかっこ付きで表示されます）。
   
   
   上記のHTMLソースは

   <ruby>面白内<rp>(</rp><rt>おもしろない</rt><rp>)</rp></ruby>：北海道雨竜郡雨竜町

   となります。
4. 入力を誤った場合は親文字（いずれか1字のみでOK）をドラックしrubyボタンを押して「ルビの編集」ダイヤログが表示させ、「削除」を押すとルビが取り消されます。
5. 文章を完成させて「登録する」を押すとエントリー（ページ）が登録されます。
   
   
   ちなみにrubyタグ未対応のブラウザでは以下のように表示されます。
   
6. ルビが小さくて見えにくい場合は /css/common.css に

   rt {
     font-size: 70%;
   }
   rp {
     font-size: 70%;
   }

   を入れると大きくなります（数値は適宜調整してください）。
   

   
   上記のスタイルシートはrubyタグ未対応のブラウザにも反映されるのでその場合は逆にルビが小さくなります。
   
   ※実装してみた感じ ⇒ こちら

※おまけ

なおこのプラグインはWP-Yomiganaと同様にインライン引用（qタグ）、注釈（smallタグ）、定義リスト（DL）も導入することができます。
導入方法については上記2)の /js/admin.js の「//TinyMCE」以降のうちボタン部分である

theme_advanced_buttons1: ～',

または、

theme_advanced_buttons2: ～',

のところに、,q（インライン引用）、,small（注釈）、,dl（定義リスト）を加入してください。
ただ定義リストを使ってみたら上下に空白行が入ってしまう...(^_^;)（もともとそういう仕様みたいです）