【Cocoon】ボックスメニューを使ってみた!

ビジネス:スピリチュアルブログ

Cocoon廃の皆さん、お元気ですかー!
今日もカスタマイズ頑張ってますかー!
私は最近実装された「ボックスメニュー」をさっそく使ってみました。

ボックスメニューはこんなかんじ

ボックスメニューというのは、トップページにある↓コレです。

シンプル!見やすい!
アイコン(Font Awesome)をつかって、簡単にメニューが作れちゃいます。絵心がなくてもOK、写真やイラスト素材を探さなくてもOK。

↑のように、こちらで用意した画像アイコンを使うこともできます。

詳しい使い方は、世にも慈悲深き・わいひら神がCocoon公式サイトで詳しく説明してくださっています。ゆえに、私のような下賤の民が何か説明を加える必要もございません。わいひら神、あいかわらず神です。ありがとうございます。

アイコンや画像が使える「ボックスメニュー」ショートコードの使い方
アイコンフォントや画像用いて、視覚的にわかりやすいボックスタイプのメニューを表示するショートコード機能の説明です。

メニューアイコンの色を指定する

FontAwesomeを使ったメニューは、あとから色を変えました。
デフォルトだとオレンジだったので、リンデンバウムのカラーのグリーンにしたかったのです。

まず、WordPressメニューの「外観→メニュー」でボックスメニュー用に作ったメニューを選択します。

各メニュー(もしくは色を変えたい所の箇所)のCSS class (オプション)に、任意のCSSクラスを追加します。ここでは”blog_main_cate” としました。

次にメインの固定ページのカスタムCSSへ、色指定のCSSを追加して終了。

サイトの色んなところで使ってみたい!という場合はWordPressメニューの「外観→テーマエディター→スタイルシート(style.css)」にCSSを追加してください。

FontAwesomeの詳しい説明は 【保存版】Font Awesomeの使い方:Webアイコンフォントを使おうを参考にしました。

【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう
導入方法から基本的な使い方、「Font Awesome Animation」でさまざまなアニメーション効果を加える方法まで丁寧に解説します。

どのアイコンを使うか探すのには【Ver.4, Ver.5対応】Font Awesome アイコンを日本語で検索!クリック1つでコードをコピー【アイコン一覧】が便利です!

【Ver.4, Ver.5対応】Font Awesome アイコンを日本語で検索!クリック1つでコードをコピー【アイコン一覧】
FontAwesomeのアイコンを日本語で検索!最新のバージョン5と旧バージョンのアイコンにも対応しています。それぞれバージョンごとに検索出来るようにアップデートしました。

ちなみに、このブロックメニューはCocoon 2.06(2020/01/21)公開時点でベータ版です。「今後機能やCSSが多少変更する恐れもあるので、カスタマイズをする場合はご留意の上行ってください」とのこと。

ウィジェット機能としても追加予定だそうなので、サイドバーなどにも埋め込みやすくなりますね♪

(2020/01/29 追記)2.07でウィジェット機能も追加されました。

「ボックスメニュー」ウィジェットの使い方
アイコンフォントや画像を利用したユーザーの利便性が高いボックス型メニューを作成する方法です。

ついでにフッターモバイルボタンも調整

メニューを見やすくしたついでに、スマホ用のフッターメニューも調整しました。

ホーム / ブログ記事一覧 / 検索 / トップに戻る / サイドバーメニュー
↑こういう並びです。
サイトを見ていて迷ったら、とりあえず一番右のを押しとけば何とかなります。

調整の仕方はわいひら神のお書きになったフッターモバイルボタンの設定方法をありがたく五体投地してご覧なさるとよろしいでしょう。アーメン(もう概念が雑すぎてゴチャゴチャやな)。

フッターモバイルボタンの設定方法
スマホ画面のフッターに表示されるスライドインメニューボタンのカスタマイズ方法の解説です。

Cocoonフォーラムで気軽に情報交換!

あと、公式サイトのフォーラムでCocoonユーザーの情報交換の場をわいひらさんがもうけてくださいました。有益な情報がありそうですね!

他のCocoon記事だぞ!

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