WordPress個別サポート

Twenty Twelveのスマホメニューは「メニュー」と表示されるシンプルなボタンで次のようなイメージです。

スマホメニュー(Twenty Twelve)

スマホメニュー(Twenty Twelve)

メニューの文字を「メニューを開く」や「メニューを閉じる」に変更する場合は、ヘッダーテンプレート(header.php)を修正する方法もありますが、閉じるときの「メニューを閉じる」の対応も必要になりそうなので工夫が必要です。

たとえば、次のようなCSSを子テーマのstyle.cssなどに入力すれば、「メニューを開く」「メニューを閉じる」のように変更することができます。

/* メニューを開くとき */
.menu-toggle:before {
    font-size:12px;
    content: 'メニューを開く';
}

/* メニューを閉じるとき */
.menu-toggle.toggled-on:before {
    font-size:12px;
    content: 'メニューを閉じる';
}

/* 「メニュー」を消す */
.menu-toggle {
    font-size:0;
}

メニューを開くときは「メニューを開く」と表示されます。

「メニューを開く」

「メニューを開く」

開いているときは「メニューを閉じる」と表示されます。

「メニューを閉じる」

「メニューを閉じる」

「メニューを開く」や「メニューを閉じる」は好きな文字にも変更できます。ご自由にカスタマイズしてください。

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
WordPress講座の問い合わせ先

関連記事

BizVektorのカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート