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

[takesho]

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

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

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

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

[takesho]

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

よろしくお願いします。

Attachments:

You must be logged in to view attached files.

[DRILL LANCER]

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

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

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

[takesho]

DRILL RANCER様

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

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

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

Attachments:

You must be logged in to view attached files.

[DRILL LANCER]

写真を横幅一杯に掲載

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

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

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

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

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

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

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

[Vektor,Inc]

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

[takesho]

DRILL RANCERさん

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

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

[takesho]

Vector Incさん

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

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

[takesho]

何度もすいません。

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

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

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

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

Attachments:

You must be logged in to view attached files.

[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 は固有のバグが多く対応しきれないため非対応です。ご了承ください。

[投稿者]

投稿