こんにちは、QUATRE（キャトル）です。
はてなブログをはじめて５ヶ月が経ちました。スターやブックマークをつけてくださっているみなさんに、本当に感謝です。記事を更新するのでいっぱいいっぱいで読みにくい記事なのに、ありがとうございます！
さて、みなさんのはてなブログのようにおしゃれにアップグレードしたいなと思いつつ、勉強がのばしのばしになってたので、熱が冷めないうちに、今日からとりかかります。
今回のテーマは、ボックスデザインの作り方です。
作り方の手順を順番にメモしていきます。（内容は随時更新していきます。）
ボックスデザイン（囲み枠）を作る方法
ボックスデザインを挿入する方法は２種類あります。
- HTMLコードを挿入するだけ
- CSSでデザインを設定させた後、HTMLコードを挿入する
それぞれに、メリットとデメリットがあります。
HTMLコードを挿入するだけ
○ 簡単に挿入することができる
× 編集画面のコードが長いので、編集するときに見にくい
とりあえずこのパターンを使おうというときにおすすめです。
CSSの設定をする方法
× 最初にひと手間かかる
○ 編集画面のコードが短いので、編集するときに見やすい
何度も繰り返し使いたいお気に入りのデザインがある場合におすすめです。
今回は、HTMLコードを挿入するだけでボックスデザインが使える方法をまとめてみました。
step 1 囲み枠を選ぶ
step 2 HTMLをコピペ
編集画面（見たまま）をHTML編集に切り替えます。
囲み枠を挿入したい箇所に、選んだ囲み枠のHTMLタグをコピペします。
編集画面（見たまま）に戻すと、このようなボックスが表示されているはずです。
step 3 色のコードを選ぶ
このままだと地味なので、色を自分好みの色に変えてみます。
まず、色のコードを選びます。
色とコードのサンプルが一覧表になっていているこちらのサイトが選びやすくおすすめです。
今回はこのサイトからこの色を選んでみました。
（上段）色の名前（下段）色のコード
さらに細かく色を指定したい場合は、こちらが、おすすめです。
step 4 色のコードを変更
step 1で選んだボックスデザインのサンプルの赤い文字#色のコードのところを、step 3で選んだ文字色（#c71585）に変えます。
<fieldset style="border: 3px double #色のコード;"><legend><span style="font-weight: bold;">タイトル</span></legend>
<p>ここに文章</p></fieldset>
↓
<fieldset style="border: 3px double #c71585;"><legend><span style="font-weight: bold;">タイトル</span></legend>
<p>ここに文章</p></fieldset>
すると、自分が選んだ色にボックスの色が変わります！
あとは、いつもどおりの編集（見たまま）画面で、記事を書いていきます。
文字入力の注意点
囲み枠内で改行する場合、Enterのみで改行すると枠外にはみ出るので、Shift＋Enterで改行します。
ボックスデザイン一覧｜タイトルなし
ボックスデザイン一覧｜タイトルあり
ボックスデザイン集
ボックスデザインサンプル｜ピンク系
色のサンプルを入れたコードです。
HTML編集画面を開いて、枠内のコードをコピペしてご利用くださいね！
<div style="border: 2px solid #囲い枠の色コード; padding: 25px 12px 10px; font-size: 1em; border-radius: 5px;">本文</div>
<div style="border: 2px solid #ffb6c1; padding: 25px 12px 10px; font-size: 1em; border-radius: 5px;">本文</div>
<div style="height: 12px;"><span style="margin-left: 8px; padding: 6px 10px; background: #ff69b4; color: #ffffff; font-weight: bold; border-radius: 5px;">タイトル</span></div>
<div style="border: 2px solid #ff69b4; padding: 25px 12px 10px; font-size: 1em; border-radius: 5px;">本文</div>
<div style="border: 2px solid #c71585; padding: 25px 12px 10px; font-size: 1em; border-radius: 5px;">本文</div>
ボックスデザインサンプル｜緑系
<div style="border: 2px solid #74DF00; padding: 25px 12px 10px; font-size: 1em; border-radius: 5px;"><span style="color: #ff0000;">本文</span></div>
<div style="border: 2px solid #adff2f; padding: 25px 12px 10px; font-size: 1em; border-radius: 5px;">本文</div>
ボックスデザインサンプル｜青系
<div style="border: 2px solid #a59aca; padding: 25px 12px 10px; font-size: 1em; border-radius: 5px;">本文</div>
<div style="border: 2px solid #00008b; padding: 25px 12px 10px; font-size: 1em; border-radius: 5px;">本文</div>
ボックスデザインサンプル｜茶色系
<div style="border: 2px solid #544a47; padding: 25px 12px 10px; font-size: 1em; border-radius: 5px;">本文</div>
<div style="border: 2px solid #946243; padding: 25px 12px 10px; font-size: 1em; border-radius: 5px;">本文</div>
<div style="border: 2px solid #d8a373; padding: 25px 12px 10px; font-size: 1em; border-radius: 5px;">本文</div>
ボックスデザインサンプル｜オレンジ
<div style="border: 2px solid #FF4000; padding: 25px 12px 10px; font-size: 1em; border-radius: 5px;">本文</div>
<div style="border: 2px solid #ffa500; padding: 25px 12px 10px; font-size: 1em; border-radius: 5px;">本文</div>
<div style="border: 2px solid #dc143c; padding: 25px 12px 10px; font-size: 1em; border-radius: 5px;">本文</div>
ボックスデザインサンプル｜ぬりつぶし
<div style="background: #f2e2ee; box-shadow: #f2e2ee 0 0 10px 10px; -webkit-box-shadow: #f2e2ee 0 0 10px 10px; -moz-box-shadow: #f2e2ee 0 0 10px 10px; padding: 10px; margin: 20px;">
<p>本文</p>
</div>
<div style="background: #e6e6fa; box-shadow: #e6e6fa 0 0 10px 10px; -webkit-box-shadow: #e6e6fa 0 0 10px 10px; -moz-box-shadow: #e6e6fa 0 0 10px 10px; padding: 10px; margin: 20px;">
<p>本文</p>
</div>
