今回は、WordPressのCocoonテーマで、サイドバーにボックスメニューを追加する方法を紹介します。
難しそうだけど、できるかな？
Cocoonのボックスメニューは簡単に作ることができます。
ボックスメニューとは？
ボックスメニューは、サイドバーでよくみる下の画像のようなメニューのことです。
- アイコンがかわいい
- テキストリンクより目立つ
- ボタンのようになっていて押しやすい
サイドバーだけでなく、投稿記事の上部やフッターなど、ボックスメニューは様々な場所に配置することができます。
サイドバー以外への配置方法についても、手順の中で説明しています。
サイドバーにボックスメニューを追加する方法
さっそくボックスメニューをつくってみましょう。
ボックスメニューを作成する
１：【外観】→【メニュー】を選択する。
２：【新しいメニューを作成しましょう】を選択する。
３：【メニュー名】を入力して【メニューを作成】をクリックする。
４：左の【メニュー項目を追加】から、メニューに入れたい項目を追加する。
メニューの順番は、右に追加した項目をドラッグすれば変更可能です。
ボックスメニューをサイドバーに追加する
１：【外観】→【ウィジェット】を選択する。
２：【ボックスメニュー】をドラッグして、サイドバーに追加する。
サイドバー以外の場所にボックスメニューを表示させたい場合は、このときに表示させたい場所へボックスメニューを追加します。
３：ボックスメニューの【タイトル】を入力する。
４：【メニュー名】でさきほどボックスメニュー用につくったメニューを選ぶ。
【表示設定】では、選択したカテゴリーのときのみボックスメニューを表示させるような編集をすることができます。
アイコンを変更する
この時点で確認すると、アイコンはすべて星になっています。
ボックスメニューのアイコンカラーはCocoonのサイトキーカラーに依存します。【Cocoon設定】→【全体】→【キーカラー】→【サイトキーカラー】を確認してください。
スキンを使用している場合、スキンに依存することもあります。
上記のように変更する方法は、こちらの記事の「ボックスメニューのFont Awesomeアイコン設定方法」の部分で紹介しています。
まとめ：Cocoonのボックスメニューは簡単につくれる！
Cocoonのボックスメニューは簡単につくることができます。
- ボックスメニューは様々な場所に配置することができる。
- ボックスメニューのアイコンカラーはCocoonのサイトキーカラーに依存する。
- ボックスメニューではFont Awesomeアイコンを使うことができる。
ボックスメニューを使っておしゃれなメニューを手に入れましょう。
【レンタルサーバー】ロリポップ
- 初期費用無料・月額550円と低価格
- ドメイン２個永久無料
- ワードプレスが使える
＼ ブログをはじめる第一歩 ／