文字の装飾

文字(テキスト)をいろいろと装飾する方法について説明します。

文字色

文字の色を変える一番簡単な方法は、英雄クロニクルの色タグを使うことです。 入力支援もあるので、編集時に困ることも少ないでしょう。

        <赤:テキスト>
    

しかし、色タグは種類が少ないですし、「色味が少し違う」という問題もあります。(例えば色タグの赤はRGB値のFF0000ではありません。)

色タグでは表示できない色を使うにはCSSを使うしかありません。 次のように入力してください。

        <div style="color: red;">テキスト</div>
    

"color: red;"で赤い色で「テキスト」と表示されます。 色タグの赤とは微妙に違うというか、カラーコード的に正しい赤(RGB値がFF0000)になるはずです。

divをpに変えて、次のようにしても赤く表示されます。

        <p style="color: red;">テキスト</p>
    

redは赤色を指定しているので、ここを変えれば別の色になります。

色の指定の仕方は文字通りいろいろあります。ネットを検索して調べてください。 検索のキーワードは「CSS color」や「WEB色見本」などが良いでしょう。

上の3つの入力例は、次のように表示されます。

テキスト

テキスト

テキスト

大きさ

文字の大きさを変える一番簡単な方法は、英雄クロニクルのサイズタグを使うことです。 入力支援もあるので、編集時に困ることも少ないでしょう。

色の変更と一緒に指定できますし、CSSを使うより手軽です。長い呪文を書かずにすむところも良いです。

        <赤大:文字を大きくして、赤くする>
    

しかし、サイズが3種類しかありません。他のサイズを選ぶにはCSSを使うしかありません。次のように入力してください。

        <div style="font-size: 200%;">文字を2倍にする</div>
        <div style="font-size: 50%;">文字を半分にする</div>
    
----

"font-size: 200%;"で文字が2倍になります。

上の例は%単位を使っていますが、他の単位もあります。 詳しい情報は検索して調べてください。

英雄クロニクルの色タグとCSSによるサイズ変更を合わせて使ったり、その逆の組み合わせにすることもできます。

        <div style="font-size: 200%;"><赤:サイズはCSS 色は色タグ></div>
        <div style="color: red;"><大:サイズはサイズタグ 色はCSS></div>
    

と、切り替えると良いでしょう。

上の3つの入力例は、次のように表示されます。

文字を大きくして、赤くする

文字を2倍にする

文字を半分にする

サイズはCSS 色は色タグ

サイズはサイズタグ 色はCSS

太字・斜め・ライン

CSSを使って太字や斜めなどに変更することもできます。しかし種類が少ないので「CSSを使わないと表示できない太さにしたい」というケースはあまりないと思います。

英雄クロニクルの太さタグや斜めタグなどを使ったほうが楽なので、それらのタグを使う事をおすすめします。

上ライン・下ラインについては、枠線を利用することもできます。詳しくは、「部分的な枠」で説明しています。

その他の文字修飾

文字を修飾するCSSには、他にも次のようなものがあります。

CSSの名前 効果
text-shadow 文字に影を付けたり、文字の周りにぼかしを入れる。
text-stroke 文字に縁取りを入れる。

詳しい説明は省きます。詳細を知りたい方は検索して調べてください。

装飾時の改行を止める

英雄クロニクルの色タグやサイズタグでは、次の様に入力すると1文字だけ変化します。

        一部だけ<赤:赤>くしたい。
    
一部だけくしたい。

しかしCSSを使って色やサイズを変更するとこのような部分的な変更が簡単にできません。

自由記入欄に次のように入力してみてください

        一部だけ<div style="color: red;">赤</div>くしたい。
    

次のように表示されます。

一部だけ
くしたい。

divをpに変えても同じです。divやpは基本的に改行されたように表示されるからです。

divやpの基本動作を変えることで、「改行しない」ようにすることができます。 自由記入欄に次のようにして入力してみてください。

        部分的に<div style="color: red; display: inline;">赤</div>くできるし、<div style="color: navy; display: inline;">ネイビー色</div>にもできるぞー。
    

これは次のように表示されます。

部分的に
くできるし、
ネイビー色
にもできるぞー。

今度は改行なしで表示され、途中の文字だけ色が変わりました。

"display: inline;"を付けることで、改行しなくなります。

そのため、"display:inline;"を入れまくるという力技を使えば、色タグのように改行せずに文字の色を変えることができます。

しかし、上の様に入力するのはとても面倒です。 部分的に色を変えるなら色タグを使ったほうが簡単です。 どうしても色タグでは満足できない(色タグでは表示できない色にしたい)場合に、この方法を使うと良いでしょう。