[ 解決済 ] フッターナビをPC表示のみにしたい

VWSとは フォーラム デザインスキン [ 解決済 ] フッターナビをPC表示のみにしたい

[ 解決済 ] フッターナビをPC表示のみにしたい

  • このトピックには6件の返信、2人の参加者があり、最後に対馬 俊彦により2週、 4日前に更新されました。
7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • 投稿者
    投稿
  • #49941

    poohdai515
    参加者

    ■ 利用テーマとバージョン :
    Lightning Proバージョン: 8.9.1
    Lightning Skin Pale バージョン 8.1.2

    ■ 質問内容:
    フッターナビゲーションの表示をPCのみ(モバイルは表示なし)にしたいのですが、
    どのようなCSSになるのかご教授いただきたく・・・
    初歩のご質問すみません(Chromeの検証でモバイルのソースの取得方法がいまいちわからずで・・・)

    #49954

    対馬 俊彦
    参加者

    Chrome の検証で、先頭の body タグの部分に着目してください。

    PC で表示したときにはクラス device-pc がつきますが、
    モバイル端末のときは device-mobile となります。

    このクラス名で PC・モバイル の区別ができます。

    #49968

    対馬 俊彦
    参加者

    Chromeの検証でモバイルのソースの取得方法がいまいちわからずで・・・

    すいません、こちらについての回答も必要でしたね。
    以下のサイトに手順が載っています。

    https://www.atmarkit.co.jp/ait/articles/1403/20/news050.html

    #49974

    poohdai515
    参加者

    対馬さま

    ご返信ありがとうございます。
    大変勉強になりました。

    しかし、 Footer Navigationをモバイルのみ消すCSSがどうしても発見できず、
    こちらは表示しない事にして、
    フッター上部のウィジェットを利用して、メニューを入れるというアナログな方法で解決してみました。

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

    #49989

    対馬 俊彦
    参加者

    [解決済] となりましたが、参考になると思いますので投稿させていただきます。
    勉強ついでにお読みいただければと思います。

    考え方を順を追って書きますが、添付画像もあわせてご参照ください。

    まず、非表示にするときの CSS は display: none; です。

    デベロッパーツールで探すと、フッターナビゲーションの部分が赤矢印で示した通り
    クラス名 menu-footer-navigation-container
    になっていますので、以下の CSS で非表示にすることができます。

    .menu-footer-navigation-container {
    display: none;
    }

    この CSS だと PC でも非表示になってしまいますので、
    モバイル端末のときだけ非表示にするためには以下のようにします。

    .device-mobile .menu-footer-navigation-container {
    display: none;
    }

    性格悪いなぁ…
    最初からこの CSS を回答してくれればいいのに…
    と思われたらごめんなさい。

    もらったコードをコピペして済ませるのは楽かもしれませんが、
    それだけだとあまり進歩がないと思います。

    poohdai515 さんは時間をかけて試行錯誤して
    解決法に辿りついておられるようなので、
    おせっかいでまた投稿させていただきました。

    上から目線で気に入らない…
    と思われたらごめんなさい。

    Attachments:
    You must be logged in to view attached files.
    #49994

    poohdai515
    参加者

    対馬さま

    追加でご教授いただき感謝です!
    デベロッパーツールを使いこなせていないんですね・・・
    そもそも
    menu-footer-navigation-container
    このクラスを発見できずにおります・・・

    がんばってみます。ありがとうございました!

    #50001

    対馬 俊彦
    参加者

    menu-footer-navigation-container
    このクラスを発見できずにおります・・・

    私が先ほど「リンク文字のマウスホバーの下線」のトピックに投稿した図解を見て、
    こちらもがんばってやってみてください。

    【追記】以下の操作も役に立つと思います。
    HTMLソースで行頭にある右向きの三角マークをクリックすると
    中味が展開表示されます。

    • この返信は2週、 4日前に対馬 俊彦が編集しました。
7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • このトピックに返信するにはログインが必要です。