囲み枠を設置する方法【ブログ テクニック】

「ブログ集客」を目指す人にとって、記事の内容も大事ですが、記事の「見栄え」も大事です。

見やすい・読みやすい・わかりやすいブログは、たくさんの人に読んでもらえるブログの特徴です。

ここでは、良く質問される「ブログ テクニック」を使って、ブログ記事の「見栄え」を整える方法をお伝えします。

今回のテーマは「囲み枠を設置する方法」です。
ぜひ、実践して、ブログの見栄えを整えていきましょう!

囲み枠を設置する方法

使いたい囲み枠を選択する ( 囲み枠の種類は、末尾よりお選びください )

例 ▼▼

ここに枠で囲みたい内容を入れます。

 

<div style="padding:10px;border: 2px solid #b0dcd5;">ここに枠で囲みたい内容を入れます。</div>

 

上記の場合、タグ部分をドラッグして、コピー(右クリック)します▼▼



コピーした囲み枠のタグをブログに貼りつけます。

貼りつけたいブログ記事の編集画面で「HTML」をクリックします▼▼
※ 通常は「通常表示」で表示されています。




「HTML」表示に変えて、貼りつけたい囲み枠のタグをペーストする▼▼




「通常表示」をクリックすると、囲み枠が設置されています▼▼




「ここに枠で囲みたい内容を入れます。」上書きで、入れたい文章を書き込みます。

【注意事項】
囲み枠の中での改行は、「Shift+Enter」で改行してください。


囲み枠の種類

 

ここに枠で囲みたい内容を入れます。

 

<div style="padding:10px;border-radius: 5px;border: 2px solid #fadbda;">ここに枠で囲みたい内容を入れます。</div>

ここに枠で囲みたい内容を入れます。

 

<div style="padding:10px;border-radius: 5px;border: 1px solid #d5e4dd;">ここに枠で囲みたい内容を入れます。</div>

ここに枠で囲みたい内容を入れます。

 

<div style="padding:10px;border-radius: 5px;border: 2px solid #ca3a1c;">ここに枠で囲みたい内容を入れます。</div>

ここに枠で囲みたい内容を入れます。

 

<div style="padding:10px;border-radius: 5px;border: 1px solid #887d4a;">ここに枠で囲みたい内容を入れます。</div>

 

ここに枠で囲みたい内容を入れます。

 

<div style="padding:10px;border-radius: 5px;border: 2px solid #f8c6bd;">ここに枠で囲みたい内容を入れます。</div>

 

 

 

ここに枠で囲みたい内容を入れます。


<div style="background:#fce5e2; padding:10px; border:2px dotted #f29c97; border-radius:10px;"> ここに枠で囲みたい内容を入れます。</div>

ここに枠で囲みたい内容を入れます。

 

<div style="background:#fffbc7; padding:10px; border:2px dotted #f9c158; border-radius:10px;"> ここに枠で囲みたい内容を入れます。</div>

ここに枠で囲みたい内容を入れます。

 

<div style="background:#eaf4fc; padding:10px; border:2px dotted #5eb7e8; border-radius:10px;"> ここに枠で囲みたい内容を入れます。</div>

 

ここに枠で囲みたい内容を入れます。

 

<div style="padding:10px;border: 2px solid #ca3a1c;">ここに枠で囲みたい内容を入れます。</div>

ここに枠で囲みたい内容を入れます。

 

<div style="padding:10px;border: 1px solid #ca3a1c;">ここに枠で囲みたい内容を入れます。</div>

ここに枠で囲みたい内容を入れます。

 

<div style="padding:10px;border: 1px solid #887d4a;">ここに枠で囲みたい内容を入れます。</div>

ここに枠で囲みたい内容を入れます。

 

<div style="padding:10px;border: 1px solid #d5e4dd;">ここに枠で囲みたい内容を入れます。</div>

 

ここに枠で囲みたい内容を入れます。

 

<div style="padding:10px;border: 1px solid #eae4d1;">ここに枠で囲みたい内容を入れます。</div>

 

記事を気に入ったらシェアをしてね

セミナー情報 ▶▶
個人向けのセミナーを開催してます

無料LINE@ ▶▶
ビジネス的・心の持ち方を毎日無料配信! ビジネスマインドを育てていきましょう!

無料メルマガ ▶▶
クローズドでしか書けない内容をお届けしています

無料コンテンツ ▶▶
まずは無料で学びたい!という方に役立つ情報をお届けしています

法人企業・行政のみなさまへ ▶▶
法人企業・行政に向けたセミナー・講演・執筆・研修などはコチラのサイトへ

お問合わせ ▶▶