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

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

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

    img src=”#####” /

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

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

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

    PCサイトでは画像、

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

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

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

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

    ナビゲーションラベルに、画像とテキストの両方を記述し、スタイルで表示(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; }
    }

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

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

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • このトピックに返信するにはログインが必要です。