WordPress Cocoonのカスタマイズをやってみたシリーズ第2弾は【ヘッダーメニュー・アイコンをつける】です。
WordPress Cocoonは完全無料で拡張性が高いのが特徴、ユーザーも多くテーマ利用マニュアルなど、チュートリアルも豊富なので、ボクもずっとこのCocoonを愛用しています。
この記事では、Cocoonをちょっとおしゃれにカスタマイズしたいけど、何から手を付けたら良いか分からない初心者向けの設定方法とビフォー・アフターをご紹介します。
こちらが完成形。
![](https://kamisakuhideki.com/wp-content/uploads/2020/11/順序が入れ替わった-2-1024x676.png)
設定方法
①事前準備として、ヘッダーのメニューを作るために、記事を以下のように3つ投稿しました。
![](https://kamisakuhideki.com/wp-content/uploads/2020/11/3つの記事-1024x662.png)
②外観>メニューを選択します
![](https://kamisakuhideki.com/wp-content/uploads/2020/11/外観からメニューを選択-1024x600.png)
③メニュー名を入力してメニュー作成します
![](https://kamisakuhideki.com/wp-content/uploads/2020/11/メニュー名をつけて作成-1024x605.png)
④メニュー項目追加>投稿>投稿した記事をチェックマークを入れて追加
![Image from Gyazo](https://i.gyazo.com/b1395daa17eb5756aefadf7ed182abf6.gif)
💡メニューは投稿記事だけでなく、固定ページや別のサイトURLを指定(カスタムリンク)したり、カテゴリーを指定することもできます。
⑤ヘッダーメニュー・ヘッダーモバイルメニューにチェックを入れて保存すれば設定完了
![](https://kamisakuhideki.com/wp-content/uploads/2020/11/メニューの設定-1024x644.png)
⑥実際に確認しましょう
![](https://kamisakuhideki.com/wp-content/uploads/2020/11/メニュー完成-1024x680.png)
補足①:メニューの並び順変更
以下のように、ドラッグ&ドロップで簡単に変えられます。
![Image from Gyazo](https://i.gyazo.com/c705886290a9c149bce00f5659d85ce1.gif)
![](https://kamisakuhideki.com/wp-content/uploads/2020/11/順序が入れ替わった-1024x676.png)
こちらはスマホ画面です。
![](https://kamisakuhideki.com/wp-content/uploads/2020/11/スマホ画面-594x1024.png)
補足②:アイコンをつける
ここから、ちょっと応用編、メニューの視認性を高めるために、アイコンをつけてみましょう。
※アイコンを付けたい場合は、FontAwesome4.7から選びます。
今回は、「PEN」と入力してみました。
![](https://kamisakuhideki.com/wp-content/uploads/2020/11/スクリーンショット-2020-11-22-10.46.23-1024x624.png)
![](https://kamisakuhideki.com/wp-content/uploads/2020/11/スクリーンショット-2020-11-22-10.47.14-1024x584.png)
以下のように、▼マークから、文字の前に貼り付け、メニューを保存します。
![Image from Gyazo](https://i.gyazo.com/d9af3a11ce8828c6cd427483d24c5cb4.gif)
このような、アイコンがメニューの手前に表示されました。
![](https://kamisakuhideki.com/wp-content/uploads/2020/11/スクリーンショット-2020-11-22-10.51.11-1024x620.png)
💡今日のなるほど
アイコンなどちょっとしたことですが、デザインの勉強もしたくなります。