枠線を手書きでぐるぐる書いたようなボックスデザイン／CSSではてなブログカスタマイズ
マステ風見出しデザインに引き続き、枠線を手書きでぐるぐる書いたようなボックスデザインを作ったのでご紹介します。
マステ風の見出しデザインについてはこちら。
枠線を手書きでぐるぐる書いたようなボックスデザイン
タイトルなどはなく、シンプルにこんな感じです。
枠線を手書きでぐるぐる書いた感じのボックスデザインです。
border：線の種類や太さ、色を設定します
border-radius：ボックスの角のまるみを設定します
transform：重なっているボックスの角度を設定します。
.box{
position: relative;
margin: 2em 0;
padding: 2em 2em;/*文字まわりの余白*/
border: solid 1px #777777;/*線の種類、太さ、色*/
border-radius: 50px;/*ボックスの角のまるみ*/
}
.box:before, .box:after{
position: absolute;
top: 0;
content:'';
width: 100%;
height: 100%;
border-radius: 50px;/*ボックスの角のまるみ*/
}
.box:before{
left:0;
border: solid 1px #777777;/*線の種類、太さ、色*/
transform: rotate(-0.7deg);/*ボックスの角度*/
}
.box:after{
left:0;
border: solid 1px #777777;/*線の種類、太さ、色*/
transform: rotate(0.7deg);/*ボックスの角度*/
}
.box p {
margin: 0;
padding: 0;
}
※他のボックスと併用する場合は、名前がかぶらないように注意してください。
「box」の線に「box:before」「box:after」の線を重ねて、それぞれ「transform」で角度をつけています。
なので、線の色や種類を変えるときは「box」「box:before」「box:after」のそれぞれの「border」について修正が必要です。
3色とも違う色にしたり、同系色でまとめてみるのも面白いかもしれません。
3色バラバラにした例
青系で統一した例
そのまま使うもよし、色や線を変えてみるもよし。いろいろ試してお好みのものを見つけてみてください。
使うときは以下のhtmlコードを貼り付けて使います。
<div class="box">
<p>ここに文章</p>
</div>
※他のボックスと併用する場合は、名前がかぶらないように注意してください。
CSSで名前を変えた場合は、こっちの<div class="box">の部分も変更が必要です。
以上です！
ボックス以外のカスタマイズ方法についてはこちらをどうぞ。
はてなブログのブログテーマ「Minimalism」を使っていなくても使えるCSSもまとめているのでぜひにー。
合わせてどうぞ
