文字装飾タグの使用方法

基本【spanタグの使い方】

小説執筆画面で、太字やサイズなど、文字装飾用のショートカットボタンがありますが、<span>(スパン)タグを使って、もっと細かい装飾がすることができます。

文字装飾ボタンの中に「spanタグ」というボタンがありますので、そちらを使用して装飾してみましょう。

  • まずは装飾したい文字列を選択し「spanタグ」ボタンを押します。
    すると「<span style="">文字列</span>」のように表示されます。
  • 囲っただけでは何も変化が起きませんので、<span style="設定したい装飾"></span>のように、装飾の設定をしていきます。
  • 注意点として、<span>で始まるタグは</span>で閉じてください。正しくタグを閉じていないと、正常に反映されません。
  • どのような装飾ができるか、以下の「文字装飾一覧」項目を参照していきましょう。

文字装飾一覧

「spanタグ」ボタンで「<span style=" ">文字列</span>」を表示させたら、「style=" "」の「" "」内に、装飾設定を記述していきます。

まずは、一番需要があると思われる「文字の色を変える」からやってみましょう。

文字の色を変える

文字の色を変える場合、<span style=" ">の「" "」内に

color:○○;」(○○は色の名前)

のように記述し、設定します。
例えば、赤色にしたい場合は「#ff0000」もしくは「red」と記述します。
すべて記述すると

<span style="color:#ff0000;">文字列</span>

となります。
ちなみに「color」は、文字色を設定するための「プロパティ(Property)」といい、「#ff0000」や「red」は「値(Value)」といいます。

具体的に見てみましょう。

(A)<span style=”color:#ff0000;”>赤色にする</span>

この場合、プロパティは「color」、値は「#ff0000」です。
以下のように記述しても同じ結果が得られます。

(B)<span style=”color:red;”>赤色にする</span>

上記(A)または(B)のように記述すると

赤色にする

このように表示されます。
小説プレビュー画面では、<span>等のコードは見えなくなり、spanタグで囲った部分が赤色になります。

(A)では、文字の色を#ff0000と設定していますが、この#ff0000を「カラーコード」といい、(B)の「red」は「カラーネーム」といいます。 この値を「#008000」としたり、「green」とすることで、様々な色をつけることができます。
まずはわかりやすい、カラーネーム(red、blue、pink、yellowなど)で試してみてください。

もっといろんな色を試したい方は、「原色大辞典」さんでは、カラーコードとカラーネーム両方が載っていますので参考にしてみてください。

【カラーコード一例】(全部で10,000,000色以上)

:#FF0000
ライトピンク:#FFB6C1
:#0000FF
:#008000
※その他カラーコードは、「カラーピッカー」等で検索して調べて下さい。

【カラーネーム一例】(全部で140色以上)

:red
ライトピンク:lightpink
:blue
:green

文字サイズを指定する

次に、文字の大きさを変えてみましょう。
文字装飾ボタンにも、大文字、小文字がありますが、もっと細かくサイズ指定することもできます。

文字のサイズを設定するプロパティは「font-size」です。
値は、任意の数値+単位です。単位は「px」(ピクセル)や、「%」(パーセント)、「em」(エンファシス)等がありますが、まずはわかりやすいpxから試してみましょう。
規定のサイズでは物足りないときは、以下のように設定していきましょう。

<span style=”font-size:18px;”>文字の大きさを指定する(18px)</span>

文字の大きさを指定する(18px)
<span style=”font-size:9px;”>文字の大きさを指定する(9px)</span>

文字の大きさを指定する(9px)

数値を小さくすれば小文字に、大きくすれば大文字になります。
小説の文字サイズは、大体13pxに設定してあります。それよりも大きい数値にすれば大文字に、小さい数値にすれば小文字になります。

装飾を複数設定する

また、これらの設定を複合して記述することも可能です。以下を参考にしてください。

<span style=”color:#00CED1; font-size:18px;”>装飾を複数設定する(大きさ&色文字)</span>

装飾を複数設定する(大きさ&色文字)

これ以降の装飾は、文字装飾ボタンで簡単に実装できますが、一応併記しておきます。参考までにどうぞ。

太字にする

<span style=”font-weight:bold;”>太字</span>

太字

文字を斜体にする斜体

<span style=”font-style:oblique;”>斜体</span>

斜体

文字に打消し線をひく

<span style=”text-decoration:line-through;”>文字に打消し線をひく</span>

文字に打消し線をひく

文字に下線をひく

<span style=”text-decoration:underline;”>下線を引く</span>

下線を引く

ふりがなをふる

例:<ruby>小鳥遊<rp>(</rp><rt>たかなし</rt><rp>)</rp></ruby>

小鳥遊たかなし

※未対応ブラウザでは、 小鳥遊(たかなし) と表示されます。

TOP