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

この記事は約234秒で読めます。

シェアしてねっ!

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

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

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

サンプル

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

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

いかがでしょうか?

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

作った4種類のBOX

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

ここに文章

赤いドットで囲まれたBOX

ここに文章

背景がレッドのインパクトあるBOX

ここに文章

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

ここに文章

CSSソースコード

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

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

[crayon-5d3351c946948381548335/]

赤いドットで囲まれたBOX

[crayon-5d3351c94695c199914385/]

背景がレッドのインパクトあるBOX

[crayon-5d3351c946965102517598/]

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

[crayon-5d3351c94696e414239683/]

AddQuickTagでさらに便利に

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

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

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

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

まとめ

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

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

TwitterでLeo Miyanagaを

シェアしてねっ!

PR
気軽にコメントください!
書いてる人
PR
トップへ戻る