読者です 読者をやめる 読者になる 読者になる

ひそかブログ

アニメでするリアルの話、リアルでするアニメの話。そういうのが好きです。

記事にルビ(ふりがな)をふるためのHTMLと、それをログ・ホライズンに応用した話

ブログ関連の話

先日、図書館でHTMLの本を借りてきました。

詳解 HTMLタグ辞典

詳解 HTMLタグ辞典

私が借りたのは、この本の第2版(2011年初版)です。

ちなみにHTML(エイチティーエムエル、HyperText Markup Language)とは、ウェブページを作成するために開発された言語のことで、現在、インターネット上のページのほとんどは、HTMLで作成されています。

PCをお使いの方は、ためしに 「CtrlU」(コントロールキー + ユー)と押してみてください。画面上にウェブページ作成で使われているHTMLが、ばぁーーっと表示されるはずです。私は初めて「CtrlU」でHTMLを見たとき、ナンじゃこりゃ ?! とビックリしました。

HTMLに軽くふれたところで。
続いて借りた本の中にあった、ふりがな の作成方法についてです。

単語にルビをふるためのHTML

ルビのHTMLは ↓ こうなっています。

<ruby>
<rt></rt>
<rt></rt>
</ruby>


先ほど書いたふりがな。これのHYMLは、↓ こうなっています。

<ruby><rt>ふり</rt><rt>がな</rt>
</ruby>


手順としては、

まず<ruby>ではじまり、
次にルビをふりたい文字を書いてその後ろに<rt>をつけ、
さらにルビ(ふりがな)を書いて後ろに</rt>をつけ、
最後に</ruby> で終わる。

とまあそんな感じになります。 ルビをふるやり方は、知ってしまえば案外簡単な作業ですね。

ブログなどで、ルビをふった記事を見かけるのはレアケースかもしれないです。
これはわざわざ手間をかけてルビにしなくても、難読漢字の読み方などは、()カッコ内に漢字の読み方でもつけた方が、短時間で文章を書けるという理由もあると思います。

がしかし。
これは私の場合になりますが、どうしてもルビを使いたくなる場合があります。


ルビを使いたくなるログ・ホライズン

それは「ログ・ホライズン」に関連する記事を書いている時です。

「ログ・ホライズン」という作品は、Web版でも書籍版でも文章の中にルビ付きの単語が大量に出てきます。特技名、職業名、世界観の用語etc... ルビ付き単語のオンパレード。
ブログでは、ルビ付き単語を書きたい時、どう表記しようか?と、たえず頭を悩ませていました。

たとえばですが、作中に〈典災〉という単語がでてきます。
原作だとこれを、 ジーニアス という感じに表記しています。さて…… では〈典災〉をブログに書く時どうしよう? ちょっと考えちゃいます。
私は、〈典災〉(ジーニアス)とか、ジーニアス〈典災〉とかって書いていたことが多かったです。


結局、ルビ付き単語の表記方法は、最後(アニメ2期が終わる)まで統一できずじまいでした。
ちょっとルビのふり方を知るのが遅かった!(無念)

しかし! 「ログ・ホライズン」はまだ終わってなどいないですよね。
これから書く「ログ・ホライズン」関連の記事はもちろん、これまでに書いたログホラ感想記事なども、時間を見ながら要所要素はルビ付きに切り替えて行こうと思っています。


ログ・ホライズン - ルビ付き単語のHTML具体例

「ログ・ホライズン」に登場する、ルビ付きで表記したくなるキーワード。 これらキーワードのHTMLを5つほどつくってみました。

MPマナチャネリング配〉

<ruby><rt></rt>MP<rt>マナ</rt><rt>チャネ</rt><rt>リング</rt>配〉<rt></rt></ruby>


引きカイティン作戦〉

<ruby><rt></rt>引き<rt>カイ</rt><rt>ティン</rt><rt></rt>作戦</rt></ruby> 


ジーニアス

<ruby><rt></rt><rt>ジーニ</rt><rt>アス</rt></ruby>


エンパシオム

<ruby><rt></rt><rt>エン</rt><rt>パシ</rt><rt>オム</rt></ruby>  


絶命のアサシ一閃ネイト

<ruby><rt></rt>絶命の<rt>アサシ</rt>一閃<rt>ネイト</rt></ruby>


以上、5つほどつくってみました。
もっとキレイにルビを表記するために、まだまだ改善の余地はありそうですが、徐々に増やしていけたら、と思っています。


で。
いったいどこに需要が?
そんな気持ちが一瞬頭をよぎりました。

ログ・ホライズンのキーワードに、ルビ付きHTMLをつくって、いったい誰の役に立つのかなと。
まあしかし。
もしかしたら、ログ・ホライズンのSS(二次小説)や「夢小説*1などをつくられる方の役に立つかもしれないなと。

SSや夢小説をつくられる方は、もうとっくにルビは導入されているのかもしれませんが、少しでも役に立ったならさいわいです。


ということで。
以上、ブログでルビをふるためのHTMLの書き方と、それをログ・ホライズンのキーワードに応用してみた具体例、という話でした。


「主君主君。こんど『ひそかブログ』のログ・ホラ感想はルビ付きになるかもしれないぞ!」 f:id:hisoka02:20150423184729j:plain
「うん、僕も今知ったよアカツキ。 問題は、ルビを使う3期がいつ放送されるかってことだよね~」



「ブログ」関連記事
ブログで「表組み」(TABLEタグ)をつくるには? - ひそかブログ
ブログに「目次」(もくじ)をつけるにはどうやるの? - ひそかブログ

「ログ・ホライズン」関連記事
【読書感想】 ログ・ホライズン9 カナミ、ゴー!イースト! - 「パラレル・プロット」に痺れた! - ひそかブログ
http://hisoka02.hatenablog.com/entry/2015/04/10/230117
ログ・ホライズン - アニメと小説の相関表(改訂版) - ひそかブログ

カテゴリー「ログ・ホライズン」 トップページ ↓
ログ・ホライズン - アニメと小説の相関表(改訂版) - ひそかブログ


*1:「夢小説」とは、創作小説の一種。ドリーム小説・ドリー夢小説・名前変換小説などともいう。略称は夢・ドリーム・ドリー夢・ドリなど。このジャンルを楽しむ人を夢見乙女・夢女子・ドリーマーなどと呼ぶ。 夢小説 (ゆめしょうせつ)とは【ピクシブ百科事典】 より