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

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

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

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

サンプル

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

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

いかがでしょうか?

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

作った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;
}

AddQuickTagでさらに便利に

WordPressでブログを書いている人なら使っている人も多いと思う「AddQuickTag」というプラグイン。

あらかじめ設定した文字列をボタン一つで挿入できるものですが、これに設定しておくとすぐに使えてより便利。

こんな感じでAddQuickTagに挿入のための文字列を設定します。

こんな感じでエディターページに挿入のためのボタンが出てくるので選択するだけ。

まとめ

ブログ記事をより豊かにするために設置したCSSですが、より読みやすい表示になるためにやってみたので感想があれば聞けたら嬉しいです!

シアトル生まれ、大阪育ち。6年前に独立・起業しましたが、コロナ禍で事業が大ダメージを受け、人生の方向転換に悪戦苦闘の日々です!とにかく、「ワクワク」に満ちた毎日を目指してできることから地道に頑張っています〜!