コロナに負けるな!ステイホームでブログを書きます!

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

こんにちは。

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

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

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

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

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

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

こういう、「アイコン」+「大きめの文字」というやつ

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

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

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

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

エディターで、「スタイル」>「ボックス(アイコン)」と行けば以下のようなボックスを簡単に挿入できます。

「補足情報」(!)を選ぶとこのボックスが出てきます。
「補足情報」(?)を選ぶとこのボックスが出てきます。
「注意喚起」(!)を選ぶとこのボックスが出てきます。
「メモ」を選ぶとこのボックスが出てきます。
「コメント」を選ぶとこのボックスが出てきます。
「OK」を選ぶとこのボックスが出てきます。
「NG」を選ぶとこのボックスが出てきます。
「GOOD」を選ぶとこのボックスが出てきます。
「BAD」を選ぶとこのボックスが出てきます。
「プロフィール」を選ぶとこのボックスが出てきます。

以上10種類とたくさん用意されていてとても便利です。

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

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

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

自分で新たに作ってみた

ってことで、

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

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

情報的なことを書く場所として使えるボックスです。
質問や疑問を書いたり、出題を書いたりするのに使うといいボックスかも知れません。なんでだろ〜なんでだろ〜。
ここに注意書きなどここに注意書きなどここに注意書きなどここに注意書きなどここに注意書きなどここに注意書きなどここに注意書きなどここに注意書きなどここに注意書きなどここに注意書きなど
メモしておきたいことを書くために使うボックスです。
ここにアイデアとか、気がついたこと、ヒントとかを書きます。
チェックポイントを色々書きます
バッドポイントなどをまとめるボックスです。

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

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

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

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

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

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

比べてみるとこんな感じ

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

これは覚えておきましょう!

↓↓↓

これは覚えておきましょう

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

他だと、

これは気に入った!

↓↓↓

こんな差になります。

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

  • アイデア1
  • アイデア2
  • アイデア3

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

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

突然ドヤり出した()

結構時間かけて作ったんでね!

はよ作り方教えろよ

はいはい!

作り方

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

当然ですが、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」に登録するとデフォルトの「スタイル」から引っ張り出してくるのとほぼ同じ手間で挿入できるのでプラグインを入れていない方は”必須”と思って入れて下さい。

実装して表記がおかしければCocoon-Master(親テーマ)のコードを確認しましょう。

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

こんなボックスも欲しいなぁ

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

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

アイコンの変え方

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

content: "\f12a";

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

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

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

まとめ

ってことで、

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

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

今日のポイント:なんたらかんたら

的な感じで使えますよ!

今日のお話は以上です!

HAVE A HAPPY BLOG LIFE!!!

 

ちなみに。。。

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

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

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

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

Leo Miyanagaを
Like
LikeLoveHahaWowSadAngry
このブログを書いてる人
Leo

コロナで色々バグった起業家😷
写真家/ブロガー/YouTuberなど色々やってます。愛機はα7III & RX100VII。
シアトル生まれ、大阪育ち→シアトルにも10年以上住んでましたが今は大阪ベース。
このブログではLeoの気になるコトや毎日の色んなコトを記録しています!
詳しいプロフィールはこちら

Leoをフォローする
Web・Wordpress WORK
LEO LOG

Comment 気軽にどうぞ!!

トップへ戻る
タイトルとURLをコピーしました