4.プチ☆カスタマイズ

HTML編集画面を使って、簡単な枠をつける方法を紹介します。

HTMLに直接CSSを加えることで、外枠をつけて、このようにいろいろアレンジできます。

【枠内で改行したい方へ】

枠内で改行したい場合は、Shiftを押しながら改行してください。<br>タグが挿入されます。

※Shiftを押さないと、<p></p>タグになり、枠が２つできちゃったりしますのでご注意を。

1. HTMLが編集できる画面（HTMLソースエディタ）に切り替えます。
2. 下記のHTMLソースを“コピペ”して使ってください。

１）細かい点線の枠に入れる

↓下記をコピー＆ペースト

<div style="padding: 15px; margin-bottom: 15px; border: 5px dotted #F694B5;">
    ここに文字を入力する。
</div>

２）点線の枠に入れる

↓下記をコピー＆ペースト

<div style="padding: 15px; margin-bottom: 10px; border: 3px dashed #F694B5;">
    ここに文字を入力する。
</div>

３）実線の枠に入れる

↓下記をコピー＆ペースト

<div style="padding: 15px; margin-bottom: 10px; border: 3px solid #F694B5;">
    ここに文字を入力する。
</div>

４）二重線の枠に入れる

↓下記をコピー＆ペースト

<div style="padding: 15px; margin-bottom: 10px; border: 5px double #F694B5;">
    ここに文字を入力する。
</div>

５）細かい点線の枠に入れる（角丸つき）

↓下記をコピー＆ペースト

<div style="padding: 15px; margin-bottom: 10px; border: 5px dotted #F694B5; border-radius: 50px;">
    ここに文字を入力する。
</div>

６）点線の枠に入れる（角丸つき）

↓下記をコピー＆ペースト

<div style="padding: 15px; margin-bottom: 10px; border: 3px dashed #F694B5; border-radius: 50px;">
    ここに文字を入力する。
</div>

７）実線の枠に入れる（角丸つき）

↓下記をコピー＆ペースト

<div style="padding: 15px; margin-bottom: 10px; border: 3px solid #F694B5; border-radius: 50px;">
    ここに文字を入力する。
</div>

８）二重線の枠に入れる（角丸つき）

↓下記をコピー＆ペースト

<div style="padding: 10px; margin-bottom: 10px; border: 5px double #F694B5; border-radius: 50px;">
    ここに文字を入力する。
</div>