人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

1488166319
●拡大する

●質問者: kaji0245
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
●100ポイント

マテリアルテーマと言っているのは、このテーマで良いでしょうか。
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" で囲まれた中にメニューがありますが、もし、この辺りをカスタマイズしているのであれば、前述のスタイルも変更が必要です。

関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ