自己紹介でも書いたように、日本語教師をしています。
日本語を勉強し始めたばかりの学生にとって、
漢字はとても難しいです。
そこで使われるのがルビです。
つまり、漢字の読み方を、漢字の上などに書くことです。
優しい、短い言葉で文を書くと、日本語が上手な方にとっては読みにくくなってしまいますが、
少しでも日本語学習者の役に立てればと思い、
このサイトでは、ルビを振っていきたいと思います。
日本語上級者の方には、ルビがあるとかえって読みづらいと思うので、
上部に「ルビ表示切替」ボタンやリンクを付けますので、
そちらを押して、切り替えてください。
# 押しても反応しない場合は、ご連絡いただけますと幸いです。
ルビの利用方法＠Cocoon
Cocoonには、ルビの機能が備わっています。
ルビの利用手順
①テキストエディターのショートカットの「ふりがな」をクリックする。
②1回クリックすると、以下が入力される。
③続いてルビを振りたい漢字を書く。
④もう一度「ふりがな」をクリックすると、以下が入力される。
⑤「ふりがな」部分を編集し、漢字のルビを入力する。
これで、漢字にルビを振ることができました。
ルビの表示／非表示を切り替える
次のボタンを押してみてください。
表示
「表示」の漢字の上に、ふりがなが振られましたね。
ショートカットの「ふりがな」は、
常にふりがなを表示させます。
特殊な読み方の漢字の場合は、常に表示をさせておいて問題ないですが、
いつも表示させておくと、ルビが邪魔に感じることがあります。
これをボタンクリックで表示／非表示を切り替えられるようにして見ましょう。
必要な作業
以下3種類のコードの追加をします。
- JavaScript
- CSS
- HTML（投稿ページ）
コード追加方法
ここでは、Cocoonを利用していることを前提に、
それぞれの追加方法をご説明します。
JavaScript
以下手順で追記します。
JavaScriptコード追加手順
①外観＞テーマエディターの順にクリックする。
②編集するテーマが「Cocoon Child」であることを確認する。
③javascript.jsをクリックする。
④以下コードを追加し、保存する。
//ルビ用設定
window.onload=function () {
document.getElementById('change_ruby').onclick=function () {
show_block();
}
}
function show_block() {
document.body.classList.toggle('ruby_flag');
}
CSS
以下いずれかの手順で追記します。
CSSコード追加手順①
①外観＞テーマエディターの順にクリックする。
②編集するテーマが「Cocoon Child」であることを確認する。
③スタイルシート (style.css)をクリックする。
④以下コードを追加し、保存する。
/*ルビ設定*/
rt {
display: none;
}
.ruby_flag rt {
display: block;
}
CSSコード追加手順②
①外観＞カスタマイズの順にクリックする。
②現在のテーマが「Cocoon Child」であることを確認する。
③追加CSSをクリックする。
④以下コードを追加し、保存する。
/*ルビ設定*/
rt {
display: none;
}
.ruby_flag rt {
display: block;
}
投稿ページ
記事の編集画面で、ボタンを入れたい場所に以下コードを追記します。
記事への追加手順
①編集したい記事を開く。
②任意の場所に以下コードを入力する。
※ボタン表示にならないよう、＜＞は全角としていますので、
半角に変換して入力してください。
※以下では、ボタンの色がCocoonボタンの青となっております。
適宜、選択するボタンの種類を変更したり、
クラスを定義し、CSSで好みの色に変更したりしてください。
＜button id="change_ruby" class="btn btn-blue"＞ルビ表示切替＜/button＞
クイックタグ登録
よく使うようでしたら、
クイックタグに登録しましょう。
以下はまだ1つもクイックタグを追加していない場合の追加手順です。
クイックタグ登録手順
①外観＞テーマエディターの順にクリックする。
②編集するテーマが「Cocoon Child」であることを確認する。
③テーマのための関数 (functions.php)をクリックする。
④以下コードを追加し、保存する。
※ボタン表示等の関連から、＜＞は全角にしていますので、
半角に変換して入力してください。
function add_button_quicktag() {
?＞
＜script type="text/javascript"＞
QTags.addButton('ruby_button','ルビボタン','＜button id="change_ruby" class="btn btn-blue"＞ルビ表示切替＜/button＞');
＜/script＞
＜?php
}
add_action('admin_print_footer_scripts', 'add_button_quicktag');
コードの内容を確認しよう
JavaScript
// ルビ用設定
// ページや画像が読み込みが完了した時点でイベントfunction()を実行するための定義
window.onload=function () {
//「change_ruby」の名前がついた要素がクリックされたときに、処理をします。
document.getElementById('change_ruby').onclick=function () {
// show_block関数を呼び出します。
show_block();
}
}
// show_block関数を定義します。
function show_block() {
// 特定の要素のクラス名を追加したり、削除したりします。
document.body.classList.toggle('ruby_flag');
}
CSS
/*ルビ設定*/
/* 通常のrtの場合 */
rt {
/* 非表示にします */
display: none;
}
/* ruby_flagクラスの場合 */
.ruby_flag rt {
/* ブロック要素ボックスを生成し、要素の前後に改行を入れます */
display: block;
}
HTML
<!-- change_rubyのIDでボタンを作ります--> ＜button id="change_ruby" class="btn btn-blue"＞ルビ表示切替＜/button＞
PHP
// クイックタグにボタンを追加する関数
function add_button_quicktag() {
?＞
＜script type="text/javascript"＞
// 内部的には「ruby_button」の名前、
// クイックタグボタンとしては「ルビボタン」の名前で表示します。
// 1回のクリックで、ボタンを追加するコドを入れます。
QTags.addButton('ruby_button','ルビボタン','＜button id="change_ruby" class="btn btn-blue"＞ルビ表示切替＜/button＞');
＜/script＞
＜?php
}
// 「admin_print_footer_scripts」のフックのタイミングで、クイックタグにボタンを追加する関数を呼び出します。
add_action('admin_print_footer_scripts', 'add_button_quicktag');
まとめ
いかがでしたでしょうか？
あまりルビを使う機会は少ないかもしれませんね。
上記方法は、IDでJavaScriptを定義しているため、
1ページに1つのボタンしか配置できませんのでご注意ください。
コメント