13.記事の装飾について

ここでは記事の装飾について解説していきます。

枠の作り方

枠のコード

下記のコードをそのままコピペして、記事内のテキストモードで貼りましょう。

色のコードは一番下のリンクから飛べます。

直線【solid】

<div style="background: #ffffea; padding: 15px; border: 2px solid #ff0000; border-radius: 10px; word-break: break-all;">ここに文章</div>

点線【dotted】

<div style="background: #ffffea; padding: 15px; border: 2px dotted #ff0000; border-radius: 10px; word-break: break-all;">ここに文章</div>

破線【dashed】

<div style="background: #ffffea; padding: 15px; border: 2px dashed #ff0000; border-radius: 10px; word-break: break-all;">ここに文章</div>

二重線【double】

<div style="background: #ffffea; padding: 15px; border: 6px double #ff0000; border-radius: 10px; word-break: break-all;">ここに文章</div>

【見出し付き】

緑色

<div style="background: #66cc66; padding: 5px 10px; color: #ffffff;"><strong>見出し文字</strong></div>
<div style="background: #ffffff; padding: 10px; border: 2px solid #66cc66;">ここに文章</div>

赤色

<div style="background: #ff6666; padding: 5px 10px; color: #ffffff; border-radius: 10px 10px 0 0;"><strong>見出しタイトル</strong></div>
<div style="background: #ffffff; padding: 10px; border: 2px solid #ff6666; border-radius: 0 0 10px 10px;">ここに文章</div>

青色

<div style="isplay: inline-block; background: #3399ff; padding: 5px 10px; color: #ffffff;"><strong>見出しタイトル</strong></div>
<div style="background: #ffffff; padding: 10px; border: 2px solid #3399ff;">ここに文章</div>

カラーコード表