超簡単♪ 無料はてなブログにカワイイ「BOX」を挿入する方法
ブログを書くのに慣れてくると、ちょっといじりたくなってきませんか～？
今回は、カワイイ「BOX」を挿入する方法をご紹介します（*＾＾*
目次
記載してるコードをコピペするだけなんで、めっちゃ超簡単ですよ～♪
ステッチで縁取りしたBOX
「HTML編集」に、下記コードをコピペすると
<div style="color: #524336; font-family: 'Helvetica Neue', Helvetica, Arial, 'Hiragino Kaku Gothic Pro', Meiryo, 'MS PGothic', sans-serif; font-size: 15.2px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; text-decoration-style: initial; text-decoration-color: initial;">↓</div>
<div style="border: dashed 3px #ff1493; -webkit-border: 10px; -moz-border: 10px; background: #000000; box-shadow: 0px 0px 0px 10px #000000; margin-top: 15px; margin-bottom: 15px; padding: 15px;"> </div>
「編集 見たまま」で見ると、こんなBOXが表示されます
↓
ピンク文字のコードの部分を好きな色に変更して、お気に入りのBOXにしてみてね～
あとは、BOXの中にカーソルを持ってきて、文字入力するだけ〜
基本の色コードはこちらをご参考にしてくださいね～
↓
ちょっとBOXの角を丸くアレンジ
「HTML編集」に、下記コードをコピペすると
<div style="color: #524336; font-family: 'Helvetica Neue', Helvetica, Arial, 'Hiragino Kaku Gothic Pro', Meiryo, 'MS PGothic', sans-serif; font-size: 15.2px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; text-decoration-style: initial; text-decoration-color: initial;">↓</div>
<div style="border: dashed 3px #ee82ee; -webkit-border: 10px; border-radius: 10px; -moz-border: 10px; background: #7b68ee; box-shadow: 0px 0px 0px 10px #7b68ee; margin-top: 15px; margin-bottom: 15px; padding: 15px;"> </div>
「編集 見たまま」で見ると、こんな枠線が表示されます
↓
ピンク文字のコードの部分を好きな色に変更して、お気に入りのBOXにしてみてね～
グラデーションのBOX
「HTML編集」に、下記コードをコピペすると
<div style="border: 0px solid #00bfff; -webkit-border: 10px; -moz-border: 10px; background: linear-gradient(to right, #ffb03c, #ff708d); color: #fff; margin-top: 15px; margin-bottom: 15px; padding: 15px;"> </div>
「編集 見たまま」で見ると、こんなBOXが表示されます
ピンク文字のコードの部分を好きな色に変更して、お気に入りのBOXにしてみてね～
ちょっとBOXの角を丸くアレンジ
「HTML編集」に、下記コードをコピペすると
<div style="border: 0px solid #00bfff; -webkit-border: 10px;border-radius: 10px; -moz-border: 10px; background: linear-gradient(to right, #6495ed, #00ced1); color: #9370db; margin-top: 15px; margin-bottom: 15px; padding: 15px;"> </div>
「編集 見たまま」で見ると、こんな枠線が表示されます
↓
ピンク文字のコードの部分を好きな色に変更して、お気に入りのBOXにしてみてね～
私が独学で色々試してみてOKだったコードなんで、よく解っている方から見たら、ここ変とか、無駄なコード入れてる、とかって箇所があるかもしれません（＾＾；
ま、なってればいいのだ～（*＾＾*b
無料はてなブログだけど、もうちょっとアレンジしたいけどわっから～んっ、て方の、ご参考にして頂けたら嬉しいです♪
にほんブログ村