本から学び仕事に活かすブログ。

ビジネス書の研究、社説の読み比べと要約など。実力派ビジネスマンに向けて、役立つサイト作りを目指してます。

「記事が読めない」をルビ振りで解決!「本気」と書いて「マジ」とも読める!?はてなブログでのHTML入力方法について。

  

もくじ

難しい漢字で書いたら、ブログを読んでもらえるだろうか?

固有名詞などの難しい漢字をWEB上で使わなければいけないとき、そんな不安に駆られることもあります。

たとえば【経緯(いきさつ)】のように後から()でよみがなを振る方法もありますが、今回は「はてなブログ」でのHTMLで出来る「ルビ振り」の方法を見ていきましょう。

 

ルビで読める画

(PR)

 

経営支援の10大サービス【エクステンド倶楽部】 ルビ振りの広告

 

使うコードについて 

<ruby>~</ruby>

→これでルビを振る「漢字」と、「よみ」までを囲います。

 

<rb>漢字</rb>

→ルビを振りたい漢字を囲います。

 

<rt>かんじ</rt>

→よみかたを囲います。

 

<rp>(</rp>よみ<rp>)</rp>

→ルビに対応してないブラウザが、代わりに()を表示します。

 

これらを組み合わせ、こんなかんじになります↓

<ruby><rb>漢字</rb><rp>(</rp><rt>かんじ</rt><rp>)</rp></ruby>

 

これをHTML編集の画面で打ち込みましょう。

 

今日は漢字(かんじ)のテストがある。

 

 

◇ ◆ ◇

はてなブログでの完成はこんな感じ

はてなブログのHTML編集画面を見てみると

ルビ振り画像1

赤枠の囲みのようになっています。プレビューも見てましょう。

ルビ振り画像2

「今日は」を <ruby>より手前に入れましょう。

「のテストがある。」は、</ruby>の後に入れます。

 

コピペ用にどうぞ↓

copy:

 

もしブラウザが対応してなかった場合は表現(ひょうげん)というように後に()がつくようになります。

 

ルビ振りで遊んでみる。

 

ちなみに下記のような、遊べる使い方もできますよ。うーん楽しい♪

 

やるっきゃ(ないと)

 

本日の夜御飯(キーマカレー)

 

はー、、、今日は超絶摩訶不思議七球神龍物語(ドラゴンボール)でも読もうっと。

 

 以上です!

 

参考にした本はコチラ↓

HTML5 & CSS3 デザインレシピ集

HTML5 & CSS3 デザインレシピ集

 

HTMLやCSSの基礎知識から始まり、基本的なテクニックがたくさん載っています。

「デザインとか全くわからない」という、初心者の方におすすめの本です♪

他にもこんなおすすめポイントがあります↓

・参考画像や色分けされたレイアウトなので直観で分かりやすい。

・目的ごとに対応方法が書かれているので、インデックスでも探しやすい♪

 

ではでは、また!

◇ ◆ ◇

 

PR

 

結婚式二次会・忘年会の景品なら【景品本舗】

女性へのメッセージに最高。チョーかわいい!「マシュマロ電報」

無二のシャンパンボトルをスマホでデザイン、すぐ贈れる【#JACKBOTTLE】

大切な人に月の土地を贈ろう

ヒーロー・ヒロインから手紙が届く!【キャラレター】