文字の上に傍点やルビをつける方法 - みにまるはうす

Sep 22, 2017

文字の上に傍点やルビをつける方法



文章の中に強調したい部分がある時によく使う括弧。
括弧にはいくつかの種類がありますが、私がよく使うのはかぎ括弧(「」)です。かぎ括弧は基本的に会話を表す場合に使うものですが、語句や固有名詞を強調する時などにも使用します。他の二重かぎ括弧などと違って、変換せずにキーボードで直接打てるから便利なので、本来は二重かぎ括弧を使う場合(作品のタイトル名など)にも使ってしまっています。

強調したい語句によってはクォーテーションマーク(””)を使うこともありますが、クォーテーションマークではなく、傍点(文字の上に黒い点が付いてるアレ)を使いたい場合もあるんですよね。今までは傍点のつけ方が分からないからクォーテーションマークで代用していましたが、傍点(ついでにルビも)を付ける方法が分かったのでここに書いておきます。

文字にルビを付ける方法


文字にルビを付けるには、HTMLタグの <RUBY> と <RT> を使います。
<RUBY> にはルビを付けたい文字を、<RT> には振り仮名など、ルビの内容となる文字を指定します。

<ruby>ルビを付けたい文字<rt>ルビの内容</rt></ruby>


ブログ記事の作成画面で「HTML編集」を選択し、ルビを付けたい文字をタグで囲みます。
実際にやってみましょう。
カタカナの「ルビ」の上に、ひらがなで「るび」とつけてみます。


【HTML】
<ruby>ルビ<rt>るび</rt></ruby>

【ブラウザでの表示】
ルビるび

文字に傍点(ぼうてん)を付ける方法


ルビを付けるのと同じタグを使います。
<RUBY> には傍点を付けたい文字を、<RT> には傍点となる点(・)を指定します。
点を入力するには文字の入力モードを「ひらがな」にし、キーボードの「め」を押します。

CHECK
「傍点を付けたい箇所の文字数」と同じ数の点を指定する必要があります。元の文字数が多い場合、点の数もそれに合わせて多くしてしまうとズレが生じるそうなので、プレビュー画面で確認しながら点の数を減らして調整して下さい

<ruby>傍点を付けたい文字<rt>・・・・・・・・・</rt></ruby>


ブログ記事の作成画面で「HTML編集」を選択し、傍点を付けたい文字をタグで囲みます。
実際にやってみましょう。
「傍点」の上に、点を2つ「・・」とつけてみます。


【HTML】
<ruby>傍点<rt>・・</rt></ruby>

【ブラウザでの表示】
傍点・・

文字に指定したスタイルの傍点を付ける方法


傍点といえば通常は黒い点ですが、CSS(スタイルシート)で色を指定すれば好きな色の傍点を付けることができます。また、傍点のスタイルも「ドット」「二重丸」「三角」など、数種類の中から好きなスタイルを指定できます。
例えば「オレンジ色のドット」を付けると下記のサンプルのようになります。


【サンプル】

STEP 1:傍点用のコードを記述する場所を探す


CSSの編集画面を開き、パーマリンクページ(固定記事)の記事本文の記述があるところを探します。
ブログサービスやテンプレートによってコードの書き方が違いますが、「post-body」や「post-content」、または「entry-content」と書かれているのが本文関連の記述のようです。
私は詳しくないので確かなことは言えませんが、「.post-body {~省略~}」の下に記述して正常に動作しております。

STEP 2:傍点のスタイルを指定する


「STEP 1」で見つけた場所に下記のコードを全部まるっとコピペして下さい。

.bouten { /*文字の上に傍点を付ける*/
text-emphasis-style: filled dot; /*傍点のスタイル*/
-webkit-text-emphasis-style: filled dot; /*ChromeとSafariで表示させる*/
-o-text-emphasis-style: filled dot; /*Operaで表示させる*/
-ms-text-emphasis-style: filled dot; /*IEで表示させる*/

text-emphasis-color: #f39b10; /*傍点の色*/
-webkit-text-emphasis-color: #f39b10; /*ChromeとSafari*/
-o-text-emphasis-color:#f39b10; /*Opera*/
-ms-text-emphasis-color:#f39b10; /*IE*/
}

  • 傍点のスタイルには「ドット(dot)」を、色は「オレンジ系(#f39b10)」を指定しています。お好きなスタイル、お好きな色に変更して下さい。
    ※丸:circle / 二重丸:double-circle / 三角:triangle / ゴマ:sesame
  • 色の指定が必要なければ「text-emphasis-color~」の部分を全部削除して下さい。
  • クラス名(bouten)もお好きな文字に置き換えて下さって結構です。
  • 本来なら「text-emphasis~」の行だけで良いのですが、それだとFirefoxでしか表示されないので、他の主要ブラウザでも表示できるようにベンダープレフィックスを付けてあります。Internet Explorerのベンダープレフィックスも一応つけてはいますが、残念ながら現時点ではIEでは表示されません
    ※ベンダープレフィックスとは「text-emphasis~」の先頭に付いている「-webkit-」や「-o-」のことです

STEP 3:傍点を付ける対象を指定する


CSSでは傍点のスタイルを設定しただけなので、それだけでは傍点は表示されません。傍点を表示させるには、傍点を付ける対象となる文字列をHTMLタグで囲う必要があります。

<span class="bouten">傍点を付けたい文字</span>

ブログ記事の作成画面で「HTML編集」を選択し、傍点を付けたい文字をタグで囲みます。
コードのクラス名を変更した場合は、「bouten」をそのクラス名に置き換えて下さい。


【HTML】
小さな<span class="bouten">オレンジ色</span>の傍点を付けてみました

【ブラウザでの表示】



以上、文字の上に傍点やルビを付ける方法でした。
(Source:ういすぷのそのとき日記



ブログランキング にほんブログ村

No comments: