記事本文で下線や枠線などの装飾を使いたくありませんか？
目立たせたりまとめ風にしたり……使い方は色々あります。使えたら便利ですよね。
BloggerはHTMLとCSSが分かれていないのでやり方が分かりにくいかもしれません。
でも下線や枠線の装飾は可能なので、本記事ではその方法を詳しく解説します！
HTMLビューに切り替え
記事本文に装飾に使うコードを挿入するには、HTMLビューでの編集が必要になります。
HTMLビューは記事を書く画面のタイトル下にあるメニューアイコンの一番左で切り替えられます。
適宜切り替えて、以降のコードを貼り付けて編集してください。
下線（アンダーライン）の種類
基本は以下のコードになります。
<div style="border-bottom: 線の種類 太さ カラーコード">下線を引きたい文字</div>
カラーコードは、例えば赤なら【red】【#ff0000】などの表記ができます。
以下は線の種類ごとのコード例です。
線の太さとカラーコードを好みの物に変更してお使いください。
実線
<div style="border-bottom: solid 5px gold">ここに文字を入力</div>
点線
<div style="border-bottom: dotted 5px gold">ここに文字を入力</div>
破線
<div style="border-bottom: dashed 5px gold">ここに文字を入力</div>
二重線
<div style="border-bottom: double 5px gold">ここに文字を入力</div>
※二重線の場合、太さ2px以上必要
枠線の種類
基本は以下のコードになります。
<div style="border: 線の種類 太さ カラーコード">囲いたい文字</div>
以下は枠線の種類ごとのコード例です。
線の太さとカラーコードを好みの物に変更してお使いください。
実線
<div style="border: solid 5px skyblue">ここに文字を入力</div>
点線
<div style="border: dotted 5px skyblue">ここに文字を入力</div>
破線
<div style="border: dashed 5px skyblue">ここに文字を入力</div>
二重線
<div style="border: double 5px skyblue">ここに文字を入力</div>
※二重線の場合、太さは2px以上必要
凹枠線
<div style="border: groove 10px skyblue">ここに文字を入力</div>
凸枠線
<div style="border: ridge 10px skyblue">ここに文字を入力</div>
埋め込み
<div style="border: inset 10px skyblue">ここに文字を入力</div>
出っ張り
<div style="border: outset 10px skyblue">ここに文字を入力</div>
装飾の調整
上述のコードに余白や角を丸めたりといった装飾を加えることが可能です。
余白
余白は【padding: ●px】で指定できます。
<div style="border: solid 5px skyblue; padding: 10px;">ここに文字を入力</div>
<div style="border: solid 5px skyblue; padding: 30px;">ここに文字を入力</div>
角を丸める
角の丸みは【border-radius: ●px】で指定できます。
<div style="border: solid 5px skyblue; border-radius: 5px;">ここに文字を入力</div>
<div style="border: solid 5px skyblue; border-radius: 20px;">ここに文字を入力</div>
背景色
背景の色は【background: カラーコード】で指定できます。
<div style="border: solid 5px skyblue; background: darkblue;">ここに文字を入力</div>
文字の長さに合わせる
横幅を文字の長さに合わせる場合、【width: fit-content】を追加します。
<div style="border: solid 5px skyblue; width: fit-content;">ここに文字を入力</div>
例：長い長い長い長い長い
例：短い
組み合わせ例
組み合わせの例をいくつか載せておきます。
参考にしてみてください。
<div style="border-top: double 10px orange; border-bottom: double 10px orange; padding: 15px; ">ここに文字を入力</div>
※border-topで上線
<div style="border-top: 10px dotted pink; border-bottom: dotted 10px pink; padding: 10px; background: deeppink;">ここに文字を入力</div>
※border-topで上線
<div style="border: dashed 15px purple; padding: 5px; border-radius: 10px">ここに文字を入力</div>
<div style="border: groove 20px green; padding: 20px; background: darkgreen;">ここに文字を入力</div>
<div style="border: outset 10px crimson; padding: 10px; border-radius: 20px;">ここに文字を入力</div>
<div style="padding: 15px; border-radius: 25px; background: violet">ここに文字を入力</div>
※枠線なし
装飾を活用しよう！
組み合わせ次第で様々な下線や枠線がデザインできます。
文章を目立たせたりまとめるのに使ったりと、用途も色々です。
下線や枠線で、思い通りの記事に仕上げてみましょう！
