コピペでできるボックスデザインサンプル11とビジュアルエディタへのボタン追加方法(CSS)

ブログの記事内で使えるボックスデザイン(囲み枠)の作り方と、記事投稿画面のビジュアルエディタにプルダウンメニューを追加してボックスを使えるようにする方法を紹介します。

以前FontAwesomeを使って記事を装飾する方法を説明したので、今回はFontAwesomeを使ったボックスデザインも紹介します。

【Simplicity】FontAwesomeを使って記事を装飾する方法
FontAwesomeを使って記事を装飾する方法と、Simplicityで使われているFontAwesomeのアイコンを変更する方法について説明します。
スポンサーリンク

ボックスとは

ボックスとは、囲み枠のことです。

このように、文字を色の付いた枠で囲んだもの全般を、ボックス(囲み枠)と言います。

ブログ記事内で、適度にボックスデザインを取り入れると、文章に見た目の変化をつけることができるので、読みやすくなります。

ボックスの作り方

ボックスはCSS(スタイルシート)を利用して、簡単に作ることができます。

例えば、シンプルなグレーのボックスは

(CSS)
.grey-box{
 background-color: #f6f6f6;
 padding:20px;
 margin-bottom:1em;
}
(HTML) 
<div class="grey-box">
グレーボックス
シンプルなグレーボックスの表示例です。
</div>

これだけで作ることができます。

グレーボックス
シンプルなグレーボックスの表示例です。

HTMLは記事の投稿画面のテキストエディタで入力、CSSはスタイルシートに記述します。

ボックスデザイン例

1.枠線付きのボックス

枠線付きのボックス
背景色の他に枠線もつけました。
.box-style1{
 padding: 20px;
 margin-bottom: 1em;
 background-color:#f6f6f6;
 border:1px solid lightgrey;
 }

2.枠線のみのボックス

枠線のみのボックス
背景色はなしで、枠線のみのボックスです。
.box-style2{
 padding: 20px; 
 margin-bottom: 1em;
 border:1px solid lightgrey;
 }

3.角を丸めたボックス

角を丸めたボックス
四隅の角を丸くしました。
.box-style3{ 
 padding: 20px;
 margin-bottom: 1em;
 background-color:#f6f6f6;
 border-radius:5px;
 }

4.二重枠線のボックス

二重枠線のボックス
枠線を二重線にしました。
.box-style4{ 
 padding: 20px;
 margin-bottom: 1em;
 border:3px double lightgrey;
 }

5.上だけ太線

上だけ太線
上にだけ太めの線をつけました。
.box-style5{
 padding: 20px;
 margin-bottom: 1em;
 background-color:#f6f6f6;
 border-top:5px solid lightgrey;
 }

6.上下ストライプ

上下ストライプのボックス
ボックスとは言えないかも
.box-style6{
position:relative;
}
.box-style6:before,
.box-style6:after{
content: "";
position: absolute;
left: 0;
top:0;
width:100%;
height: 4px;
background: repeating-linear-gradient(-45deg, #fff, #fff 1px, #b4b4b4 1px, #b4b4b4 2px);
}
.box-style6:after{
top:auto !important;
bottom:0;
}

FontAwesomeを使ったボックスデザイン例

このブログではSimplicityというテーマを使っているのですが、Simplicityには、FontAwesomeを使ったボックスデザインが、デフォルトで3つ用意されています。

現在はSimplicityの後継であるCocoonを利用しています。

「補足情報(i),(?),(!)」の3つです。

補足情報(i)
補足情報(?)
補足情報(!)

これらは、ビジュアルエディタの[スタイル]から選択することで、簡単に使うことができます。

今回は、このSimplicityの「補足情報ボックス」を参考にして作った、FontAwesomeを使ったボックスデザインを紹介します。

子テーマのCSS(スタイルシート)に記述し、記事内でクラス指定をすれば使えるようになります。
色やサイズを、自分のブログに合うように調節して使って下さい。

1.チェックボックス

.check-box{
background-color:#F2F2F2;
padding: 20px 20px 20px 50px;
position: relative;
margin-top: 1em;
margin-bottom: 1em;
display:block;
}
.check-box::before{
 font-family: "FontAwesome";
 content: '\f058';
 font-size: 40px;
 position: absolute;
 top: 20px;
 left: 8px;
 color:#d9d9d9;
}

2.シェプロンボックス

シェプロンボックス
.chevron-box{
background-color:#cfddd9;
color:#366c73;
padding: 20px 20px 20px 50px;
margin-top: 1em;
margin-bottom: 1em;
display:block;
}
.chevron-box::before{
font-family: "FontAwesome";
content: '\f138'' ';
color:#285750;
font-size: 40px;
position: absolute;
top: 20px;
left: 8px;
}

3.矢印ボックス

矢印ボックス
.arrow-right{
background-color:#F2F2F2;
padding: 20px 20px 20px 50px;
position: relative;
margin-top: 1em;
margin-bottom: 1em;
display:block;
}
.arrow-right::before{
 font-family: "FontAwesome";
 content: '\f0a9';
 font-size: 40px;
 position: absolute;
 top: 0px;
 left: 8px;
 color:#d9d9d9;
}

4.フラッグボックス

フラッグボックス
.flag-box{
background-color:#F2F2F2;
padding: 20px 20px 20px 50px;
position: relative;
margin-top: 1em;
margin-bottom: 1em;
display:block;
}
.flag-box::before{
 font-family: "FontAwesome";
 content: '\f024';
 font-size: 30px;
 position: absolute;
 top: 0px;
 left: 10px;
 color:#d9d9d9;
}

5.タグボックス

タグボックス
.tag-box{
background-color:#F2F2F2;
padding: 20px 20px 20px 50px;
position: relative;
margin-top: 1em;
margin-bottom: 1em;
display:block;
}
.tag-box::before{
 font-family: "FontAwesome";
 content: '\f02b';
 font-size: 30px;
 position: absolute;
 top: 0px;
 left: 10px;
 color:#d9d9d9;
}

ビジュアルエディタのスタイルにボックスを追加する方法

WordPress記事投稿画面のビジュアルエディタで、先ほど作成したボックスを簡単に使う方法です。

このブログではSimplicityというテーマを利用しています。

function.php(テーマファイル)に追記する方法もあるのですが、今回はプラグインを使った方法を紹介します。
AddQuicktagというプラグインを使います。

▼こんな風にQuicktagsというプルダウンメニューの中に作成したスタイルが入ります。

プラグイン(AddQuicktag)の導入

WordPress管理画面左側のメニューから[プラグイン]→[新規追加]をクリックし、AddQuicktagを検索してインストール、有効化をして下さい。

AddQuicktagの設定方法

WordPress管理画面左側の[設定]ー[AddQuicktag]をクリックすると、AddQuicktagの設定画面に遷移します。

設定内容を順番に説明します。

・ボタンのラベル:追加するタグ(今回はボックス)の表示名
・開始タグ:今回はボックスなので<div class=”grey-box”>など
・終了タグ:閉じるタグ</div>など
・チェックマーク:チェックを入れた場面で使えるようになる。

ビジュアルエディターでボックススタイルを適用する

設定後にビジュアルエディターを開くと、[Quicktags▼]というプルダウンメニューが表示されているはずです。

このメニューを開くと、設定したスタイルがあります。
これで、自分で作ったボックスがビジュアルエディターから簡単に使えるようになります。

AddQuicktagはタグを追加するプラグインなので、太字や赤字などボックス以外にも使えます。

さいごに

記事内にボックスデザインを取り入れると、読みやすくなります。
今回紹介したボックスデザインサンプルはコピペOKですので、是非使ったり応用したりしてみて下さい。

WordPressの記事見出しや装飾を作成します WordPress初心者だけどカスタマイズをしたい人へ

Comments

タイトルとURLをコピーしました