コロナに負けるな!ステイホームでブログを書きます!

【備忘録】ブログ記事内にオシャレなボックスを挿入するための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ですが、より読みやすい表示になるためにやってみたので感想があれば聞けたら嬉しいです!

この記事が気に入ったら
いいね!しよう

Leo Miyanagaを
Like
LikeLoveHahaWowSadAngry
このブログを書いてる人
Leo

コロナで色々バグった起業家😷
写真家/ブロガー/YouTuberなど色々やってます。愛機はα7III & RX100VII。
シアトル生まれ、大阪育ち→シアトルにも10年以上住んでましたが今は大阪ベース。
このブログではLeoの気になるコトや毎日の色んなコトを記録しています!
詳しいプロフィールはこちら

Leoをフォローする
Web・Wordpress WORK
LEO LOG

Comment 気軽にどうぞ!!

トップへ戻る
タイトルとURLをコピーしました