ワードプレスCocoonイラスト付きメニュー設定(Font Awesome5)【ボックスメニュー】
Contents
ボックスメニューとは
こちらのイラスト付きのメニューだよ。イラストはフリー素材を使用。テキストの下にひとことも入れられるよ。
![ワードプレスCocoonイラスト付きメニュー設定(Font Awesome5)【ボックスメニュー】](https://i0.wp.com/hoge-hoge.com/wp-content/uploads/2021/09/スクリーンショット-2021-09-12-16.50.16.jpg?resize=566%2C698&ssl=1)
Font Awesome5アイコン選択位置
![](https://i0.wp.com/hoge-hoge.com/wp-content/uploads/2021/09/スクリーンショット-2021-09-12-7.56.42.jpg?resize=598%2C476&ssl=1)
Font Awesome5のアイコンボタンにチェックを入れる
![](https://i0.wp.com/hoge-hoge.com/wp-content/uploads/2021/09/スクリーンショット-2021-09-12-7.56.19.jpg?resize=1024%2C257&ssl=1)
CSSクラスにチェック
外観>メニュー>右上の表示オプション
![](https://i0.wp.com/hoge-hoge.com/wp-content/uploads/2021/09/スクリーンショット-2021-09-12-15.47.15.jpg?resize=412%2C142&ssl=1)
CSSクラスと説明にチェックを入れる
![](https://i0.wp.com/hoge-hoge.com/wp-content/uploads/2021/09/スクリーンショット-2021-09-12-7.47.53.jpg?resize=1024%2C523&ssl=1)
メニュー項目の追加
![](https://i0.wp.com/hoge-hoge.com/wp-content/uploads/2021/09/スクリーンショット-2021-09-12-15.50.14.jpg?resize=1024%2C855&ssl=1)
Font Awesome5のページでアイコンをさがす
こちらのページに行く↓
https://fontawesome.com/v5.15/icons
無料のもので大丈夫
![](https://i0.wp.com/hoge-hoge.com/wp-content/uploads/2021/09/スクリーンショット-2021-09-12-15.48.20.jpg?resize=1024%2C585&ssl=1)
CSSリンクをコピペする
”〜”の中をコピペして。
![](https://i0.wp.com/hoge-hoge.com/wp-content/uploads/2021/09/スクリーンショット-2021-09-12-15.48.36.jpg?resize=512%2C204&ssl=1)
メニューの項目のところを開いて>CSS class(オプション)にコピペ
説明のところに書いた文字が下に小さく表示される
![](https://i0.wp.com/hoge-hoge.com/wp-content/uploads/2021/09/スクリーンショット-2021-09-12-16.51.35.jpg?resize=688%2C692&ssl=1)
保存して、設定はOK。
サイドに設定
TOPページ>右上のカスタマイズ>ウィジェット>サイドバー>BOXメニュー
![](https://i0.wp.com/hoge-hoge.com/wp-content/uploads/2021/09/スクリーンショット-2021-09-12-16.09.59.jpg?resize=701%2C275&ssl=1)
完成
![ワードプレスCocoonイラスト付きメニュー設定(Font Awesome5)【ボックスメニュー】](https://i0.wp.com/hoge-hoge.com/wp-content/uploads/2021/09/スクリーンショット-2021-09-12-16.50.16.jpg?resize=566%2C698&ssl=1)
実際の見え方はこちらにあるよ
※もしかして少し変更しているかもしれません
ディスカッション
コメント一覧
まだ、コメントがありません