ブロックをいろいろと装飾する方法について説明します。
文字の装飾は英雄クロニクルのタグである程度できましたが、ブロックの装飾ようなタグは英雄クロニクルにはありません。そのためCSSを使うしかありません。
自由記入欄に限定した話ならば、ブロックとは<div>～</div>または<p>～</p>で囲んでいる内側のことです。
この囲まれた部分は「ひとかたまり」として扱われます。
例えば、次の様に入力すると、ブロックの内側の文字がすべて水色になります。 これも「ひとかたまり」として扱われているからです。
<div style="color: cyan">内部のテキスト</div>
ブロックは横幅や高さを持ちます。これはレイアウト（配置）を考えるときに重要になります。
横幅と高さについては、「横幅と高さ」で説明します。
ブロックの背景に色を付ける場合は、次のように入力してください。
<div style="color: white; background-color: royalblue;">背景：薄い青、文字：白</div>
次のように表示されます。
"background-color: royalblue;"で、背景がちょっと薄い青色になります。
royalblueのところを変えれば、別の色を指定できます。
そして、"color: white;"で文字が白になります。
下のように、colorを書かなければ、文字は黒のままです。
<div style="background-color: lightgreen;">背景：薄い緑、文字：黒</div>
文字は英雄クロニクルの色タグにしてもよいでしょう。
<div style="background-color: black;"><虹:背景：黒、文字は虹></div>
上の２つを入力すると、次のように表示されます。
背景はグラデーションカラーに塗ることもできます。詳細は「背景」で説明しています。
短い（１行の）文字を枠で囲むと、タイトルや見出しに良さそうな感じになるでしょう。
またキャラ設定・エピソードなどの長文を枠で囲って表示するのもよいですよね？
文字や文章を枠線で囲みたいときは次のように入力してください。
（枠を付けただけだと上下が詰まった感じがするので、余白も付けています。 余白についての詳しい説明は、シンプルなレイアウトで説明するので、ここでは気にしないでください。）
<div style="border: orange 2px solid; padding: .5em;">妖精の弓使い。女神に仕える戦士でもある。
辺境出身の田舎者の少女だったが、最近はすっかり街（アティルト）っ子になってしまった。</div>
次の様に表示されます。
"border: orange 2px solid;"で、枠をつけています。
borderは「上下左右に枠をつける」というCSSです。
orange, 2px, solidはborderに対するパラメーターです。 それぞれ次の表のような意味があります。
| パラメーター | 説明 |
| orange |
orangeのところは色指定です。ここを変えれば、別の色にすることができます。 |
| 2px |
2pxのところは枠線の太さです。数値を変えれば、細い線や太い線に変わります。 |
| solid |
solidのところは枠線の種類です。下の例のように、ここを変えると種類を変えることができます。
<div style="border:navy 6px double; padding: .5em;">二重線</div>
他にも種類がありますが、詳しくは検索して調べてください。 |
また、文字の色と枠の色を同じにする場合は、borderの色指定を省略できます。虹の枠にすることもできます。
<div style="color: green; border: 1px solid; padding: .5em;">文字と枠が同じ色</div>
<div style="animation: 1s infinite rainbow; border: 2px solid;"><div style="color:black;">枠を虹にする。そのままだと文字も虹色になるので、divを二重にして内側で文字の色を黒に戻す。</div></div>
上で示した例を入力すると、次のように表示されます。
虹色の指定については「虹色」に説明があるので、割愛します。
枠線はブロックの上下左右全てを覆うのではなく、「下辺だけ」のようにすることもできます。
<div style="color: green; border-bottom: 1px solid;">下だけ枠をつける</div>
borderをborder-bottomに変えると下だけの線になります。
同様に「上だけ」「左だけ」のようなCSSもあります。詳しくは検索して調べてください。
ブロックは特別な設定をしないと四角（長方形）です。角は直角になっています。
設定をすることで角を丸くすることができます。次のように入力してください。
<div style="border-radius: 8px; border: orange 2px solid; padding: .5em;">丸い枠線</div>
"border-radius: 8px;"で角が丸くなります。
8pxのpxはピクセル単位であることを表し、角の半径が８ピクセルになるように指定しています。 この数字で半径を大きくしたり小さくしたりすることができます。
em単位で指定することもできます。
半径をどんどん大きくして、ブロックの高さ半分を超えると、左辺と右辺が半円になります。 （ブロックの横幅の半分を超えると、上辺と下辺が半円になります。）
<div style="border-radius: 4em; border: #8F8 3px solid; padding: .5em 2em; background-color: #CFC; text-align: center;">こういう「見出し」もありますよね？</div>
border-radiusは枠線（border）がなくても、使う事ができます。
border-radiusの指定はもっと他にもあり、指定の仕方で一部の角だけ丸にしたり、全体的に楕円のようにしたりすることもできます。
<div style="border-radius: 5em 5em 0 0; padding: .5em 2em; background-color: #CFC; text-align: center;">枠無し＆上の角だけ丸く</div>
<div style="border-radius: 50%; padding: 2em; background-color: pink; text-align: center;">楕円</div>
詳しくは、検索して調べて下さい。
上で示した例を入力すると、次のように表示されます。