新型コロナ対策のため、密閉・密集・密接空間を避けて、こまめに石鹸で手洗いをしよう!詳細はこちら。

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

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

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

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

現在β版機能となります。今後機能やCSSが多少変更する恐れもあるので、カスタマイズをする場合はご留意の上行ってください。ウィジェット機能としても追加予定です。
スポンサーリンク

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

サイドバーで使用した場合はこんな感じで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でアイコンを設定するには、アイコンページから好みのアイコンを選択してください。

Font Awesome

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

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ショートコードで使えるオプションはこちら。

neme(必須入力項目)

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のカスタマイズまとめです。おしゃれなものから機能性をあげるものまで紹介します。プロフィール、タブ切り替え、トップページ、リスト、ボックス、スマホのメニュー固定方法なども紹介していきます。
ショートコード
スポンサーリンク
わいひら

無料WordPressテーマ、Simplicity、Cocoonを作成。当サイトと寝ログを運営しています。

わいひらをフォローする
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:1年10ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2020/6/30まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

とにかく速い。サイトに表示スピードを求めるならココ。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:1年8ヶ月

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは14日以内なら無料復旧可能(※手動)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:3年

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DBは7日以内なら無料自動復旧可能
×ファイルは有料かつ手動での復旧
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:16年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越し依頼が可能(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:4年

Cocoon

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

  1. チョンキチ より:

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

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

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

  2. チョンキチ より:

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

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

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