2016/09/18

WordPress 【Stinger7】 フレーム(囲み枠)を可愛くカスタマイズする簡単2ステップ

murmure de chat......

スティンガー7

以前に書いた記事
WordPress 【Stinger7】5つのカスタマイズ備忘録(女子ブロガー用)をみていただいた方から、使っているフレーム(囲み枠)のコードについてお問い合せいただいたので書いていきますね。

今回はこの4つです。 下のコードをstyle.cssに貼り付けてくださいね。 カラーや幅はお好みで変えてみましょう。

box

囲み枠

style.cssにコピペでOKなので注意書きや、強調したいときに使ってください。

破線で囲んだボックス

すこし大きい破線のほうが優しい印象になります。

.box1 {
	width: 80%;/*100%にしたら記事幅いっぱいになります*/
	margin: 36px auto;
	padding: 20px;
	line-height: 1.5;
	position: relative;
	border: #ffdab9 dashed 4px;/*左から点線のカラー 線の種類 幅*/
	background: #FFF;/*背景色*/
}

太さの異なる二重枠のボックス

中のボックスにカラーを入れたらまた違った雰囲気になります。

.box2{
	width: 80%;/*100%にしたら記事幅いっぱいになります*/
	margin: 36px auto;
	padding: 20px;
	line-height: 1.5;
	position: relative;
	background: #fff;/*背景色*/
	border: #ffdab9 solid 4px;/*外枠のカラー 線の種類 幅*/
	z-index: 10;
}
.box2:before {
	content: "";
	position: absolute;
	background: #fff;
	margin: 3px;
	border: #ffdab9 solid 2px;/*内側の枠*/
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	z-index: -10;
}

エアブラシでかいたようなボックス

カラーを変えるとグラデーションになります。

.box3 {	
	width: 80%;/*100%にしたら記事幅いっぱいになります*/
	margin: 36px auto;
	padding: 30px 25px 0;
	line-height: 1.5;
	position: relative;
	padding: 10px 20px;
	background: #ffdab9;
	box-shadow: #ffdab9 0 0 10px 10px;
	-webkit-box-shadow: #ffdab9 0 0 10px 10px;
	-moz-box-shadow: #ffdab9 0 0 10px 10px;
}

ふんわり浮いたような影のあるボックス

シンプルながら影で立体感のあるボックスになります。

.box4{
	width: 80%;/*100%にしたら記事幅いっぱいになります*/
	margin: 36px auto;
	padding: 20px;
	line-height: 1.5;
	position: relative;
	border: #ffdab9 solid 3px;
	border-radius: 5px;
	box-shadow: 0 5px 3px -3px rgba(0,0,0,0.4);/*boxの影*/
}
カラーを変えるには、カラーコードが必要になります。
参考WEB色見本 原色大辞典
他にもカラーコードで検索したらでてきますので、ブックマークにいれておくと便利です。

style.cssに貼り付けて保存したらこれで準備は完了です。 

そしてこれを投稿記事に使うには

<div class="box1">枠のなかにいれる文字</div>

これで指定した枠に文字が入ります。

html

これで記事に枠が使えるようになります。 サイトのイメージに合わせてカラーを変えるだけでもかなりアクセントになりますよ。 ぜひ使ってみてくださいね。

この記事が気に入ったら
いいね! お願いします

Murmure de chat の
最新情報をお届けします

‎Twitterで 糀まみ@pawpaw_net を