【投稿リスト編】ノーコード&ブロックエディタのみ!Lightning G3やKatawaraでおしゃれなデザインのホームページを作る

WordPressの有料テーマ「Katawara」やLightning G3の有料プラグイン「Lightning G3 Pro Unit」を購入すると、VK Blocks Proというホームページ制作に便利なブロックがたくさん用意されたプラグインを使用できます。

VK Blocks Proのブロックを組み合わせることで、HTMLやCSSを書かずにノーコードおしゃれなデザインを簡単に作れて便利です。

今回はVK Blocks Proの投稿リストで
おしゃれなデザイン例を5つご紹介いたします!

ノーコードでも工夫次第で色々な表現ができますので、ぜひ参考になさってください!

VK Blocks Proで投稿リストを作る時の準備とヒント

VK Blocks Proで投稿リストを作る時の準備とヒントを書きました。

VK Blocks Proのブロック「投稿リスト」を主に使用

トップページなどで最新のブログやお知らせを表示したい場合、
VK Blocks Proのブロックの一つである「投稿リスト」を使用して、投稿一覧リストを作ります。

PC用とタブレット用とスマホ用の制御は「非表示設定」で制御しています

PC用とタブレット用とスマホ用で投稿リストを複数作成している場合があります。

それぞれの投稿リストの表示設定はテーマに用意されている「非表示設定」という項目でコントロールしています。

ブロックの中にある「非表示設定」をクリック
非表示にしたい画面サイズをチェック

ブラウザのサイズを変えながら表示確認

ブロックエディターで作ってみたら、プレビューをして、ブラウザのサイズを広げたり縮めたりして確認してみてください。

スマホやタブレットなど、画面サイズの異なるデバイスでの表示確認のためにこちらを行います。
※スマホで確認する時とは多少表示が異なる場合があります。

枠線で最新記事を目立たせる投稿リスト

【ポイント】VK Blocks Proのグリッドカラムに分けてそれぞれに設定の異なる投稿リストを追加

VK Blocks Proのグリッドカラムで2カラムにし、それぞれ設定が異なる投稿リストを追加しました。

左カラムの赤い枠線は、枠をつけたいブロックを選択して(ブロックが1つのみでも可)グループ化すると付けられます。

右側は最新記事が出ないように「オフセット」を「1」にして、2番目に新しい記事が出るようにしています。

画像は「枠線で最新記事を目立たせる投稿リスト」のブロックエディターの構造です

区切り線で最新記事を目立たせる投稿リスト


【ポイント】グリッドカラムに分けてそれぞれに設定の異なる投稿リストを追加

1カラムに設定した投稿リストブロックと2カラムに設定した投稿リストブロックを追加しました。

また、1カラムと2カラムの間に標準の区切りを追加して、最新画像を目立たせています。

2カラムになっている投稿リストは最新記事が出ないように「オフセット」を「1」にして、2番目に新しい記事が出るようにしています。

画像は「区切り線で最新記事を目立たせる投稿リスト」のブロックエディターの構造です

カラムをずらした投稿リスト

IT
Google Chromeの便利機能!「選択箇所へのリンクをコピー」で読んでほしいポイントを
WordPress
Photo by Markus Winkler on Unsplash
「画像クリックでポップアップ」Cocoonなら簡単!方法をご紹介します
WordPress
2023年7月1日に現行のGoogleアナリティクスのUAが廃止!WordPressで設定しているUAを新しいGA4に移行する方法
WordPress
【メリット3選】WordPressのブログならテーマはCocoon!Cocoonで町田駅付近の生活・地域情報ブログ「まちさがさんぽ」を運営中
WordPress
WordPressテーマをKatawaraからLightning G3 + Pro Unitにリニューアル!テーマ変更のメリット3つ

【ポイント】グリッドカラムに分けてそれぞれに設定の異なる投稿リストを追加

2カラムに設定した投稿リストブロックと3カラムに設定した投稿リストブロックを追加しました。

3カラムになっている投稿リストは最新記事が出ないように「オフセット」を「2」にして、3番目に新しい記事が出るようにしています。

画像は「カラムをずらした投稿リスト」のブロックエディターの構造です

最新記事の画像が大きい投稿リスト

PC・タブレット用とスマホ用で投稿リストを2種類作成しています。

PC、タブレット用投稿リスト

スマホ用投稿リスト

IT
Google Chromeの便利機能!「選択箇所へのリンクをコピー」で読んでほしいポイントを
WordPress
Photo by Markus Winkler on Unsplash
「画像クリックでポップアップ」Cocoonなら簡単!方法をご紹介します
WordPress
2023年7月1日に現行のGoogleアナリティクスのUAが廃止!WordPressで設定しているUAを新しいGA4に移行する方法
WordPress
【メリット3選】WordPressのブログならテーマはCocoon!Cocoonで町田駅付近の生活・地域情報ブログ「まちさがさんぽ」を運営中
WordPress
WordPressテーマをKatawaraからLightning G3 + Pro Unitにリニューアル!テーマ変更のメリット3つ
WordPress
WordPressの診断プラグイン「Yes/No Chart」を使って「ゆうそうとのサービス診断」を作りました!

【ポイント】標準のカラムを使うことで画像の大きさが異なる投稿リストを作成

標準のカラムで2カラムにしオフセット設定が異なる投稿リストを追加しました。

右側は最新記事が出ないように「オフセット」を1つ追加して、2番目に新しい記事が出るようにしています。

画像は「最新記事の画像が大きい投稿リスト」のブロックエディターの構造です

また、PC用かスマホ用かの見分けがつきやすいようにしました。

投稿リストの前に段落ブロックを「PC・タブレット用投稿リスト」などと明記して非表示設定でどの画面サイズでも表示しないようにしてあります。

LTG Media Postsを再現した投稿リスト

昔のLightningウィジェットにあった「LTG Media Posts」の画像カード 1st featureを再現した投稿リストです。

LTG Media Postsが好きだった方は特にご参考になさってみてください!

スライダーで流れる投稿リスト

PC・タブレット用とスマホ用で投稿リストを2種類作成しています。

PC、タブレット用投稿リスト

スマホ用投稿リスト

【ポイント】VK Blocks Proのスライダーで投稿リストを作成

VK Blocks Proのスライダーで投稿リストを作成し、オフセット設定が異なる投稿リストを追加しました。

PC・タブレットでは3カラム、スマホで1カラムで表示するようにしてあります。

スライダーで流れる投稿リストのリストを増やすには、投稿リストが入ったスライダーアイテムを複製し、オフセットの数字を変えるだけでOKです。

画像は「スライダーで流れる投稿リスト」のブロックエディターの構造です

また、PC用かスマホ用かの見分けがつきやすいようにしました。
投稿リストの前に段落ブロックを挿入し「PC・タブレット用投稿リスト」などと明記して非表示設定でどの画面サイズでも表示しないようにしてあります。

Lightning G3 Pro Unit、Katawaraを未購入の方はこちらから購入可能です

有料テーマのKatawaraは、左にメニューが表示されるおしゃれなテーマです。

買い切りで複数のサイトで使いまわせるところもおすすめのひとつです!

大幅な機能変更や追加はないようですので、カスタマイズがしやすいテーマでもあります。

Katawaraのデモサイト

Lightning G3 Pro Unitは、Lightningを使ってる方に特におすすめの拡張プラグインです。

以下のようにホームページを使いやすく&充実させることができます。

  • 見出しのデザインを簡単に変更
  • ヘッダーを半透明に変更
  • ヘッダーに電話番号やお問合せボタンを追加

Lightning G3 Pro Unitは買い切りではありませんが、アップデート保証期間が1年、3年、5年の3つのプランがあります。

Lightning G3 Pro Unitのデモサイト

Lightning G3 Pro Unit、Katawaraのご相談を受け付けております!

以上ノーコード&ブロックエディタのみで投稿リストをおしゃれに見せる方法でした!
また投稿リストの活用アイディアが思いついたらこちらに追加します。

こちらに掲載している投稿リストの具体的な設置手順はもちろん、Lightning G3 Pro Unit、Katawaraでこんな風にできないか?などのご相談がありましたらお問合せください!