コンセプトリニューアル!「ワクワクに満ちた毎日を!」をテーマにブログを書いていきます!

【備忘録】ブログ記事内にオシャレなボックスを挿入するための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を
このブログを書いてる人
Leo

ワクワクできなきゃ生きてる意味がない!そんな感じでその時その時気になることとかオモシロそう!って思ったことを追いかけて生きてます😷
シアトルで生まれ、大阪育ち、シアトルで10年くらい暮らしたのち、今は大阪ベース。
このブログではLeoが目指す、「ワクワクに満ちた日々!」について発信しています!
詳しいプロフィールはこちら

Leoをフォローする
ワクワクな趣味 WordPress
LEO LOG

Comment 気軽にどうぞ!!

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