カスタマイズ前 通常のグリッドカラムカードブロック
カスタマイズ後 丸抜き画像に文字を重ねたグリッドカラムカードブロック
丸抜き画像全体にリンクの動作をさせるために、以下のすべての部分にリンクを設定しています。そのため、手間がかかっています。
- 画像
- 見出し
- 段落
備忘録 グリッドカラムカードに 追加 CSS クラス gc-card-1
を指定してある。
こういう使い方をするなら、カードブロックの方が使いやすいですね。
2023.11.5 レイアウトくずれ修正
画像が以下のように表示されるようになっていることに気がついた。
Lightning 15.12.1 にアップデートされたタイミングで、
/wp-content/themes/lightning/_g3/assets/css/style-theme-json.css
に追加された以下の行が影響している。
.wp-block-image img:not([style*=object-fit]) {
height: auto!important;
}
対策として以下の CSS を !important を追加した。
.gc-card-1 .vk_gridcolcard_item_header .wp-block-image img {
width: 240px;
height: 240px !important;
min-height: unset;
min-width: unset;
border-radius: 50%;
}
2022.4.22 追記 カラム全体にリンクを指定できるようになりました
VK Blocks Pro 1.31.0 でグリッドカラムカードブロックのカラム全体にリンクを指定できるようになりました🎉これにより、上記の手間がかかるリンク設定作業が不要になって、カードブロックのカスタマイズ と同程度の作業で、下記のようなカスタマイズが楽にできるようになりました。
2022.4.25 マウスホバーで画像を拡大するようにしました。
備忘録 グリッドカラムカードに 追加 CSS クラス gc-card-2
を指定してある。
2024.8.15 追記 表示がおかしくなっていることに気がつき、修正しました
この記事のグリッドカラムカードブロックの表示が以下のようになっていることに気がつきました。
原因① インナーブロックが出力されなくなった
どこかのアップデートによりインナーブロック (クラス名 .vk_gridcolcard_item_body_inner
)が出力されなくなったみたいで、インナーブロックのクラス名を指定した CSS が反映されなくなっていました。
対策として、インナーブロックのクラス名を使わないように CSS を調整しておきました。
原因② アスペクト比の設定が追加されていた
どこかのアップデートによりアスペクト比の設定が追加されていたみたいで、このアスペクト比により丸抜き画像がずれて表示が欠けてしまっていました。
対策として、アスペクト比の指定を auto にしておきました。
関連記事
投稿者プロフィール
-
【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、お手伝いいたします。
Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。
遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。
オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。
デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。
ご要望をうかがった上で費用見積り(無料)を提示させていただきますので、お気軽にお問い合わせください。
≫メールでのお問い合わせはこちら
最新の投稿
Lightning テーマ使用
中小企業様、個人事業主様向け
最適なホームページ
を制作いたします
制作費用 | クオリティを落とさずに 価格を抑えたサイトを制作します |
必要十分 | お問い合わせフォーム、新着情報など 必要なものが最初から揃っています |
サポート | 1年間のサポートがついて安心 初めてでもホームページを活用できます |