bloggerカスタマイズ！記事中に目立つ囲いをつくる！

こんばんはですっ！!

こないだのお見合い大作戦みました？すっごくおもしろかったですよね～笑

なんだか今回参加してた女の子みんなかわいかったですよね！？やっぱり自衛隊だからかわいい女の子がいっぱい集まって、競争率たかかったのかな…？

それに今回は男子もかっこいい！パイロットの人めちゃくちゃタイプ♪かっこよかったなー…。


今回はbloggerの記事の中に目立つ囲いを作るカスタマイズを紹介っ！やってみたらかんたんだったのでやってみてね～っ♪

ただ使うのがけっこうめんどうなんですよ～笑


↑↑囲い見本

カスタマイズとコピペ

bloggerのcssにこんなのをコピペ。こ・れ・だ・け！なんです。超おてがるでしょ～♪

重要！囲いの使い方

デザインするだけならコピペだけなんだけれど、この囲いを使うのがけっこうめんどう笑

なんかほかに方法ないものか…うーん。

使うためにはですねー、記事を書いてるときに左上のHTMLの方に切りかえて、

囲いたいところを<div class="kakoi"></div>で囲わないといけないんですねー。

例えば…、


例えば…、

<div class="kakoi">
ここで囲いの登場っ！
</div>

とすると、


みたいな感じで囲える。でもHTMLと作成をきりかえるのがめんどう…。これはどうしようもないらしい…泣

もっとカスタマイズ♪

このデザインはちょっとなぁ～ってそこの方！ほかにもいろいろカスタマイズできますよ。

後ろをまるまる塗りつぶしたいんやっ！

さっきのcssの中に


をいれるとうしろをまるまるぬりつぶせられるよ。

線の種類をかえたいんやっ！

線の種類はこっちにまとめたんで、ここをみてもらいながらさっきのcssのborderのところをカスタマイズでOK♪

brがじゃまなんやっ！

HTMLにするとbrが文末にたくさんあってけっこうみづらい。

brを消す必要はなくて、例えば、

<div class="kakoi">
ここで囲いの登場っ！<br />
</div>

てなってもきれいにかこえるみたい。