アイコンや画像が使える「ボックスメニュー」ショートコードの使い方

ショートコード
この記事は約3分で読めます。

アイコンフォントや、自前で用意した画像を使用してボックス型のメニューを作成できるショートコード機能を追加しました。

ボックスメニューを使用することで、視覚的にわかりやすいメニューを作成することができます。

\エックスサーバー開発のWordPressテーマ/
エックスサーバー開発のWordPressテーマ

ボックスメニューを利用するとこんなことができる

サイドバーで使用した場合はこんな感じで2列になります。

ボックスメニュー(サイドバー)

本文中で利用した場合は、こんな感じで4列になります。

ボックスメニュー(本文中)

コンテンツ上部・下部で表示した場合は、こんな感じで6列になります。

ボックスメニュー(コンテンツトップ・ボトム)

キーカラーを変更すると、色が反映されます。

キーカラーを変更したボックスメニュー

以下のように独自画像を指定してメニューも作成できます。

ボックスメニュー(画像アイコン)

画像アイコン FLAT ICON DESIGN

ボックスメニューを利用する主な手順

ボックスメニューを利用するための主な手順はこれだけ。

  1. WordPressメニューを作成する
  2. ボックスメニューをショートコードで呼び出す

大まかな設定方法はこれだけです。以下で詳しく方法を説明します。

WordPressメニューを作成する

メニューの作成は、WordPressのグローバルナビの作成方法と同じです。

まずはWordPress管理画面から「外観→メニュー」を選択します。

外観からメニューを選択する

新規メニューの作成

メニュー画面で「新しいメニューを作成しましょう」リンクから新規メニューを作成します。

メニュー画面で新規メニューの作成

「メニュー名」を入力して「メニューを作成」ボタンを押します。

メニューでボックスメニューを作成

表示オプションの設定

メニューを作成したら「表示オプション」から「CSSクラス」と「説明」を有効にしておきます。

表示オプションからCSSクラス等説明を有効化

メニュー項目の追加

「メニュー項目を追加」からナビカードを作成したいメニューを選択していきます。

メニュー項目を追加からメニュー作成

メニューの追加例がこちら。

ボックスメニューのメニュー構造例

個別メニューの設定を行う

次に個々のメニューに対して「タイトル(ナビゲーションラベル)」、「アイコン(CSS class)」、「サブキャプション(説明)」を入力します。

入力例がこちら。

ボックスメニューの個別メニューの入力例

  1. 「ナビゲーションラベル」にタイトルを入力してください
  2. 「CSS class」にアイコンフォントのクラス名を入力します(Font Awesome4、Font Awesome5)
  3. 「説明」にサブメニューキャプション(サブタイトル)を入力してください

Font Awesomeアイコンの入力例

Font Awesomeアイコンは、4でも5でも入力できます。

ただしCocoon設定の「全体」タブにある「サイトアイコンフォント」の設定に依存します。

サイトアイコンフォントの設定に依存

上記の設定で、Font Awesome4利用するか、Font Awesome5を利用するか切り分けてください。

Font Awesome4でアイコンを設定する

Font Awesome4でアイコンを設定するには、アイコンページから好みのアイコンを選択してください。

Font Awesome Icons
Font Awesome, the iconic font and CSS framework

個別ページからアイコンのクラス名をコピーします。

Font Awesome4のクラス名を取得する

あとは、メニューの「CSS class」部分に貼り付けます。

CSS classに貼り付ける

Font Awesome5でアイコンを設定する

Font Awesome5でアイコンを設定するには、アイコンページから好みのアイコンを選択してください。

Find Icons with the Perfect Look & Feel | Font Awesome
Used by millions of designers, devs, & content creators. Open-source. Always free. Check out the all-new Sharp Solid ico...

個別ページからアイコンのクラス名をコピーします。

Font Awesome5の個別ページからクラス名をコピーする

あとは、メニューの「CSS class」部分に貼り付けます。

Font Awesome5クラスをCSS classに貼り付ける

画像をアイコンとして利用する場合

画像をアイコンとして利用する場合は、「メディア → 新規追加」から画像をアップロードしておいてください。

アイコン用画像のアップロード

次に「外観 → メニュー」を開きます。その後「表示オプション」から「タイトル属性」を選択してください。

表示オプションからタイトル属性を選択

アップロードした画像からURLをコピーします。

アップロードアイコンからURLを取得

その後、個別メニューの設定項目で「タイトル属性」に対してURLを入力してください。

画像はアイコンメニューの入力

  1. 「ナビゲーションラベル」にタイトルを入力してください
  2. 「タイトル属性」に画像アイコン用のURLを入力してください
  3. 「説明」にサブメニューキャプション(サブタイトル)を入力してください
「タイトル属性」は、本来HTML要素のtitle属性の値を入れるためのものだとは思いますが、今回は画像のURL用として利用しています。本来の使われ方ではないのはご容赦ください。

個別メニューごとに新しいタブでリンクを開く場合

新しいタブでボックスメニューのリンクを開く場合は、「表示オプション」から「リンクターゲット」を有効にしてください。

すると個々のメニュー項目に「リンクを新しいタブで開く」という項目が出てくるので有効にします。

「リンクを新しいタブで開く」が有効になっていると、そのメニューはブラウザの新しいタブで開かれます。

メニューの保存

上記までのような設定を個々のメニューに対して行い、最後に「メニューを保存」ボタンを押してください。

ボックスメニューの保存

ボックスメニューをショートコードで呼び出す

メニューを作成したらショートコードで呼び出すだけです。

ショートコードの呼び出し方

基本的な呼び出し方法はこちら。

[box_menu name="メニュー名"]

先程作成した「ボックスメニュー」メニューであれば、以下のように呼び出します。

[box_menu name="ボックスメニュー"]

ショートコードオプション

box_menuショートコードで使えるオプションはこちら。

name(必須入力項目)

nameオプションには、メニュー名を入力します。

[box_menu name="メニュー名"]
name属性が指定されていないとボックスメニューは動作しません。

target(リンクの開き方)

targetオプションには、ボックスリンクのブラウザでの開き方を設定します。

入力例:target=”_blank”(新しいタブで開く)

デフォルト値:_self(同じタブで開く)

[box_menu name="メニュー名" target="_blank"]

v2.1.3~

class(拡張クラス)

classオプションには、メニューのラップ要素に独自のclass属性を指定したい時に記入します。

ボックスメニューの拡張クラス

入力例:class="ex-class"

入力例:class="ex-class1 ex-class2"(複数指定する場合はスペースで区切る)

デフォルト値:(空欄)

表示例

実際の表示例はこんな感じ。

アイコンフォントタイプ
自動車
Car
自転車
Bicycle
バイク
Motorcycle
電車
Train
飛行機
Airplane
Ship
サイドバーやフッター上にも表示例があります。
スマホでは全て2列で表示されるようになります。
画像アイコンタイプ
サイドバーやフッター上にも表示例があります。
スマホでは全て2列で表示されるようになります。

まとめ

このような感じで、視覚的にもわかりやすいアイコンメニューを作成することができます。

このボックスメニューは、本文中はもちろんサイドバーのようなウィジェット内でも利用できるので、好きな場所にアイコンつきのメニューを表示させることが可能です。

これらの機能を利用して、サイトの巡回率が多少なりとも上がれば幸いですす。

参考

今回のボックスメニューのデザインは、ぽんひろ.comを運営されているぽんひろさんの以下の記事を参考にさせていただきました。

ボックス分けされたナビを作る!回遊率をアップしよう!
区分けされたナビゲーションをHTMLとCSSで作ります。単純なグローバルナビゲーションよりも視認性が高く、スマホでタップしやすいのでユーザーに優しいインタフェースになっています。HTMLとCSSがわからない初心者向けでコピペで簡単に作れるよ...

ぽんひろさんは、Cocoonのseasonスキンの作者でもあります。

Cocoonのカスタマイズ記事も多数書いておられます。

【30通り以上!】Cocoonカスタマイズ!コピペで簡単!
Cocoonのカスタマイズまとめです。おしゃれなものから機能性をあげるものまで紹介します。プロフィール、タブ切り替え、トップページ、リスト、ボックス、スマホのメニュー固定方法なども紹介していきます。

コメント テーマの質問はフォーラムへ

  1. チョンキチ より:

    キーカラーの変更はどうすればよいでしょうか?
    デフォルトの枠の色であるオレンジを別のカラーにしたいです。

    • わいひら わいひら より:

      キーカラーは、Cocoon設定の「全体」タブにあります。
      ただ、キーカラーを変えてしまうと他の色も変わってしまいます。
      ボックスメニューの色を変えるだけなら、CSSで変更した方が良いかもしれません。

  2. チョンキチ より:

    わいひらさん
    教えていただいた設定にて、キーカラー変更をしたところ、
    まさに他の色まで変わってしまいました・・・

    >>ボックスメニューの色を変えるだけなら、CSSで変更した方が良いかもしれません。
    この場合、CSSでどのように指定すればよいでしょうか?

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