【Cocoon編集】Font Awesomeの使い方やボックスの編集方法【CSS】

blog

manablog を見ていると、青のマークと青い囲み枠が印象的。あのデザインが気に入ったので同じようにしたいけど、Cocoonでどうやったらできるんだろう。

 

マナブさんの「manablog」をみていると、青いチェックマークと青い枠組みが印象的ですよね。

↓こんな感じ。

 (チェックマーク)

  • AAAAAAAA
  • BBBBBBBB

 

マナブさんのファンでなくても、あのデザインを使ってみたいと思う方も多いのでは。

私もそんな一人で、どうしたら導入できるかいろいろ調べていたら、作り方がわかりました。

同じように興味のある方がいれば、参考にしてください。

 

本記事の内容

  • Font Awesomeの使い方とアイコンの編集方法
  • ボックス(囲み枠)の編集方法

 

スポンサードリンク

Font Awesomeの使い方とアイコンの編集方法

 

↓の青いチェックマークのアイコン。

意外と簡単に作れました。

私はWordPressのテーマに「Cocoon」を利用しているので、「Cocoon」を前提に記載していますが、どのテーマでもだいたい同じようなやり方のはずです。

 

手順は下記のとおりです。

  • Cocoonの設定でFont Awesome5を選ぶ
  • Font Awesomeでアイコンを探す
  • HTMLをコピペ
  • 追加CSSでカラーを調整

 

Font Awesome5を選ぶ

✔️ のアイコンは「Font Awesome」を利用します。

Font Awesomeは様々なアイコンを提供しているサイトで、無料でも多くのアイコンを利用することができます。

 

「Cocoon設定」→「Cocoon設定」を選びます。

 

「全体」タブを選びます。

 

「Font Awesome5」を選択します。

 

Cocoon側の設定は以上です。

 

Font Awesomeでアイコンを探す

1.Font Awesome のサイトへ行き、左上の検索窓に「check」と入力します。

 

下記のようにいろいろなアイコンが候補として表示されます。

一番左上のアイコンが同じような感じですね。

 

2.希望のアイコンをクリックすると、コードが表示されます。

「<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の画面では、下のコードが入力されているはずです。

<div class=”primary-box”>

 

この「primary-box」という名称のボックスを、manablog風に変えていきましょう。

 

✔️ 枠線、背景、文字カラーを変えます。

先ほど紹介したこの画像の、青矢印の方が今回の記述です。

 

青矢印の内容を、「追加CSSでカラーを調整」の項目で書いた手順で「追加CSS」に入力します。

下記をコピペでOK。

primary-box {

  border: 1px dashed #4865b2;

background-color: #f8f9ff;

color: #333;

}

これで「primary-box」という名称のボックスが、manablog風の青い囲み枠に変わります。

 

HTMLを単語登録してしまおう

青いチェックマーク や青い囲み枠を、必要な時にすぐ使えるように、単語登録してしまった方がいいですね。

 

私は、下のようにそれぞれ単語登録しています。



「あおちぇっく」

 

  • あいうえお
  • かきくけこ


「あおわく」

 

これで「テキスト」モードに挿入しています。

すぐに挿入できますから楽ですよ。

 

✔︎まとめ

manablog風の、青いチェックマーク青い囲み枠の作り方を紹介しました。

Cocoonを使っている方は試してもらえると、ちょっとmanablogっぽいおしゃれな感じになるので、よかったら試してみてください。

(他のテーマではわからないですが、たぶん同じような感じだと思います)

 

参考になれば嬉しいです!

 

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