[ 解決済 ] モバイル時のみフッターウィジェットエリアの数を1つに

VWSとは フォーラム Lightning [ 解決済 ] モバイル時のみフッターウィジェットエリアの数を1つに

[ 解決済 ] モバイル時のみフッターウィジェットエリアの数を1つに

  • このトピックには2件の返信、2人の参加者があり、最後にissyにより2年、 6ヶ月前に更新されました。
3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • 投稿者
    投稿
  • #55136

    issy
    参加者

    ■ WordPress のバージョン
    5.8

    ■ テーマ・プラグインは全て最新版で確認してください。
    確認しました。

    ■ テーマの種類
    Lightning Pro

    ■ テーマのバージョン
    8.11.2

    ■ スキンの種類
    Origin II

    ■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
    確認しました。

    ■ プラグインの種類・バージョン
    VK All in One Expansion Unit バージョン 9.64.3.3

    ■ 期待する動作
    スマホなどのモバイル利用時のみ、フッターウィジェットエリアの数を1つに減らしたいです。
    現在、フッターウィジェットエリアは3つで設定していますが、モバイル利用時にサイトの長さが長くなってしまうため、モバイル時のみ1つに減らして表示させたいのですが、可能でしょうか。

    よろしくお願いいたします。

    ■ 自分で試した事
    @media only screen and (max-device-width: 480px) {
    footer {
    display:none !important;
    }
    }
    としましたが、当然ですがフッター部が全て消えてしまいます。
    1つめのエリアだけは表示させたいです。

    ■ 症状が発生するブラウザ
    firefox

    ■ 実際の症状
    @media only screen and (max-device-width: 480px) {
    footer {
    display:none !important;
    }
    }
    としましたが、当然ですがフッター部が全て消えてしまいます。
    1つめのエリアだけは表示させたいです。

    ■ その他特記事項

    #55140

    うなこ
    モデレーター

    スマホなどのモバイル利用時のみ、フッターウィジェットエリアの数を1つに減らしたいです。
    現在、フッターウィジェットエリアは3つで設定していますが、モバイル利用時にサイトの長さが長くなってしまうため、モバイル時のみ1つに減らして表示させたいのですが、可能でしょうか。

    機能としては無いので、CSSで対応していただく形であっております。
    検証ツールでhtmlを確認していただくと、ウィジェットに、それぞれ違うクラス名がついておりますので、
    そのクラス名に対して display:none; すると、やりたいことができると思います。

    もしくは、2番目と3番目を非表示にするやり方でもできるかと思います。
    「nth-of-type 使い方」 などで検索すると、使い方がわかるかなと思います。
    メディアクエリの中に以下のコードを入れてみてください。

    
    .footerWidget .col-md-4:nth-of-type(2n),
    .footerWidget .col-md-4:nth-of-type(3n){
    display:none;
    }

    css参考サイト

    できる!WordPressカスタマイズ #01 簡単なデザイン(CSS)カスタマイズ方法徹底解説

    #55142

    issy
    参加者

    うなこ さま、早々のご回答ありがとうございます。
    疑似クラスを使う方法は思いつきませんでした。勉強不足でお恥ずかしい。
    以下の内容をCSSに追加して解決できました。

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

    @media only screen and (max-device-width: 480px) {
    .siteFooter .col-md-4:nth-of-type(2n),
    .siteFooter .col-md-4:nth-of-type(3n) {
    display:none !important;
    }
    }

    • この返信は2年、 6ヶ月前にissyが編集しました。
3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • このトピックに返信するにはログインが必要です。