サポート » テーマ » twenty seventeenのナビゲーションをPCは画像にスマホはテキストにしたい

twenty seventeenのナビゲーションをPCは画像にスマホはテキストにしたい

  • lalala76

    (@lalala76)


    7年、 1ヶ月前

    twenty seventeenを使用してレスポンシブサイトを作成しております。

    メニュー作成時にナビゲーションラベルに

    img src=”#####” /

    のように画像を指定してナビゲーションを画像表示にできましたが、

    このままですと、スマホサイト（max-width 480px)

    の方でも画像がでてしまいます。　

    PCサイトでは画像、

    スマホサイトではテキストが表示されるようにするには

    どのようにするのがよいか、

    教えていただけますと幸いです。

    • このトピックはlalala76が7年、 1ヶ月前に変更しました。
2件の返信を表示中 - 1 - 2件目 (全2件中)
  • ishitaka

    (@ishitaka)

    7年、 1ヶ月前

    こんにちは

    ナビゲーションラベルに、画像とテキストの両方を記述し、スタイルで表示（display:）を切り替える方法ではどうでしょうか。

    ナビゲーションラベルに
    <img src="画像" /><span>テキスト</span>

    style.css やカスタマイズの追加 CSS 等に

    #site-navigation .menu-item img { display: inline; }
#site-navigation .menu-item span { display: none; }

@media screen and ( max-width: 480px ) {
	#site-navigation .menu-item img { display: none; }
	#site-navigation .menu-item span { display: inline; }
}
    トピック投稿者 lalala76

    (@lalala76)

    7年、 1ヶ月前

    ありがとうございました。

    こちらの方法で表示されました。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「twenty seventeenのナビゲーションをPCは画像にスマホはテキストにしたい」には新たに返信することはできません。

表示