文章の背景に色をつけたい、文章を枠で囲いたいとき

JIMDOで文章のバックに色をつけたい時や、枠を付けたい時、ありますよね〜

でも「枠」や「背景の色」などののアイコンが無い。。。

 

そんな時は文章の右にある「</>」アイコンをクリックするとコードが表示され、HTMLのコードを書くことが出来きますよ♪

コードも下に記載していますのでコピペしてぜひ試してみて下さいね(^^)

①コンテンツを追加

②「文章」を選択

③HTMLを編集

「htmlの編集」に下記のhtmlをコピペして「OK」を押すと反映されます。

その後文章を変更されて下さい。


今回は3パターン記述していますので色や線の太さを変更してご自分でカスタマイズされ使ってみて下さいね。

他にも色々なパターンがを記述されたページがありますので探されて見て下さいね〜(^^)

枠に色をつける

上記のように枠に色をつけたい時は下記のようにhtmlを記述します。WEB色見本で調べ、「#7bcce4」のところを変更して下さい。

<div style="padding: 10px; margin-bottom: 10px; border: 2px solid #7bcce4;">

<p><b>枠に色をつける</b></p>

</div>

背景に色をつける

上記のように背景色をつけたい時は下記のようにhtmlを記述します。WEB色見本で調べ、「#daecf3」のところを変更して下さい。

<div style="padding: 10px; margin-bottom: 10px; border: 10px; background-color: #daecf3;">

<p><b>背景に色をつける</b></p>

</div>

背景に色をつける(角丸)

上記のように背景色をつけたい時は下記のようにhtmlを記述します。WEB色見本で調べ、「#daecf3」のところを変更して下さい。

<div style="padding: 10px; margin-bottom: 10px; border-radius: 10px; background-color: #daecf3;">

<p><b>背景に色をつける(角丸)</b></p>

</div>