ニコニコ大百科ブロマガ(仮)

大百科でrubyタグとrtタグ、rpタグが使用可能になりました

2022/06/22 15:55 投稿

  • タグ:
  • ニコニコ大百科
  • 大百科運営からのお知らせ
  • ニコニコ大百科:HTMLタグ一覧

大百科の記事本文においてrubyタグとrtタグ、rpタグが使用可能になりましたのでお知らせします。

rubyタグを使うと任意の文字列にルビをふることが可能になります。

なお、こちらのタグについては現在、ビジュアルHTMLエディタでの挿入には対応しておりません(将来的には対応する予定です)。
使用する場合はビジュアルHTMLエディタを適宜オフにしてください。

簡単な使い方

まずはルビをふってみる

ルビをふりたい文字列を <ruby>~</ruby> で括り、rubyタグ内のルビをふりたい文字列の後ろに <rt>~</rt> で括った文字列を追記すると、そこがルビになります。

こう書くと、、、

ニコニコ<ruby>大百科<rt>だいひゃっか</rt></ruby>

こうなります。
a40e2ff2ce6b4d487071bf9c929c65d2f78bc6ac

対応していないブラウザへの対応

rubyタグに対応していないブラウザで上記を表示するとこのようになってしまいます。
5360056d61494915cc7882d0e8522a46173d31e3

そのためにrpタグが用意されています。
<rp>~</rp> で括った文字列は非対応ブラウザのみで表示されますので、以下のように書くことで非対応ブラウザでの違和感を軽減することができます。

ニコニコ<ruby>大百科<rp>(</rp><rt>だいひゃっか</rt><rp>)</rp></ruby>

rubyタグに対応しているブラウザでの表示
a40e2ff2ce6b4d487071bf9c929c65d2f78bc6ac

非対応ブラウザでの表示
acbb6022b86ce1e4c6a1bd6836d652e441fe946c

style属性を使ってみる

rubyタグ、rtタグ、rpタグはインライン要素となっていて、spanと同様のstyleが適用可能になっています。
以下の例ではルビ部分に赤い色を指定しています。

ニコニコ<ruby>大百科<rp>(</rp><rt style="color: red;">だいひゃっか</rt><rp>)</rp></ruby>

168c4044fe67ae14daad84feda69cf315e1ff4ab

以上、簡単ではありますがざっくりとした使い方となります。

補足

rubyタグの使用により分断された文字列には自動リンクが入らなくなりますので、リンクをつけたい場合は適宜Aタグを入れるなどして対応してください。

(文責・はくはく

コメント

コメントはまだありません
コメントを書き込むにはログインしてください。

いまブロマガで人気の記事

ニコニコ大百科チャンネル

ニコニコ大百科チャンネル

このチャンネルの詳細