manablog を見ていると、青のマークと青い囲み枠が印象的。あのデザインが気に入ったので同じようにしたいけど、Cocoonでどうやったらできるんだろう。
マナブさんの「manablog」をみていると、青いチェックマークと青い枠組みが印象的ですよね。
↓こんな感じ。
(チェックマーク)
- AAAAAAAA
- BBBBBBBB
マナブさんのファンでなくても、あのデザインを使ってみたいと思う方も多いのでは。
私もそんな一人で、どうしたら導入できるかいろいろ調べていたら、作り方がわかりました。
同じように興味のある方がいれば、参考にしてください。
本記事の内容
- Font Awesomeの使い方とアイコンの編集方法
- ボックス(囲み枠)の編集方法
Font Awesomeの使い方とアイコンの編集方法
↓の青いチェックマークのアイコン。
「」
意外と簡単に作れました。
私はWordPressのテーマに「Cocoon」を利用しているので、「Cocoon」を前提に記載していますが、どのテーマでもだいたい同じようなやり方のはずです。
手順は下記のとおりです。
- Cocoonの設定でFont Awesome５を選ぶ
- Font Awesomeでアイコンを探す
- HTMLをコピペ
- 追加CSSでカラーを調整
Font Awesome５を選ぶ
✔️ のアイコンは「Font Awesome」を利用します。
Font Awesomeは様々なアイコンを提供しているサイトで、無料でも多くのアイコンを利用することができます。
「Cocoon設定」→「Cocoon設定」を選びます。
「全体」タブを選びます。
「Font Awesome5」を選択します。
Cocoon側の設定は以上です。
Font Awesomeでアイコンを探す
１．Font Awesome のサイトへ行き、左上の検索窓に「check」と入力します。
下記のようにいろいろなアイコンが候補として表示されます。
一番左上のアイコンが同じような感じですね。
２．希望のアイコンをクリックすると、コードが表示されます。
「<i class=”fas fa-check”></i>」をコピー。
（カーソルを当てると「Copy HTML」と出てきますので、クリックしてコピーします）
出典：Font Awesome
HTMLをコピペ
あとはWordPressに戻って、HTML（Cocoonなら「テキスト」）の画面で挿入したい場所に貼り付けるだけ。
追加CSSでカラーを調整
アイコンのカラーも変えましょう。
manablog風にするには、青っぽい色味にしたいですね。
だいたい同じようなカラーであればいいと思うのですが、マナブさんと同じ色にするには「#6c9fce」という番号に設定します。
「外観」→「カスタマイズ」を開く。
左側メニューの一番下の「追加CSS」を選ぶ。
「追加CSS」に下記（赤矢印）を入力する。
（青矢印は後述する「囲み枠」の分）
✔️ 下記のコードをコピペでOK
.fa-check {
color: #6c9fce;
/* color:#1da1f2; */
}
これでカラーも希望どおりになります。
ボックス(囲み枠)の編集方法
manablogによく登場する青い囲み枠。
これも5分程度でできました。
詳しく説明します。
primary-boxをカスタマイズ
Cocoonに予め設定してある「ボックス」を、青い囲み枠に変えてしまいましょう。
私は「プライマリー」を変えてしまいました。
✔️ HTMLでclass名を確認します。
まず上の図のように、「スタイル」→ボックス（案内）→プライマリー（濃い水色）」を選んで、そのボックスのHTMLを「テキスト」表示で確認します。
（セカンダリーやサクセスなど、変えるのは他のボックスでも構いません。
HTMLの画面では、下のコードが入力されているはずです。
この「primary-box」という名称のボックスを、manablog風に変えていきましょう。
✔️ 枠線、背景、文字カラーを変えます。
先ほど紹介したこの画像の、青矢印の方が今回の記述です。
青矢印の内容を、「追加CSSでカラーを調整」の項目で書いた手順で「追加CSS」に入力します。
下記をコピペでOK。
primary-box {
border: 1px dashed #4865b2;
background-color: #f8f9ff;
color: #333;
}
これで「primary-box」という名称のボックスが、manablog風の青い囲み枠に変わります。
HTMLを単語登録してしまおう
青いチェックマーク や青い囲み枠を、必要な時にすぐ使えるように、単語登録してしまった方がいいですね。
私は、下のようにそれぞれ単語登録しています。
↓
「あおちぇっく」
- あいうえお
- かきくけこ
↓
「あおわく」
これで「テキスト」モードに挿入しています。
すぐに挿入できますから楽ですよ。
✔︎まとめ
manablog風の、青いチェックマーク と青い囲み枠の作り方を紹介しました。
Cocoonを使っている方は試してもらえると、ちょっとmanablogっぽいおしゃれな感じになるので、よかったら試してみてください。
（他のテーマではわからないですが、たぶん同じような感じだと思います）
参考になれば嬉しいです！
