フリースペースや記事中に囲み枠を使って、目立たせたり、他の記事と分けたりしたときありますよね。
目立たせたい記事、重要な記事に、囲み枠をつけると、見やすくなりますよね。
<div style="border: 1px dashed #ff0000; padding: 15px;"> このような枠です。オレンジ色の点線枠の中に文字を入れてます。
</div>
以下手順を説明します。
STEP：1
記事を書くとき、「通常表示」と「HTML表示」 この２つがあります。枠を挿入する場合には、「HTML表示」に変えます。
STEP：2
以下をコピペして、HTML表示に貼り付けてください。
<div style="border: 1px dashed #ff0000; padding: 15px;"> ● 料金｜地図｜お問い合わせ<br /> </div>
STEP：3
編集画面を「通常表示」に戻します。 オレンジ色の点線で文字を囲った枠が出てきます。
そして、「● 料金｜地図｜お問い合わせ」 赤文字の部分だけ、自分のメニューや伝えたいことに合わせて変更します。
※通常表示のまま、書き直します。 以上が、基本編です。
●囲み枠のサンプルです
以下、いくつか枠のサンプルを置いてますので、ご自由にお使いください。
コピーする範囲は、< ← ここからここまで →> 要は中に書いてあるもの全部コピーして使ってください！
ご利用の際には、「●本文」や「● 料金｜地図｜お問い合わせ」 という部分を、書き直して使ってみてください。
<div style="background:#ffeeee; padding:10px; border:1px solid #ff0000;"> ● 料金｜地図｜お問い合わせ </div>
<div style="border: 1px solid #FF0000; padding: 15px;"> ● 料金｜地図｜お問い合わせ<br /> </div>
<div style="border: 2px solid #FF0000; padding: 30px;"> ● 料金｜地図｜お問い合わせ<br /> </div>
<div style="border: 2px solid #cccccc; padding: 30px;"> ● 料金｜地図｜お問い合わせ<br /> </div>
<div style="border: 1px solid #cccccc; padding: 30px;"> ● 料金｜地図｜お問い合わせ<br /> </div>
●文字が、中央寄せの場合（おすすめじゃないけど）
<div style="border: 1px dotted #FF0000; padding: 15px; width: 300px; text-align: center;"> ● 料金｜地図｜お問い合わせ<br /> </div>
<div style="border: 1px solid #0033FF; padding: 30px; width: 300px;"> ● 料金｜地図｜お問い合わせ<br /> </div>
●枠の色などの書き方は、以下の通りです。
● 料金｜地図｜お問い合わせ
↓
<div style="background:#ffeeee; padding:10px; border:1px solid #ff0000;"> ● 料金｜地図｜お問い合わせ </div>
（上記の例の場合）
background・・・背景色 #ffeeee・・・薄ピンク 1px・・・線の太さ（数字が大きくなると太くなる）
solid・・・直線（線の種類） #ff0000・・・赤色（線の色）
線の種類には
solid・・・直線
double・・・二重線
dotted・・・丸い点線
dashed・・・四角い点線
があります。
お好きなものを使って、あなたのブログを充実させてくださいね。
