ブログを書く時にあると便利なボックスを今回は作っていきます。
何か画像を途中で入る記事であればいいですが、文章だけの記事になってしまうことって個人的には意識しないと結構あります。
そんな時に役に立つのが今回作成する「ボックス」です!
これを使えば、情報をまとめることもでき、かつ、派手目な色にすれば差し色にもなるので、記事を見やすくすることも簡単にできますよ!
コピペでできるので、是非ともお試しあれ!
なお本カスタマイズを利用する場合はプラグインの「AddQuicktag」を使うことで効率よくブログを記事を作成することができます。
ちなみにAddQuicktagは重くならないですし(個人的な感想です)、もし気になるのであれば、記事を書かないときには無効化することもできるので、お気軽にお試しください。
完成図
今回のカスタマイズでこのような3種類のボックスを使えるようになります。
注意点box
ポイントbox
参考box
実物
以下に表示されているものが実物です。
場合によっては上記画像と異なることがありますので、ご了承ください。
注意点Box
- 注意
- 注意
- 注意
ポイントBox
- ポイント
- ポイント
- ポイント
参考Box
- 参考
- 参考
- 参考
導入方法
上記のカスタマイズを導入する方法はこのようになります。
CSSをコピペ → ボックスで囲みたい個所をboxのclassで囲む
です!
まずはCSSコードを追記しましょう。
style.cssにコードを追記する!
まずは下記のコードをstyle.cssにコピペします。
.iconbox{ position:relative; width:98%; border:1px solid #aaa; border-radius:5px; padding:30px 20px 20px 20px; margin-top:50px; margin-bottom:30px } .iconbox ol{ position:relative; counter-reset:number; list-style:none; padding-left:0; } .iconbox ol li:before{ position:absolute; left:10px; display:block; counter-increment:number; content:counter(number); font-size:15px; height:20px; width:20px; line-height:20px; text-align:center; border-radius:50px; } .iconbox ol li{ padding-left:40px; margin-bottom:20px; line-height:20px; } .iconbox1{/*注意点Box*/ border-color:#FF8C00; } .iconbox1 ol li:before{ background-color:#FF8C00; color:#fff; } .iconbox1 ul li:before{ background-color:#FF8C00; } .iconbox1:before{ content:"注意点"; position:absolute; top:-22px; left:20px; background:#fff; color:#FF8C00; font-weight:bold; font-size:25px; padding:0 5px 0 60px; } .iconbox1:after{ font-family:FontAwesome; content:"\f071"; position:absolute; top:-25px; left:20px; background:#FF8C00; color:#fff; padding:2px 11px; border-radius:50px; font-size:25px; margin-left:5px; } .iconbox2{/*ポイントBox*/ border-color:#FF00FF; } .iconbox2 ol li:before{ background-color:#FF00FF; color:#fff; } .iconbox2 ul li:before{ background-color:#FF00FF; } .iconbox2:before{ content:"ポイント"; position:absolute; top:-22px; left:20px; background:#fff; color:#FF00FF; font-weight:bold; font-size:25px; padding:0 5px 0 60px; } .iconbox2:after{ font-family:FontAwesome; content:"\f00c"; position:absolute; top:-25px; left:20px; background:#FF00FF; color:#fff; padding:2px 11px; border-radius:50px; font-size:25px; margin-left:5px; } .iconbox3{/*参考Box*/ border-color:#0066CC; } .iconbox3 ol li:before{ background-color:#0066CC; color:#fff; } .iconbox3 ul li:before{ background-color:#0066CC; } .iconbox3:before{ content:"参考"; position:absolute; top:-22px; left:20px; background:#fff; color:#0066CC; font-weight:bold; font-size:25px; padding:0 5px 0 60px; } .iconbox3:after{ font-family:FontAwesome; content:"\f02d"; position:absolute; top:-25px; left:20px; background:#0066CC; color:#fff; padding:2px 11px; border-radius:50px; font-size:25px; margin-left:5px; }
なお上記コード内にコメントで記載していますが、クラス名は以下の通り対応しています。
クラス名iconbox1→注意点box
クラス名iconbox2→ポイントbox
クラス名iconbox3→参考box
色などを変更したい場合は上記を参考にしてください。
class名で囲む・実用
cssコードのコピペができたらもう使用することができます。
実際に使ってみましょう。
注意点ボックスの場合は以下のように入力します。
<div class="iconbox iconbox1">ここに囲みたい文章やリストを入力</div>
このように表示されます。
各ボックスのclass名は以下のようになります。
<div class="iconbox iconbox1">ここに囲みたい文章やリストを入力</div>
↑注意点Box
<div class="iconbox iconbox2">ここに囲みたい文章やリストを入力</div>
↑ポイントbox
<div class="iconbox iconbox3">ここに囲みたい文章やリストを入力</div>
↑参考ボックス
実用するにはプラグインAddQuicktagがおすすめ
いちいち上記で紹介したクラス名を入力するのは実用的ではありません。
効率よく使うにはAddQuicktagを使うことをおすすめします!
こちらの記事ではAddQuicktagで簡単に導入できるカスタマイズ記事をまとめていますのでぜひご覧ください!
追記(タイトル自由ボックス)
こちらの記事でも紹介しましたが、タイトルを自由に設定できるボックスも作りましたので、こちらでも公開します。
なお、本記事のコードを既にコピペしている場合は、以下のコードをstyle.cssにコピペしてください。
.freenbox{ position:relative; border-color:#FF3270 !important; } .freenbox .freenbox-title{ position:absolute; top:-20px; background:#fff; padding:0 10px; color:#FF3270; font-size:22px; font-weight:bold; } .freenbox ol li:before{ background-color:#FF3270; color:#fff; }
class名
タイトルを自由に設定できるボックスを使う場合は、以下のクラス名で囲ってください。
<div class="iconbox freenbox"> <span class="freenbox-title">ここに題名を入れて下さい</span>ここはボックスの中 </div>
こんな感じで表示されます。
<ol>のリストも設定しているので<ol>のリストを使用した場合は、このようになります。
コードはこんな感じになっています。
<div class="iconbox freenbox"> <span class="freenbox-title">ここに題名を入れて下さい</span> <li>ご自由にどうぞ</li> <li>ご自由にどうぞ</li> <li>ご自由にどうぞ</li> </div>
コメント
質問よろしいでしょうか。
ボックスのCSSを参考にさせていただいたのですが、注意点の「!」やポイントの「✔️」の部分が「⬜︎」に文字化けしてしまいます。
どこの部分を直せば正しく表示されるのでしょうか?
かずさん
質問ありがとうございます。
文字化けする件ですが、
考えられるのは「FontAwesome」のバージョンでしょうか?
当記事のコードではFontAwesomeのバージョンは「4」のもので記述しています。
もしFontAwesomeが「5」を導入している場合は、該当するアイコンのコードを変更することで、
解決するかもしれません。