1488166319 WordPressマテリアルテーマにてメニューボタンを以下の要領で画像化しております。

https://bizvektor.com/bizvektor_urawaza/gmenu_img/
スマホレイアウトにすると画像のように表示されてしまうので、スマホレイアウト時にはテキストメニューにしたい(自動化)と考えております。
アドバイスをお願いできませんでしょうか。

回答の条件
  • 1人1回まで
  • 13歳以上
  • 登録:2017/02/27 12:31:59
  • 終了:2017/03/06 12:35:03

回答(1件)

id:a-kuma3 No.1

a-kuma3回答回数4584ベストアンサー獲得回数19242017/03/01 10:42:20

ポイント100pt

マテリアルテーマと言っているのは、このテーマで良いでしょうか。
https://wordpress.org/themes/material/

メニューの内容を、文字と画像でふたつ指定しておいて、スタイルシートでどちらを表示するかを切り替えれば良いと思います。

メニューのナビゲーションラベルのところには、以下のように書きます。

<span class="text">ホーム</span><img class="image" src="home.jpg">

文字を span でくくって、それぞれに class 属性を指定します。

テーマの style.css に以下を追記。

/* PC 用 */
.site-menu ul li a .text {
    display: none;
}
.site-menu ul li a .image {
    display: inline;
}

/* スマホ用 */
@media screen and (max-width: 768px) {
    .site-menu ul li a .text {
        display: inline;
    }
    .site-menu ul li a .image {
        display: none;
    }
}

上記では、横幅が 768 ピクセルよりも小さくなると、画像から文字に切り替わるようにしています。
切り替わる横幅は、好みで変えてください。
世間一般でよく使われる値は、というのは「CSS メディアクエリ ブレークポイント」というようなキーワードで検索すると情報が見つかります。

Material のテーマは、デフォルトのままであれば、class="site-menu" で囲まれた中にメニューがありますが、もし、この辺りをカスタマイズしているのであれば、前述のスタイルも変更が必要です。

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません