VWSとは フォーラム Lightning 固定ページでうまく3列表記したい

固定ページでうまく3列表記したい

10件の投稿を表示中 - 1 - 10件目 (全10件中)
  • 投稿者
    投稿
  • #29333

    takesho
    参加者

    現在Lightning Pro,Pale Ⅱを使用しています。

    固定ページで、カラムで3列に分けて、それぞれを上から写真・見出し・記事と並べてその囲み自体にリンクを貼りたいのですが、outerを使って外枠をつけると写真が小さくなったり、リンクを貼ろうとしたら画像・見出し・記事とそれぞれにリンクを設定しないといけません。

    添付の画像のように、外に囲みが付けれて写真が横いっぱいに表示され、かつ囲みにマウスを持ってくるとその囲み自体がリンクになるようにはどうすればいいでしょうか。

    質問が分かりにくくて申し訳ありませんが、分かる方いらっしゃればお願いいたします。

    #29334

    takesho
    参加者

    申し訳ありません、写真の添付を忘れていました。

    よろしくお願いします。

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

    DRILL LANCER
    モデレーター

    WordPress 5.3 からグループブロックというものが登場いたしまして、
    外枠をつける分にはそれを使うと良いと思います。
    https://www.vektor-inc.co.jp/post/vk-blocks-0-16-0/

    リンクの件については、コードエディタで HTML コードを取得して カスタムHTML ブロックを使って編集するより無いと思います。

    ※私は部外者の一般人なのでこのような回答をすることしかできません。ご了承ください。

    #29344

    takesho
    参加者

    DRILL RANCER様

    早速のご回答ありがとうございます。
    グループ化して枠線をつけるところまではいきました。
    線のスタイルは直線を選択しています。

    この状態から、次の2点は可能でしょうか。
    ・写真を横幅一杯に掲載
    ・カラムにリンクをはる(各カラムにマウスオンすると、画像でもテキストでもリンクになる)

    お手数ですが、よろしくお願い致します。

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

    DRILL LANCER
    モデレーター

    写真を横幅一杯に掲載

    この件については下記コードで余白を調整すると可能になります。

    .wp-block-group.is-style-vk-group-solid {
        padding: 1.8em;
    }

    ※直線で囲んだ部分内側の余白が変更されます。

    padding の設定方法は下記が参考になります。いい感じに編集してみてください。
    http://www.htmq.com/style/padding.shtml

    カラムにリンクをはる(各カラムにマウスオンすると、画像でもテキストでもリンクになる)

    ビジュアルエディタでそれをするのは私が知る限りでは不可能ですが、それに対応したプラグインが無いとも限らないので探して見るといいかもしれません。

    HTMLが使えるのならコードエディタに切り替えた後ブロックが出力した div タグのどれかを a タグに変更することで実現可能となります。

    #29376

    Vektor,Inc
    キーマスター

    プラグインのGutenbergを有効化して、ブロックとしてExUnitの3PRウィジェットを使うか、
    一応これに近いブロックは現在開発中で予定では今月リリース予定です。
    ただ、毎回実装に予想外に手こずったり他の作業が入ったりするので、リリースが伸びたらすみません…。

    #29392

    takesho
    参加者

    DRILL RANCERさん

    いつも的確なご回答ありがとうございます。

    こちらで今回は対応させていただきます。

    #29393

    takesho
    参加者

    Vector Incさん

    ワードプレスを始めた当初からずっと利用させていただいております。
    こちらに出会ってなければ5年間も続いていなかったと思います。

    今後もLightning一筋でお客様にいいサイトを提供していきたいと思いますので、大変お手数ですが今後ともよろしくお願いいたします。

    #29655

    takesho
    参加者

    何度もすいません。

    その後カラムに分けてouterで画像、見出し、テキストを入れて外枠をつけて写真がいっぱいに表示されるまでは行きました。

    それをレスポンシブルにしてみると、3番目が下に移動した際に、1番目と3番目がぴったりくっついてしまいます。
    さらに1列になると全部の上下がくっついていしまいます。
    cssなどでスペースを入れることは可能でしょうか。

    また、横幅が小さくなる際に、3列から1列にすることは可能でしょうか。
    (3×3の場合、2列・1列が3つになるため、並びがイマイチ)

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

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

    DRILL LANCER
    モデレーター

    それをレスポンシブルにしてみると、3番目が下に移動した際に、1番目と3番目がぴったりくっついてしまいます。さらに1列になると全部の上下がくっついていしまいます。
    cssなどでスペースを入れることは可能でしょうか。

    各カラムの Outer の下に VK Block Layout > レスポンシブスペーサー を挿入して、全カラムの レスポンシブスペーサー の設定を同一にすれば可能と思われます。

    また、横幅が小さくなる際に、3列から1列にすることは可能でしょうか。
    (3×3の場合、2列・1列が3つになるため、並びがイマイチ)

    1. カラムブロック > 高度な設定 > 追加 CSS クラス に column-3を追加
    2. 下記選択肢のいずれかに下記 CSS コードを追記
    • 子テーマの style.css
    • 外観 > カスタマイズ > 追加CSS
    • ExUnit > CSS カスタマイズ
    .column-3.wp-block-columns{	
    	justify-content:space-around;
    }
    @media (min-width: 600px) {
    	.column-3 .wp-block-column {
    		flex-basis: auto;
    		width:100%;
    		margin-left:0;
    	}
    }
    @media (min-width: 782px) {
    	.column-3 .wp-block-column {
    		flex-basis: auto;
    		width:30%;
    		margin-left:0;
    	}
    }

    P.S.
    IE は固有のバグが多く対応しきれないため非対応です。ご了承ください。

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