ただの黒いラインだけなら左上にある
アンダーラインアイコン
からすぐできます。
線を引きたい場所をドラッグしてアイコンをクリックでOKですね。
色付きのアンダーラインをひく場合は
<span style="background: linear-gradient(transparent 60%, #afeeee 60%);">文</span>
をHTML編集の画面に貼り付けます。
そうするとこうなります。
「文」と書いてあるところに「そうするとこうなります。」を書くわけですね♪
色は#のうしろの部分で指定されています。
色ごとにサンプルを作っていきます。
自分で好きな色を自由に選びたい！という方はこちらを参考にしてください。
1.ビビッドカラー
赤（#ed1c24）
サンプル
青（#0c4da2）
サンプル
黄色（#fff200）
サンプル
緑（#28a44a）
サンプル
紫（#702c91）
サンプル
2.ソフトカラー
赤系（#cc7965）
サンプル
青系（#70769d）
サンプル
黄色系（#f7efa2）
サンプル
緑系（#95b58d）
サンプル
紫系（#8d6c95）
サンプル
3.ペールカラー
赤系（#fabea7）
サンプル
青系（#aeb5dc）
サンプル
黄色系（#fffac2）
サンプル
緑系（#c3dcbe）
サンプル
紫系（#c5b2d6）
サンプル
4.ライトカラー
赤系（#f69679）
サンプル文
青系（#8490c8）
サンプル文
黄色系（#fff799）
サンプル文
緑系（#9fca99）
サンプル文
紫系（#a888be）
サンプル文
5.ディープカラー
赤系（#8b0304）
サンプル
青系（#022561）
サンプル
黄色系（#968d00）
サンプル
緑系（#0b564f）
サンプル
紫系（#410155）
サンプル
アンダーラインに使う色は、あまり濃いと文字が見えなくなってしまうので軽めのほうが合いますね。
よく使いたい色を定型文として保存しておくと便利です。
まず右の追加アイコンをクリックし、「定型文貼り付け」機能を有効にします。
そうすると
「定型文貼り付けアイコン」
が右に現れます。
「定型文貼り付け」のアイコンをクリックして「定型文を作成する」をクリックし、わかりやすいタイトルを付けてコードを保存します。
保存しておいた定型文を選択し、みたまま編集画面に貼り付けて使えます。
たとえばこんな感じ。
定型文は無料版だと15件、有料版だと100件まで登録できる超便利機能です。
自分の好きな色を使うこともでき、ほぼ無限にカスタマイズできると思うとわくわくしますね！
コードはこちらの記事を参考にさせていただきました。
<span style="background: linear-gradient(transparent 60%, #afeeee 60%);">文</span>
また、このコードの中の60という数字を70にするとこんな感じ。
80にするとこんな感じ。
90にするとこんな感じになります。
前の数字は線の太さで、大きくなるほど細くなります。
また後ろの数字は色の濃さで、大きくなるほど薄くなりますね。
アンダーラインで文字が見えなくならないようにするには、前の数字を９０にするとよさそうです。
