以前に使っていた LTG Media Posts ウィジェット の「画像カード 1st feature」のようなレイアウトにするために、VK Blocks Pro の 投稿リスト で先頭(最新)の投稿を大きく表示するカスタマイズをしてみました。

表示タイプを「カード(インテキスト)」にしてあります。

2022.12.22 ずらしたカスタマイズ例を追加しました。

先頭の1件だけを大きく表示したカスタマイズ例

VK Blocks Pro
VK Blocks Pro 1.49.0 の新機能「カスタムブロックスタイル設定」New!!
VK Blocks Pro
カスタマイズ
投稿リストのカスタマイズ例 (VK Blocks Pro)
Lightning G3
フルサイズのアイキャッチ画像を投稿のページヘッダー背景画像に使うには
VK Blocks Pro
カスタマイズ
投稿リスト「テキスト1カラム」に抜粋を表示したカスタマイズ例
VK Blocks Pro
VK Blocks Pro 1.48.0 の新機能「カスタム書式設定」が超便利ですご過ぎる
VK Blocks Pro
VK Blocks Pro の投稿リストの先頭の投稿を大きく表示したカスタマイズ例
VK Blocks Pro
画面遷移せずに VK Blocks Pro の投稿リストをカテゴリーで絞り込む
VK Blocks Pro
VK パターンライブラリをもっと楽しむカスタマイズレシピ
VK Blocks Pro
VK パターンライブラリをもっと楽しむカスタマイズレシピ「お客様の声」

先頭の2件を大きく表示したカスタマイズ例

VK Blocks Pro
VK Blocks Pro 1.49.0 の新機能「カスタムブロックスタイル設定」New!!
VK Blocks Pro
カスタマイズ
投稿リストのカスタマイズ例 (VK Blocks Pro)
Lightning G3
フルサイズのアイキャッチ画像を投稿のページヘッダー背景画像に使うには
VK Blocks Pro
カスタマイズ
投稿リスト「テキスト1カラム」に抜粋を表示したカスタマイズ例
VK Blocks Pro
VK Blocks Pro 1.48.0 の新機能「カスタム書式設定」が超便利ですご過ぎる
VK Blocks Pro
VK Blocks Pro の投稿リストの先頭の投稿を大きく表示したカスタマイズ例

先頭の2件を大きく表示してずらしたカスタマイズ例

VK Blocks Pro
VK Blocks Pro 1.49.0 の新機能「カスタムブロックスタイル設定」New!!
VK Blocks Pro
カスタマイズ
投稿リストのカスタマイズ例 (VK Blocks Pro)
Lightning G3
フルサイズのアイキャッチ画像を投稿のページヘッダー背景画像に使うには
VK Blocks Pro
カスタマイズ
投稿リスト「テキスト1カラム」に抜粋を表示したカスタマイズ例
VK Blocks Pro
VK Blocks Pro 1.48.0 の新機能「カスタム書式設定」が超便利ですご過ぎる
VK Blocks Pro
VK Blocks Pro の投稿リストの先頭の投稿を大きく表示したカスタマイズ例

上記のカスタマイズ例はどれも単一の投稿リストを CSS の グリッドレイアウト display: grid; を使ってカスタマイズしてあります。

グリッドレイアウトの行・列の指定ルールを理解すると、このように柔軟なレイアウトを少ない作業工数で組むことができますし、レスポンシブ対応も容易に実装できます。

対馬

上記のずらしたちょっと複雑なレイアウトにするとき、行・列の番号指定がわかりづらいので、私は Excel のセル結合を使って確認しています。

魚沼情報サービスでは、WordPress の設定やカスタマイズなどのオンラインレッスン・サポートを提供しています。わからないところ、教えてほしいところに絞ってピンポイントで課題解決のお手伝いをいたします。全国どこからでもお申込みを承っています。

ご興味をお持ちの方はお気軽にお問い合わせください。

サイト運営者プロフィール

対馬 俊彦
対馬 俊彦魚沼情報サービス (新潟県南魚沼市)
WordPress を使用したサイト制作・カスタマイズを全国どこからでも承ります。ベクトルが販売している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン「VK Blocks」「VK Filter Search」のカスタマイズを得意としています。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを開設・運用する上で、うまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

このサイトで行っているカスタマイズのやり方の多くもマンツーマンのオンラインレッスン形式などでわかりやすく説明させていただくことができますので、興味がある方はご連絡ください。

* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* アクションフック・フィルターフック・PHP・jQuery・CSS によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。

ご要望をうかがった上で費用見積り(無料)を提示させていただきますので、お気軽にお問い合わせください。

» ご相談・お問い合わせはこちらからどうぞ

WordPress / Lightning オンラインサポートのご案内

魚沼情報サービスの対馬です
サイトをご覧いただき、ありがとうございます。
このサイトを運営している、魚沼情報サービスの対馬です。

私は1990年代からホームページ制作業務を行っており、現在は Lightning / Katawara およびベクトルのプラグイン VK Blocks / VK Filter Search などを用いたサイト制作を最も得意としています。

これらのテーマ、プラグインの設定やカスタマイズでお困りの方のお手伝いも行っております。

Zoom オンラインレッスン形式でサポートして、あなたのお力になります。

* 近くに頼りになるところがない
* わからないところを教えてほしい
* 専門家にサイト制作を手伝ってもらいたい
という方はぜひお気軽にご相談ください。