【備忘録】ブログ記事内にオシャレなボックスを挿入するためのCSSカスタマイズ

今日は最近設置したCSSのメモ。

ブログを書く中で、記事の中に囲いを作って目立たせたい文章があります。

文字で説明するよりイメージで見る方がわかりやすいと思うので比較イメージを貼りますね。

サンプル

こちらは文字のサイズとボールド加工で作った「今回のポイント」を生じするやり方。

こちらは「POINT!」と書かれたボックスで囲った中にポイントを書くやり方。

いかがでしょうか？

個人的な好みの問題もあるかとは思いますが、ボクはこうしてスタイルを加工して設定したボックスの方がインパクトが大きいかなーと思っています。

MoKuJi

作った4種類のBOX
CSSソースコード
AddQuickTagでさらに便利に
まとめ

作った4種類のBOX

ブラックにステッチの施されたBOX

ここに文章

ドットで囲まれたBOX

ここに文章

背景がフラットカラーでインパクトあるBOX

ここに文章

「POINT!」の文字がついたBOX

ここに文章

CSSソースコード

それではそれぞれのCSSを一応書いておきます。

ブラックにステッチの施されたBOX

.sample-box {
background-color: #222;
border: 2px dashed #e81c4f;
border-radius: 8px;
box-shadow: 0 0 0 4px #222;
color: #fff;
margin:3 0px;
padding: 2em;
}

ドットで囲まれたBOX

.sample-box2 {
 background-color: #fff;
 border: 3px dashed #ee5555;
 border-radius: 8px;
 color: #444;
 margin: 30px;
 padding: 1em 2em;
}

背景がカラーのインパクトあるBOX

.sample-box3 {
 background-color: #e81c4f;
 border: 0px dashed #e81c4f;
 border-radius: 8px;
 box-shadow: 0 0 0 4px #e81c4f;
 color: #fff;
 margin: 30px;
 padding: 2em;
}

「POINT!」の文字がついたBOX

.sample-box-point {
 border: 3px solid #e81c4f;
 border-radius: 4px;
 margin: 30px;
 padding: 2em;
 position: relative;
}
.sample-box-point::before {
 background-color: #fff;
 color: #e81c4f;
 content: "POINT!";
 font-weight: bold;
 left: -.5em;
 margin: 30px;
 padding: 0 .5em;
 position: absolute;
 top: -3em;
}