記事内で装飾に役立つアイコン付き囲いボックスを作ってみた話

こんにちは。

「Cocoon」のカスタマイズに何十時間も費やしているLeoです。

今日は、Cocoon純正の囲いボックスではなく新たにボックスを作ったお話を紹介します。

Cocoon標準の囲いボックスは好きじゃない

ブログ内でより強調したい内容を挿入したり、

大事なポイントをまとめたりする時にボックスに入れることはとても役に立ちます。

これまでは以下の様なセンテンスを簡単に装飾する対応を使ってきました。

この装飾については以下に書いているのでよかったらご覧下さい。

Cocoonには標準でアイコン付きボックスがある

「Cocoon」には標準でアイコンが付いたボックスが装備されています。

これは有料テーマでは当たり前に近いものですが、無料のテーマに備わっているのは素晴らしいことです（Simplicityにはなかった）。

エディターで、「スタイル」＞「ボックス（アイコン）」と行けば簡単に挿入できます。

あまりデザインが好きじゃない

しかし、申し訳ないですがこれらのボックスはデザイン的にあまり好きじゃありませんでした。

パソコンから見たときのデザインは悪くないのですが、モバイルから見た時、アイコンが上に動いちゃうのが特に気に入りません。

自分で新たに作ってみた

ってことで、

モバイル対応版のCSS調整と合わせて3時間くらいかかってしまいましたが、以下の様なボックスを新たに作ってみました。

作った8種類のボックス一覧

「コメント」や「プロフィール」、そして「OK」と「NG」も個人的に不要だと思ったので省きました。

代わりに、「電球」と「チェック」のアイコンを使ったボックスを用意しました。

アイコン部分は全てFontAwesomeなのでこの辺はご自身がどんなブログを書いているか、どんな装飾を普段求めているかを前提に作ればいいと思います。ある意味無限に作れます。

アイコンだけの装飾とボックスありの差

これはどれくらい強調したいかによると思います。

ボックスを利用すると倍以上上下の幅を使うことになるし、今回紹介するボックスについては背景色も濃いものが多いのでかなり強調力が強いです。

比べてみるとこんな感じ

簡単に比べてみましょう。

↓↓↓

例えばこんな感じの差が出ます。

他だと、

↓↓↓

こんな差になります。

個人的には1文での使用以上に、長い文章だったり何行かある強調に使うことの方が多くなるかも？と思っています。

例

↑こういう感じでリストと合体して使うと、「アイデアリスト」的に使えたりもするし、記事の内容を上手にまとめるのにいいんじゃないかと思っています。

勝手にめっちゃ気に入っています。

作り方

ではこれらのボックスを装備する方法です。

当然ですが、CSSとHTMLを使います。

まず、CSSですが、好きな名前でボックス用のコードを書きましょう。

ボクの場合「.xxx-box」的な感じで作りました。

ここで注意しなければならないのが、Cocoon標準のボックスを上書きするカスタマイズではないので、既存のコードと被っては行けないことです。

Cocoonの親テーマ内でチェックすると、「information-box」とか、「question-box」という名前で書かれていることがわかったのでその辺のネーミングと被らない様にします。

↑こんな感じで使えるボックスです。

以下、この「！」付きのコードです。

CSSコード

.al-box {
position: relative;
margin: 40px 35px 25px 35px;
padding: 20px 25px 20px 50px;
box-sizing: border-box;
color: #464646;
background: #fff0f0;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

.al-box:before {
display: inline-block;
position: absolute;
top: -20px;
left: -15px;
width: 50px;
height: 50px;
text-align: center;
content: "\f12a";
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: #eb4d4b;
font-size: 30px;
line-height: 50px;
background: #ff9d9d;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

.al-box p {
position: relative;
padding: 0;
margin: 10px 0;
line-height: 1.6;
}

これも、「alert-box」にするとデフォルトと被ってしまうので、ボクは「al-box」にしましたが、「chuui-box」とか、そもそもboxを使わず「alert-hako」とかにしておけば標準と干渉はしないはずです。

HTMLコード

本文内に以下のコードを入れればそこにボックスが表示されます。

<div class="al-box">ここに内容を書く</div>

コードは「AddQuicktag」に登録するとデフォルトの「スタイル」から引っ張り出してくるのとほぼ同じ手間で挿入できるのでプラグインを入れていない方は”必須”と思って入れて下さい。

ボクは今回8種類作りましたが、記事を書きながら、

とか思うことってきっとあるので今後も追加すると思います。

同じボックスを作ってみたい方はご自身の用途に合わせて、自分の使いたいアイコンに変えて、必要なら色も変えて色々作ってみてください！

アイコンはFontawesomeから引っ張ってきて、

content: "\f12a";

この「f12a」の部分を変えるだけです。

ただ、アイコンによって見え方に差が出てしまうことがあるので「font-size」などをいじる必要がある場合もあるのでご注意。

もし自分用にカスタマイズする点で謎があればコメントで聞いて下さい。

まとめ

ってことで、

今回は記事内で強調したい事柄があるときに有用なアイコン付きボックスを作った話と、サンプルコードを紹介してみました。

こういうまとめのところでも、

的な感じで使えますよ！

今日のお話は以上です！

有料テーマではかなり多くのボックスオプションが装備されていることも多いので、こういうCSSを書くのに何時間も費やすことはなくなります。

もしあなたがCSS書いたり、色々なところからコピペを続けてるけどなんか納得できる結果が得られていないという場合はいっそ有料テーマを買ってみることも考えてみましょう！

瞬間的には10,000円以上の投資になりますが、総合的にはそっちの方がコストが少ないということも多いので！