カラー文字作成くん

今回はカラー文字の使い方とどんなふうにカスタマイズができるか説明していきます。

URL : https://k-editor.com/editor/color/

## 基本

カラー文字は文字通り色を変えるためのものです。デフォルトでは以下のコードが出力されます。

<span style="font-size:14px;color:#1b8ef3;line-height:1.7;">サンプル文字</span>

それぞれの意味は以下の通り。

・font-size: 文字サイズ設定

・color: 色設定

・line-height: 行間設定

詳細設定を開くと、文字サイズ、行間、下線、太字設定が可能になります。手軽に色を変えたいときに使うことができます。

## テンプレート

デフォルトの色としていくつか用意しています。上部にあるテンプレ色から選択すると開発者が適当に選んだ色が選べます。

また、カスタムテンプレートの設定の項目で”この設定を保存する”ボタンを押すと現在設定している色、文字サイズ、行間、下線、太線設定がブラウザに保存されます。

保存した場合、次に同じページを訪問した時にテンプレ色の選択肢に表示されます。

## コード説明

下線あり、太字設定した場合は以下のコードが出力されます。

<span style="font-size:14px;color:#1b8ef3;line-height:1.7;font-weight: bold;text-decoration: underline;">サンプル文字</span>

font-weight: 文字太さ設定

text-decoration: 文字装飾

font-weightはlighter;にすると細字になります。

text-decorationは下線だけでなく上線も設定可能です。

text-decoration:underline overline;

半角スペースを入れてoverlineにすると上にも線を引くことができます。

text-decoration:overline だけにすると上だけに線が引かれます。

まぁ、あんまり使うことはないと思われるので割烹エディターでは指定できるようにはしてませんが、こういうことも可能です。

なお、CSSには線の種類を変えるプロパティもあるのですが小説家になろうでは対応していないので割愛します。

-　-　- ✂切り取り✂ -　-　-

ということでカラー文字作成くんの使い方でした。もしよくわからない点などあれば感想などでお知らせください。