[ 解決済 ] 1カラムの設定において、画面の途中から2カラム表示になるよう設定したい

VWSとは フォーラム Lightning [ 解決済 ] 1カラムの設定において、画面の途中から2カラム表示になるよう設定したい

[ 解決済 ] 1カラムの設定において、画面の途中から2カラム表示になるよう設定したい

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

    ushiss
    参加者

    ■ WordPress のバージョン
    6.5.2

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

    ■ 子テーマをご利用の場合は親テーマに変更して症状が改善するか確認してください。
    確認しました。

    ■ テーマの種類
    Lightning ( G3 ) + Lightning G3 Pro Unit

    ■ テーマのバージョン
    15.21.1

    ■ Pro Unit のバージョン
    0.25.1

    ■ スキンの種類
    Origin III

    ■ 期待する動作
    トップページに設定した固定ページにて、現在1カラムで表示されるよう設定しております。

    ページを下部にスクロールした際、画面上部は1カラムのままで、画面の中央くらいから2カラムにしてサイドバーを表示する設定にしたいと考えております。

    画面の途中から2カラム表示およびサイドバーの表示設定について、追加CSSの設定で可能でしたら、設定方法をご教示いただきたいです。

    ■ 自分で試した事
    2カラムの設定にしたところ、ヘッダー画像の下から2カラム表示となってしまいます。
    もう少し画面の下の方へスクロールしてから2カラム表示&サイドバーの表示をしたいのですが、標準の設定ですとうまくいっておりません。

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

    ■ 実際の症状
    2カラムの設定にしたところ、ヘッダー画像の下から2カラム表示となってしまいます。

    #90238

    Lightningのご利用ありがとうございます。株式会社ベクトルの石川と申します。
    途中からカラムブロックを配置すれば出来ると思いますが、それだと何か都合が悪い事がありますか?

    #90246

    ushiss
    参加者

    すみません、「途中からカラムブロックを配置」という設定がよくわかっておりません。
    現在の状態と、理想の状態を図で書いて見ましたので添付します。

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

    テーマの機能としてトップページは1カラムのレイアウトに指定し、
    トップページに指定した固定ページ内で 2 カラムにするというカタチです。

    ushiss 様用 トップページ固定ページ内容

    #90257

    ushiss
    参加者

    ありがとうございます。教えていただいた内容の理解ができました。

    度々すみません、これまで外観→ウィジェットの設定でサイドバーを設定した時は、スマホで表示した際に画面の一番下部にサイドバーの要素が表示されておりました。

    今回教えていただいたようにカラムの配置でサイドバーを作成すると、PCなどの大画面で表示した際のサイドバーの位置としては問題ないのですが、スマホで表示した際に画面の途中からサイドバーの要素が表示されてしまいます。

    教えていただいたカラムの配置でサイドバーの作成を行いつつ、かつスマホで表示した際は画面の一番下部からサイドバーの要素を表示されるようにすることは可能でしょうか。

    #90259

    > スマホで表示した際に画面の途中からサイドバーの要素が表示されてしまいます。

    おや?
    一番下に表示されると思いますが、解釈違いますでしょうか?
    一度ご確認くださいませ。

    ↓ わかりやすいように内容アップデートしました。

    ushiss 様用 トップページ固定ページ内容

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

    ushiss
    参加者

    すみません、内容理解しました。
    最下部に表示されない原因は、2カラムで設定した部分の更に下に1カラムでブロックを作成していたからでした。2カラムのうち、左側のカラムの下部にブロックを作成していけば、ご指摘のとおり右側のカラム(サイドバー)はスマホ表示の際には最下部に表示されておりました。

    何度も申し訳ないのですが、今度はこの2カラムの設定で、左側にサイドバーを作成したところ、スマホ表示でサイドバーが途中に表示されてしまい、最下部に表示されません。

    あくまで右側にサイドバーを設定した場合のみ、スマホ表示で最下部に表示されるようになるのでしょうか。

    #90267

    サイドバーを内包しているカラムブロックに対して、CSSで flex-direction: row-reverse; を指定すればできます。

    下記アップデートいたしました。

    ushiss 様用 トップページ固定ページ内容

    #90270

    ushiss
    参加者

    石川様

    ご回答ありがとうございます。記載いただいた方法で、左側にサイドバーを設定した場合でも、スマホ表示で最下部に表示されるようになりました。

    これですべて解決いたしました。何度も回答いただき誠にありがとうございました。

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