何をするにも見た目が重要

ハッピーブログコーチの

片岡すみらです。

いつもいいね・読者登録

ありがとうございます

囲い枠の記事も好評頂いておりますので

今日は別のパターンをご紹介します

今回は少し難しい見出し付囲い枠です

まず記事の入力画面を

”HTML表示”に切り替えて下さいね。

これから説明するタグを入れ終わったら

通常表示に戻して文章を入力して下さい。

その時改行する場合は

Shift+Enterで改行して下さい。

Enterのみで改行してしまうと

枠が2つに分かれてしまうので注意

見出し付囲い枠

ここにタイトルを入力する

ここに本文を入力する。
改行はShift+Enter

■このタグをコピペしてね

<div style="background: #ff0000; border: 1px solid #ff0000; padding-left: 10px;"><span style="color: #ffffff; font-weight: bold;">ここにタイトルを入力する</span></div><div style="border: 1px solid #ff0000; padding: 10px;">ここに本文を入力する。<br />改行はShift+Enter</div>

タイトルがでてる直線枠

ここにタイトルを入力するここに本文を入力する。
改行はShift+Enter

■このタグをコピペしてね

<fieldset style="border:2px solid #ff0000;"><legend><span style="font-weight:bold;">ここにタイトルを入力する</span> </legend> ここに本文を入力する。<br />改行はShift+Enter</fieldset>

タイトルがでてる二重線枠

ここにタイトルを入力するここに本文を入力する。
改行はShift+Enter

■このタグをコピペしてね

<fieldset style="border:3px double #ff0000;"><legend><span style="font-weight:bold;">■ここにタイトルを入力する</span> </legend>ここに本文を入力する。<br />改行はShift+Enter</fieldset>

サブタイトル枠

ここにタイトルを入力する

■このタグをコピペしてね

<div style="border-left:10px solid #ff0000; border-bottom:2px solid #ff0000; padding-left:10px; font-weight:bold;">ここにタイトルを入力する</div>

サブタイトル囲い枠

ここにタイトルを入力する

■このタグをコピペしてね

<div style="margin:8px 0; padding: 3px 8px;background:#ff0000; color:#ffffff;">ここにタイトルを入力する</div>