機能

【簡単コピペ】CSSで情報整理に便利なボックスを作るカスタマイズ【Addquicktag利用可】

ブログを書く時にあると便利なボックスを今回は作っていきます。

何か画像を途中で入る記事であればいいですが、文章だけの記事になってしまうことって個人的には意識しないと結構あります。
そんな時に役に立つのが今回作成する「ボックス」です!

これを使えば、情報をまとめることもでき、かつ、派手目な色にすれば差し色にもなるので、記事を見やすくすることも簡単にできますよ!
コピペでできるので、是非ともお試しあれ!

なお本カスタマイズを利用する場合はプラグインの「AddQuicktag」を使うことで効率よくブログを記事を作成することができます。
ちなみにAddQuicktagは重くならないですし(個人的な感想です)、もし気になるのであれば、記事を書かないときには無効化することもできるので、お気軽にお試しください。

スポンサーリンク

完成図(実物)

今回のカスタマイズでこのような3種類のボックスを使えるようになります。

以下に表示されているものが実物です。
注意点Box

  1. 注意
  2. 注意
  3. 注意

ポイントBox

  1. ポイント
  2. ポイント
  3. ポイント

参考Box

  1. 参考
  2. 参考
  3. 参考

導入方法

上記のカスタマイズを導入する方法はこのようになります。
CSSをコピペ → ボックスで囲みたい個所をboxのclassで囲む
です!

まずはCSSコードを追記しましょう。

style.cssにコードを追記する!

まずは下記のコードをstyle.cssにコピペします。

.iconbox{
	position:relative;
	width:91%;
	border:2px solid #aaa;
	border-radius:5px;
	padding:30px 25px 14px;
	margin:50px auto 30px;
	font-weight:bold;
}
.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{
	border-color:#FF8C00;
}
.iconbox1 ol li:before{
	background-color:#FF8C00;
	color:#fff;
}
.iconbox1 ul li:before{
	background-color:#FF8C00;
}
.iconbox:before{
	position:absolute;
	top:-22px;
	left:16px;
	background:#fff;
	font-weight:bold;
	font-size:20px;
	padding:0 5px 0 40px;
}
.iconbox:after{
	position:absolute;
	top:-25px;
	left:15px;
	padding:2px 10px;
	font-size:20px;
	margin-left:5px;
}
.iconbox1:before{
	content:"注意点";
	color:#FF8C00;
}
.iconbox1:after{
	font-family:FontAwesome;
	content:"\f071";
	color:#FF8C00;

}
.iconbox2{
	border-color:#FF00FF;
}

.iconbox2 ol li:before{
	background-color:#FF00FF;
	color:#fff;
}
.iconbox2 ul li:before{
	background-color:#FF00FF;
}
.iconbox2:before{
	content:"ポイント";
	color:#FF00FF;
}
.iconbox2:after{
	font-family:FontAwesome;
	content:"\f00c";
	color:#FF00FF;
}
.iconbox3{
	border-color:#0066CC;
}
.iconbox3 ol li:before{
	background-color:#0066CC;
	color:#fff;
}
.iconbox3 ul li:before{
	background-color:#0066CC;
}
.iconbox3:before{
	content:"参考";
	color:#0066CC;
}
.iconbox3:after{
	font-family:FontAwesome;
	content:"\f02d";
	color:#0066CC;
}

なお上記コード内にコメントで記載していますが、クラス名は以下の通り対応しています。
クラス名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:-15px;
	left:;
	background:#FF3270;
	padding:2px 10px;
	color:#fff;
	font-size:14px;
	font-weight:bold;
	border-radius:5px;
}
.freenbox p{
	margin:1em 0 !important;
}
.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">
    <div class="freenbox-title">ここに題名を入れて下さい</div>
    <li>ご自由にどうぞ</li>
    <li>ご自由にどうぞ</li>
    <li>ご自由にどうぞ</li>
    </div>

    こちらのタイトル自由Boxは、上述の「注意点Box」「ポイントBox」「参考Box」のコードを基に作成しているため、コピペで導入する場合は、「注意点Box」「ポイントBox」「参考Box」のコードも一緒に記述してください。

    コメント

    1. かず より:

      質問よろしいでしょうか。

      ボックスのCSSを参考にさせていただいたのですが、注意点の「!」やポイントの「✔️」の部分が「⬜︎」に文字化けしてしまいます。

      どこの部分を直せば正しく表示されるのでしょうか?

      • ぷるぷるぷるぷる より:

        かずさん
        質問ありがとうございます。
        文字化けする件ですが、
        考えられるのは「FontAwesome」のバージョンでしょうか?

        当記事のコードではFontAwesomeのバージョンは「4」のもので記述しています。
        もしFontAwesomeが「5」を導入している場合は、該当するアイコンのコードを変更することで、
        解決するかもしれません。