スポンサーリンク

【Cocoon】ボックスメニューのカスタマイズ(ヘッダー下・アイコンフォントや画像使用)

ボックスメニューCocoon

WorPress無料テーマCocoonのボックスメニューのカスタマイズ方法をご紹介します。

ボックスメニューは、アイコンフォントや好きな画像を使用してボックス型のメニューを作成でき、視覚的に目を引くメニューを作成することができます。

ここでは、ヘッダー下に設置し、グローバルメニューの代わりにインパクトのあるメニューを作成する方法や、お気に入りの画像を使う方法などをご紹介します。

ここでは、以下のようなメニューの作成方法をお伝えします。

アイコンフォントを使った例

スキンは、ぽんひろさんの「Season (Summer)」を使っています。

ボックスメニュー

アイコン数が少ない。メニューの角が丸い例

ボックスメニュー

お気に入りの画像を使った例

ボックスメニュー

ヘッダー下にボックスメニューを表示する手順

1. ボックスメニュー専用のメニューを作成

アイコンフォントを使う場合の例です。

グローバルメニューなど既に作成したメニューを利用することもできますが、ここでは専用のメニューを新たに作成します。
「ボックスメニュー」など分かりやすい名前がいいでしょう。

外観」>「メニュー」で作成します。

右上の「表示オプション」をクリックして、「タイトル属性」「CSSクラス」「説明」にチェックを入れておきます。(「タイトル属性」は画像を使ったメニューで使うので、必要ない方は入れなくてOKです。)

ボックスメニュー
  • ナビゲーションラベル
    カテゴリー名などメニュータイトルを入力します。
  • CSS class(オプション)
    CSS classには、Font Awesomeで選んだアイコンのクラス名を入力します。
  • 説明 
    カテゴリー名等の下に説明を入れる場合に入力します。
    例:カテゴリー名(日本語)の英語など。

ボックスメニュー

アイコンに使うFont Awesomeは「Cocoon設定」>「サイトアイコンフォント」で設定したバージョンを使います。

ボックスメニュー

Font Awesome5の場合

Font Awesome5 のサイトでアイコンを選びます。
この例では、コードの中の fas fa-catをメニューに記載してアイコンを表示します。

Font Awesome4のサイトはこちら

ボックスメニュー

メニューができたら保存します。

ここでは6つのメニュー項目を設定しました。

ボックスメニュー

ヘッダー下に設置する方法

「外観」>「ウィジェット」
「コンテンツ上部」「[C]ボックスメニュー」を入れます。

ボックスメニュー

「[C]ボックスメニュー」を開き、メニュー名を選択し、保存します。

ボックスメニューが横一列に表示されました。
Cocoonのボックスメニューは、ヘッダー下(コンテンツ上部)に表示した場合、基本6列になります。
(グローバルメニューは表示しない設定にしています。)

ボックスメニュー

スマホでは横2列に並びます。

ボックスメニュー

サイドバーに設置する場合

サイドバーに設定した場合はこのように2列に並びます。

「外観」>「ウィジェット」
「サイドバー」「[C]ボックスメニュー」を入れ、表示するメニューを選びます。

ボックスメニュー

ボックスメニューのカスタマイズ

アイコンとタイトル等の色やサイズを変える

アイコン、タイトルとサブキャプションの色やサイズを変更する方法です。
アイコンフォントは font-size で指定します。

デフォルトのサイズは以下です。これより大きな値で拡大されます。
・アイコンフォント 40px
・タイトル 14px
・サブキャプション 10px

以下のCSSで、色やサイズを指定して子テーマのスタイルシートに貼ってください。

/*アイコンフォント色・サイズ変更*/
.box-menu-icon {
	color: #ff0000; 
	font-size: 50px;  
}
/*タイトルのサイズ・色変更*/
.box-menu-label{
	color: #ff0000; 
	font-size: 18px; 
}
/*サブキャプションのサイズ・色変更*/
.box-menu-description {
	color: #ff0000;
    font-size: 12px;
}

上記CSSでこのように表示されました。

ボックスメニュー

ボックスの背景色を変える

ボックスの背景色を変えるには以下のCSSを子テーマのスタイルシートに貼ります。

/*ボックスの背景色を変更*/
.box-menu{
	background: #fffacd;
}

上記CSSでボックスの背景色が水色になりました。

ボックスメニュー

ボックスの背景色と罫線を消す

ボックスの背景色と罫線を消すには以下のCSSを子テーマのスタイルシートに貼ります。
背景色は透明にします。

/*ボックスメニュー 背景色・罫線を消す*/
.box-menu {
box-shadow: none; 
background: transparent; 
}

上記CSSでボックスの背景色と罫線が消えました。

ボックスメニュー

ボックス数が少ない場合のカスタマイズ

ボックス全体に均等に並べる

ボックス数が少ない場合は以下のように左側に寄ってしまいます。

ボックスメニュー

そこで、ボックスメニュー全体の長さをボックスの数で割って均等に配置します。

以下のCSSを子テーマのスタイルシートに貼ってください。

@media screen and (min-width: 480px){
.wwa .box-menu{
	width: calc(100%/4);
}
}

4つのアイコンが均等に並びました。

ボックスメニュー

ボックスを任意の幅で

ボックスを任意の幅にする場合は以下のCSSを使います。

4つのボックスなので全体を均等に割る場合は25%。
それより小さい幅の場合は、その分、左右の余白が大きくなります。

/*ボックス任意の幅*/
@media screen and (min-width: 480px){
.wwa .box-menu {
	width: 22%; /*任意の幅*/
}
.box-menu:first-child {
 margin-left: auto;
}
}

上記CSS追加で以下のように表示されました。

ボックスメニュー

ボックスのサイズは変えずにセンタリングする

前の例だとボックスの横幅が長すぎる、ボックスが6つの場合と同じ横幅のままでセンタリングしたいという場合は、以下のCSSを使います。

/*ボックスメニュー センタリング*/
.box-menu:first-child{
    margin-left: auto;
}
}

このようにセンタリングされます。

ボックスメニュー

ボックス間に余白を作る

ボックス間に余白をつくる場合は以下のCSSを使います。

ボックスと余白の幅を指定します。
ボックスの幅と余白の幅の合計が100%を超えると、1行に収まらないためレイアウトが崩れます。
合計(%)=ボックスの幅 (%) ×ボックス数+余白の幅 (%) ×(ボックス数ー1)

/*ボックスメニュー 余白つくる*/
@media screen and (min-width: 480px){
.wwa .box-menu{
	width: 15%;  /*ボックスの幅*/
	margin-right: 6%;  /*余白の幅*/
}
.box-menu:last-child{
	margin-right: 0px;
}
}

上記CSS追加で以下のように表示されました。

ボックスメニュー

左右を角丸(4つのボックス)

ボックスが4つで左右が角丸のカスタマイズです。(PCののみの表示)

ボックスの罫線を、縦の区切り線のみにしています。
区切り線は上下を少し空けています。

以下のCSSを子テーマのスタイルシートに追加します。

/*****ボックスメニュー4列 左右角丸******/
/*ボックス間の縦罫線*/
@media screen and (min-width: 480px){
.box-menu {
	box-shadow: none; 
}
.box-menu:not(:first-child){
	border-left: 1px solid #dcdcdc;
}
}	
/*ボックス4列 左右角丸*/
@media screen and (min-width: 480px){
.box-menus {
	padding-top:13px;
	padding-bottom:13px;
	background: #fff;
	border-radius : 70px 70px;  /*角丸*/
      margin: 0 70px;  /*左右余白・大きいほど少なくなる*/
}
.wwa .box-menu{
	width: 20%;  /*ボックスの幅*/
}
} 

上記CSS追加で以下のように表示されました。

ボックスメニュー

お気に入りの画像を使用する場合

手順はアイコンフォントの場合と同様ですが、「タイトル属性」に画像のURLを記載します。

  • ナビゲーションラベル
    カテゴリー名など
  • タイトル属性
    CSS classには、Font Awesomeで選んだアイコンのコードを入力します
  • 説明 
    カテゴリー名等の下に説明を入れる場合に入力します。
ボックスメニュー

画像は、FLAT ICON DESIGNさんの透過PNG画像(背景なし)を使用しています。

この例では画像は幅250px位にしています。

6つの画像を使ったメニューは以下のようになります。

ボックスメニュー

横長の画像は高さに合わせて縮小され、全体が小さくなっています。

そこで、画像を拡大する以下のCSSを子テーマに追加します。

横幅の最大値を100pxにしています。
元々横幅がある画像はあまり変わりません。

/*アイコン画像サイズ拡大*/
.box-menu-icon img {
    margin: 10px 0;
    max-width: 100px;
}

両端の画像も大きくなり、全体のバランスが整いました。

ボックスメニュー

投稿・固定ページの本文中にボックスメニューを表示

ボックスメニューはショートコードを使って、様々な場所に表示できます。

投稿ページ、固定ページ の本文中にも表示でき、サイドバー有りのページでは、基本4列になります。

ショートコードの基本的な記載方法

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

「カスタムHTMLブロック」にこのショートコードを記載します。

このように4列で表示されます。

ボックスメニュー

ボックスメニューのカスタマイズ まとめ

ボックスメニューは基本的なスタイルであれば、簡単に設置できる便利な機能です。

今回は様々なパターンをご紹介したので、カスタマイズ例を組みあわせて、目を引くボックスメニューを作成してみてください。

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