スポンサーリンク
スポンサーリンク

WPテーマCocoonのグローバルメニューをスマホで1列にカスタマイズするメモ

WordPress

このブログにも使っているWordPressテーマのCocoon。もう1つのブログでヘッダーにグローバルメニューを表示させているのですが、メニューの文字数が長いとスマートフォンで見た時にはみ出してしまいます。

[修正前]グローバルメニューからはみ出した文字数

※画像が暗いのはブラウザの夜間モードで表示させているから

パソコンから見ると文字がはみ出ずに表示するのですが、スマートフォンからだと1行2列表示になります。これが、文字数多いとはみ出るわけですね。スマホの機種によって変わってきますが、ギリ1列で収まりそうなのが9文字程度でしょうか。

なので、スマートフォンからは1行1列で表示させたいですね。そこで、CSSをカスタマイズします。

カスタマイズと言っても1列のリストを2列にするとか2列の表を1列で表示させるような複雑なことはしてなくて(というか出来ないので)、単純にメニューを引き延ばす感じで1列で表示させてます。

CSSでカスタマイズする前のCocoonの設定は以下の通りになってます。

  • グローバルメニューにある「メニュー幅をテキストに合わせる」にチェックを入れる
  • スキンは「おでかけブルー」を使用
  • CSSは子テーマで編集

多分、スキンなど変わっても動作すると思いますが、動作しなかった時はご了承を。

CSSでグローバルメニューを1列表示にする

Cocoonの子テーマ、style.cssにコードを追加します。

コード

スマートフォンだけグローバルメニューを1列に表示させるので、Cocoonのstyle.cssから横幅480px以下に付け加えます

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
  #navi .navi-in > .menu-mobile li{
    width: 90%;
  }	
}

480px以下の「/*必要ならこにコードを書く*/」下の太字が追加部分です。

デフォルトで「width」は50%以下(数値忘れました)になってたので90%に変更してます。100%にしないのは左右に余白入れるためです。

スマートフォンでグローバルメニュー1列表示に変更

[修正後]スマートフォンからは1列で表示され文字もはみ出ない

グローバルメニューをスマートフォンで1列に表示させたら、文字がはみ出なくなりました。

ただ、これだと横幅481px以上の画面だと2列で表示されるので修正前と同じく文字がはみ出てることがありますね。パソコンでOperaの開発ツールでスマホ表示を確認したら(Chromeだと要素を検証で)、14文字程度だと2列表示は520px以上で問題なく表示されています。

まあ、ブラウザの横幅520px~481pxのスマートフォンは無さそうなので表示に支障は出なさそうです。

この方法で1列表示にしてもグローバルメニューの文字がはみ出る場合は文字数が長すぎるので、その時は文字数を削る必要がありますね。または、「768px以下」を1列表示にするか……