スポンサーリンク

【Cocoon】メニューバーの幅調整いろいろ

Cocoonカスタマイズ

WordPressテーマのCocoonにおけるメニュー(グローバルメニュー)の調整方法をまとめています。

メニュー文字の折り返しなどの調整の参考にどうぞ。

スポンサーリンク

Cocoon設定画面でのグローバルメニューの調整

Cocoon設定画面では、グローバルメニューの「固定値での幅指定」もしくは「テキスト幅に応じた幅指定」のいずれかを指定することができます。

設定はWordPress管理画面の [Cocoon 設定] メニューをクリックし、[ヘッダー] タブをクリックして表示される設定画面から行います。

画面の下のほうにある「トップメニュー幅」および「メニュー幅をテキストに合わせる」チェックボックスそれぞれを変更することでグローバルナビメニューの表示が変わり明日。

トップメニュー幅を変更する

「トップメニュー幅」ボックスの数値を変更することでメニュー項目の横幅を任意に指定することができます。

トップメニューは通常、指定された値の幅で固定表示されます。この値を大きくすることでメニューひとつひとつの表示幅が広がり、長い文字のメニュー項目などの表示が行えるようになります。

メニュー幅をテキストの長さに合わせる

[メニュー幅をテキストに合わせる] チェックボックスをオンにすることで、メニュー項目の横幅を自動的に調整することができます。

この場合、メニュー項目の幅はそれぞれの文字の長さに合わせて表示されるため、長い文字のメニュー項目なども折り返さずにそのまま表示されます。

スポンサーリンク

スタイルシート(CSS)を使ったグローバルメニューの調整

前述の設定で多くの場合のメニュー項目の折り返しの調整は可能かと思いますが、Cocoon子テーマのスタイルシートに追記、修正することでより細かい文字の折り返しなどの調整が可能です。

スタイルシートの編集はWordPress管理画面にある [外観] → [テーマエディター] メニューの「Cocoon Child: スタイルシート」の編集画面などからも行うことができます。

CSSでメニュー項目の折り返しを調整する

以下のコードを子テーマのstyle.cssに追記します。

.menu-item {
  width: initial!important;
}
.menu-item .item-label {
  overflow-wrap: initial;
}

文字の折り返しが変更され、文字列の長さにメニュー幅が変更されます。前述の「メニュー幅をテキストの長さに合わせる」オプションとほぼ同等の表示になります。

特定のメニュー項目だけ折り返しを調整する

特定のメニュー項目だけがその幅を超えて折り返してしまうような場合、メニュー項目のcssクラス指定と組み合わせることで個別の調整も可能です。

メニュー項目ごとの表示指定を行うには、まずWordPressの [外観] → [メニュー] をクリックします。

[編集するメニューを選択] の一覧からトップメニュー(ヘッダーメニュー)に指定したメニューを選択し、[選択] ボタンをクリックします。

管理画面右上にある [表示オプション▼] をクリックし、[CSS クラス] チェックボックスをクリックしてオンにします。

メニュー項目の編集画面を開き、[CSS class (オプション)] ボックスに「no-break」と入力します。

[メニューを保存] ボタンをクリックします。

以上でメニュー項目の設定は終了です。次にスタイルシートの更新を行います。

以下のコードを子テーマのstyle.cssに追記します。

.no-break {
  width: initial!important;
}
.no-break .item-label {
  overflow-wrap: initial;
}

指定したメニュー項目のみ、テキストの折り返しが調整されます。

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