カテゴリー
閉じる
カテゴリー
Top >> ウェブデザイン(HTML/CSS)

Jimdoウェブデザイン
ふりがなを振る

Jimdoのコンテンツ「文章」には、入力した文字にふりがな(ルビ)を振る既存の機能は用意されていません。

しかし、HTMLを編集することで、簡単にふりがなを振ることができます。

複雑に見えるかもしれませんが、次の手順を追って理解すれば、すごく単純であることに気づくと思います。

ふりがなを振る手順

  1. コンテンツ「文章」で文字を入力したらメニューから「HTMLを編集」を選びます。
  2. Jimdoコンテンツ「文章」から、メニュー「HTMLを編集」を選択する。 HTML編集画面
  3. ふりがなを振る言葉を<ruby>と</ruby>で囲みます:<ruby>ふりがなを振る言葉</ruby>
  4. ふりがなを振る範囲を設定する<ruby></ruby>を挿入する。
  5. ふりがなを振る言葉の直後(</ruby>の直前)に<rt></rt>を挿入します。
  6. ふりがなを入力するための<rt></rt>を設置する。
  7. <rt>と</rt>の間にふりがなを入力してOKを押して、保存します。
  8. ふりがなを入力する。 ふりがなを振った状態。

ペーストしたコードの解説

<ruby>xxxx</ruby>は、どこにふりがな(ルビ)を振るのか、範囲を設定します。

<rt>xxxx</rt>は、"Ruby Text"の略で、ふりがなを振る言葉の直後(</ruby>の直前)に置いて、そのタグとタグの間にふりがなを入力します。

見出しにふりがなを振るには

見出しにも同様にふりがなを振ることができます。しかし、Jimdoの既存の見出し機能を使うとHTMLを編集できないので、代わりにコンテンツ「文章」から見出しを作成して、同様にふりがなを振ります。

コンテンツ「文章」から見出しを作成するには、上記例の<p>xxxx</p>を、大見出しなら<h1>xxxx</h1>、中見出しなら<h2>xxxx</h2>、小見出しなら<h3>xxxx</h3>とすればOKです。

Jimdoウェブデザイン:見出しにリンクを設定する で「文章」を使った見出しの設定にもふれていますので、ご参考ください。

オフィスペンぎん
作者:オフィスペンぎん(オフペン)
日英中翻訳者/メディアディベロッパー/ライター。ペンギンの教室の他、タブストックにてソロギター向け編曲や採譜。依頼、相談、メッセージはフォームまたはTwitterから。
記事のシェア
役に立った、参考になった、おもしろかった・・もしそう思ったら、シェアしていただけると嬉しいです♪

こちらも役立つかも?

同じカテゴリーの記事(ウェブデザイン HTML/CSS)

ペンギンの教室
カテゴリー
人気の記事
固有名詞/専門用語 日英辞書

化学、会計、観光、アニメ、漫画などの分野の用語を収録。

固有名詞・専門用語の日英・英日辞書
ペンギンの教室について
ペンギンの教室の作者:オフィスペンぎん

ペンギンの教室は、日ごろ感じる疑問や覚えなければいけないことを、記事や復習問題、クイズ、ゲームを通じて、わかりやすく学べるサイトです。

運営者:オフィスペンぎん

相談/連絡:フォームまたはTwitter