[ 解決済 ] カラムブロック(2カラム)を使用した際、スマホ閲覧時の並び順を上下反対にしたい。

VWSとは フォーラム Lightning [ 解決済 ] カラムブロック(2カラム)を使用した際、スマホ閲覧時の並び順を上下反対にしたい。

[ 解決済 ] カラムブロック(2カラム)を使用した際、スマホ閲覧時の並び順を上下反対にしたい。

  • このトピックには4件の返信、2人の参加者があり、最後にVWSカスタマーにより2年前に更新されました。
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • 投稿者
    投稿
  • #64267

    ■ WordPress のバージョン
    5.9.3

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

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

    ■ テーマのバージョン
    14.20.1

    ■ Pro Unit のバージョン
    0.18.1

    ■ スキンの種類
    Origin III

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

    ■ 期待する動作
    カラムブロックで2カラムを選択し、左に画像、右に文章にすると、スマホ閲覧時には、画像が上、文章が下になります。 これを右カラムに設定した文章が上、左カラムに設定した画像が下にくる様に変更したいのですが、どの様にしたら変更出来ますでしょうか?

    ■ 自分で試した事
    ブロックの編集画面の項目を探しましたが、見当たりませんでした。

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

    ■ 実際の症状
    2カラムにした場合、左カラムに設定したアイテムがスマホでは全て上にきてしまいます。

    #64269

    うなこ
    モデレーター

    VK Block Patternsをインストールして有効化しますと、
    vk-cols--reverseというクラス名が使えるようになります。

    カラムブロックを選択して、ブロック設定の「高度な設定」の「追加 CSS クラス」にvk-cols--reverseを追加してください。
    このパターンが参考になると思います。2個目の「旬の素材」はスマホサイズで逆になっています。

    カフェ特徴

    #64300

    うなこ 様
    早速のご回答ありがとうございます。

    「追加 CSS クラス」に「vk-cols–reverse」を追加したら、リバースで変更する事が出来ました。
    ただ、リバースにすると編集画面上で左右のコンテンツが入れ替わるので、コツが要るみたいですね。
    頑張ってみます。

    ところで、「追加 CSS クラス」に追加できる、今回の様な「クラス名の一覧等」はどこかに有りますでしょうか?
     もし、ある様でしたら教えていただけると助かります。

    #64302

    うなこ
    モデレーター

    ところで、「追加 CSS クラス」に追加できる、今回の様な「クラス名の一覧等」はどこかに有りますでしょうか?

    機能として追加する方向のため、クラス名の一覧はありませんが、
    機能追加の目処がたっておりませんので、クラス名一覧ページを準備するのかを検討中の段階でございます。

    https://github.com/vektor-inc/lightning/issues/735

    #64426

    うなこ 様
    クラス名一覧に関する質問へのご回答もありがとうございます。

    検討中との事、承知しました。
    基本的にGUIでする方向で頑張ってくださっていらっしゃるのですね。
    ありがとうございます。

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