超簡単♪ 無料はてなブログに、囲み線やBOXを挿入する方法
先ずは、基本的でシンプルな囲み線（枠線）やBOXを挿入する方法をご紹介します
目次
載せてるコードをまんまコピペすればできますんで、まずはコピペしてみてくださいね～（*＾＾*
囲み線（角丸の枠線）を付ける方法
「HTML編集」に、下記コードをコピペすると、細い黒の囲み線(角丸）表示されます
<div style="border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border: 1px solid #000000; margin-top: 15px; margin-bottom: 15px; padding: 15px;">
「編集 見たまま」で見ると、こんな枠線が表示されます
↓
囲み線の中にカーソルを合わせ、あとは文字を入力するだけ
改行すると、自動的に囲み線が広がります
※もし、後からこの囲み線より上の行に囲み線を付けたくなったら、要注意
後から付けた囲み線が、その下に入力されてる文字やリンクも全部囲ってしまいます
↑
何を言ってるかよくわからない。。。ですかね？
まぁ、お試ししてみればわかるので、先ずはやってみてね～（＾＾；
点線の囲み線にアレンジする方法
「HTML編集」に、下記コードをコピペすると、ちょっと太めのピンクの囲み線（角丸）が表示されます
<div style="border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border: 3px dotted #db7093; margin-top: 15px; margin-bottom: 15px; padding: 15px;"> </div>
「編集 見たまま」で見ると、こんな枠線が表示されます
↓
囲み線の色を変更する方法
変更箇所とコードがわかっれいれば、簡単にアレンジできます
<div style="border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border: 3px dotted #db7093; margin-top: 15px; margin-bottom: 15px; padding: 15px;"> </div>
上の、ピンクの点線のコードで説明すると
↓
- 青文字の数字「3」が線の太さ→数値を大きくすると、線が太くなっていきます
（最初に紹介した、細線は「1」でした）
- 黄緑文字の「dotted」が、線の種類（点線）の指示
（最初に紹介した、細線は「solid」でした）
- ピンク文字「#db7093」が色の指示
（最初に紹介した、細線は「#000000」でした）
好きな囲み線に、自由に編集できますね～
基本の色コードはこちらです
数値を変えるとどんな色になるのか、試してみてね～
↓
囲み線の中を塗りつぶす方法
「HTML編集」に、下記コードをコピペすると、囲み線の中が水色で塗りつぶされている、結構太めの水色の囲み線（角丸）が表示されます
<div style="border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border: 5px solid #00bfff; background: #cde4ff; margin-top: 15px; margin-bottom: 15px; padding: 15px;"> </div>
「編集 見たまま」で見ると、こんな枠線が表示されます
↓
- 「background」は背景色の指示
#から始まる色の指示を、お好きな色に変更してね～
左だけ太線のBOXにアレンジする方法
「HTML編集」に、下記コードをコピペすると、囲み線の中が塗りつぶされている、囲み線の外枠なし（角直角）、左だけ太線あり、のBOXが表示されます
<div style="border: 0px solid #00bfff; -webkit-border: 10px; -moz-border: 10px; background: #fffacd; border-left: solid 10px #ffc06e; margin-top: 15px; margin-bottom: 15px; padding: 15px;"> </div>
「編集 見たまま」で見ると、こんなBOXが表示されます
↓
BOXの中にカーソルを合わせ、あとは文字を入力するだけ
改行すると、自動的にBOXが広がります
緑文字の「border-left」が左という位置の指示、黄緑文字の「solid」が線の種類の指示、明るい青線文字「10px」が線の太さの指示、朱色の「#ffc06e」が線の色の指示
右にも線を加えれば両サイド太線、上下にも変更可能ですし、この部分を削除すれば、背景色だけのBOXになります
<div style="border: 0px solid #00bfff; -webkit-border: 10px; -moz-border: 10px; background: #fffacd; border-left: solid 10px #ffc06e; border-right: solid 10px #ffc06e; margin-top: 15px; margin-bottom: 15px; padding: 15px;"> </div>
と、「HTML編集」に、下記コードをコピペすると
↓
<div style="border: 0px solid #00bfff; -webkit-border: 10px; -moz-border: 10px; background: #fffacd; border-top: solid 10px #ffc06e; border-bottom: solid 10px #ffc06e; margin-top: 15px; margin-bottom: 15px; padding: 15px;"> </div>
と、「HTML編集」に、下記コードをコピペすると
↓
<div style="border: 0px solid #00bfff; -webkit-border: 10px; -moz-border: 10px; background: #fffacd; margin-top: 15px; margin-bottom: 15px; padding: 15px;"> </div>
と、「HTML編集」に、下記コードをコピペすると
↓
こんな感じ
BOXに影を付ける方法
「HTML編集」に、下記コードをコピペすると、影付きのBOXが表示されます
<div style="border: 0px solid #00bfff; -webkit-border: 10px; -moz-border: 10px; background: #fffacd; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.32); /*影*/ margin-top: 15px; margin-bottom: 15px; padding: 15px;"> </div>
「編集 見たまま」で見ると、こんな影付きのBOXが表示されます
↓
私が独学で色々試してみてOKだったコードなんで、よく解っている方から見たら、ここ変とか、無駄なコード入れてる、とかって箇所があるかもしれません（＾＾；
ま、なってればいいのだ～（*＾＾*b
無料はてなブログだけど、もうちょっとアレンジしたいけどわっから～んっ、て方の、ご参考にして頂けたら嬉しいです♪
にほんブログ村