こんにちは。 影織 です。
ということで、今回は記事内でルビを振る方法をまとめました。
ルビを振る方法
一言で言えば、HTMLのrubyタグを使えばOKです。
こんなタグあるんだと今回調べていて初めて知りました。
たとえば上記の影織は、
<ruby>影織
<rp>(</rp><rt>かげおり</rt><rp>)</rp></ruby>
みたいな形で書いてます。
ちなみにBloggerエディタ上では以下のように、ルビ部分が（）でくくられて表示されます。
実際の記事内では、ちゃんと文字の上部に表示されます。
...でもでも、毎回こんなコード書くの面倒だよね？
似たようなタグが連続して間違えそうだし...
ボカァ、エンジニアの鑑 なので、簡単なルビ振りHTML変換ツールを作っておいたよ〜ん✌︎('ω'✌︎ )
ルビ生成機
以下のリンクからどうぞ。
ぜひページを保存 してお使いくださいませ！
使用報告、バグ報告あれば喜びます。
ルビ生成
ルビ付きのHTMLを生成します。
使い方は以下のスクショの通り。
|
ルビを振りたい言葉とルビを入力して、「ルビを生成」ボタンをクリックします。
「コードをコピー」ボタンをクリックすると、<ruby>タグのコードがコピーできます。
これをエディタのHTMLビューに張りつけたら、Bloggerの記事内で簡単にルビを振れます！
注) 単語ごとにルビを振れる仕様になっています。文字ごとに振りたい人は、以下の参考に貼ったリンクを参照してマークアップしてください。
まとめ
記事内で、ルビを使いたいと思ったので調べ始めたはずなのですが、ルビ生成機を楽しく実装しているうちに、何のためにルビを使いたかったのかを忘れました。
これを本末転倒と言います。
でもいっか！
せっかくなので、今後も積極的に使っていこうと思います。
これを使えば、コナンの映画タイトルも簡単に書けますし、かっこいい二つ名をつけることだってできます。
ルビを振りたいみんな達も、いっぱい使ってみーてね！٩( 'ω' )و
参考
ruby: ルビ注釈要素 - HTML: ハイパーテキストマークアップ言語 | MDN
ruby は HTML の要素で、ベーステキストの上、下、隣に描画される小さな注釈であり、よく東アジアの文字の発音を表すのに使われます。他の種類の注釈にも使われることがありますが、この使い方はあまり一般的ではありません。
0 コメント