こんにちは、解説ゾロです！
前回の記事は「Cocoonのサイドバーに任意の特定記事を表示させるカスタマイズ」と題して、サイドバーにオリジナルのメニューを表示させる方法を解説いたしました。
当サイトも、人気メニューの1つであるアイコンフォントを使った「ボックスメニュー」をサイドバーに表示しています。
そして、この「ボックスメニュー」ですが、サイドバーのエリアだけではなくて、皆さんが記事を書いている「投稿を編集」の本文にも簡単に表示して使うことができるのです。
「解説ゾロ」もフロントページである「ホーム」ページで本文にボックスメニューを使っていますので、よろしければ、ご覧いただきイメージの参考にしていただければと思います。
今日は「ボックスメニュー」を本文に表示するCocoonのカスタマイズ方法を、画像を見ながらわかりやすく解説いたします。簡単ですので、一緒にやりましょ！
「ボックスメニュー」を本文に表示するCocoonのカスタマイズ方法
「本文」という場所は、今、文章をお読みになっている「ここ！」のエリアです。「サイドバー」ではなく、この場所に「ボックスメニュー」を表示させることができます。
では実際に、当サイトが使っているボックスメニューを「ここ！」に表示させてみます。⇩
これは、実際のボックスメニューですので、アイコンをクリックするとそのグループに飛んでいきます。このように、本文にボックスメニューを表示できると、これ、アイディア次第で色々使えそうですね！
では、早速、始めたいと思いますが、もう既に「ボックスメニュー」を作ってある方は速攻表示することができますので「ボックスメニューの作り方手順」と「ボックスメニューの詳しい作り方」は読み飛ばしていただき「本文に「ボックスメニュー」を表示する方法」からご覧ください。
また、これから「ボックスメニュー」を作る予定の方は「大まかな手順」と「ボックスメニューの詳しい作り方」をご紹介いたしますので、よろしければ参考にしてくださいませ。
「ボックスメニュー」の作り方手順
- 「ダッシュボード」の「外観」から「メニュー」
- ➡「新しいメニューを作成しましょう」
- ➡「メニュー名」を入力
- ➡「メニューを保存」
- ➡メニュー項目を選択して「メニューに追加」
- ➡「表示オプション」の「CSSクラス」と「説明」にチェック
- ➡アイコンフォントの「CSS」入力
- ➡「説明」入力
- ➡「メニューを保存」
「ボックスメニュー」の詳しい作り方
ボックスメニューの作り方は、初めての方にもわかりやすいように画像を見ながら詳しく解説しています別記事の「ボックスメニューが簡単にできた！Cocoonカスタマイズ」に、詳細をまとめていますのでこちらでボックスメニューをお作りくださいませ。
本文に「ボックスメニュー」を表示する方法
ボックスメニューの準備ができました・・・よね？笑！いよいよ、本文にボックスメニューを表示するカスタマイズ方法です。簡単です。
本文中の、ボックスメニューを表示したい場所に「ショートコード」を入力することで「ボックスメニュー」を呼び出すことができます。
「ショートコード」で必要なことは、ボックスメニューを作った時の「メニュー名」を呼び出しに使うということだけです。
「ボックスメニュー」を呼び出す「ショートコード」
「ショートコード」は、たったこれだけです。
[box_menu name="ここにボックスメニュー名を入力する"]
“ここにボックスメニュー名を入力する“の緑色の文字だけを、ボックスメニューを作った時の「メニュー名」に変更してください。当サイトのボックスメニューのメニュー名は、そのままの「ボックスメニュー」としましたので、
[box_menu name="ボックスメニュー"]
となり、これが当サイトのボックスメニュー呼び出しの「ショートコード」になります。
実際に、このショートコードを「投稿を編集」の画面に入力して変更をプレビューしてみると、
ハイ、こんな感じにボックスメニューが表示されました。大成功です。お疲れさまでした。コレも本物のボックスメニューですので、飛びます！笑
まとめ
普通のメニューとまた違って、かわいいアイコンフォントを使ったメニューってとても親近感が湧いてついついクリックしてみたくなっちゃいます・・・よね！笑
本文で使うボックスメニューは「メニューだ！」とかに固着せずに、リンクボタンのように考えてみるのも面白い広がりがありそうです。デザインもアイコンフォントはとても柔らかなイメージと優しさを感じてしまいます。私見ですが・・・笑！
今日は「ボックスメニューを本文に表示するCocoonのカスタマイズ方法」を解説してみました。
最後までお読みいただき、大変ありがとうございました。
では、また。解説ゾロでした！
関連記事：ボックスメニューが簡単にできた！Cocoonカスタマイズ
関連記事：Cocoonのサイドバーに任意の特定記事を表示させるカスタマイズ
関連記事：Cocoonでプルダウンメニューの「色」を変更する方法
関連記事：Cocoonでプルダウンの階層メニュー幅を変更する方法
