【投稿リスト編】ノーコード&ブロックエディタのみ!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用とタブレット用とスマホ用で投稿リストを複数作成している場合があります。

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

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

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

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

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

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

IT
Webで起こる「おかしな不具合」にはたくさんの原因が!スクリーンショットで送ってもらえると早く解決できますNew!!

WordPressを運用したりSNSやWebサービスを利用する様々な場面で、ウェブの「おかしな不具合」に遭遇することがあるかと思います。 例えば「WordPressのホームページが見えない」状態になったとして、これだけの […]

続きはこちら

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

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

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

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

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

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


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

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

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

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

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

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

IT
Webで起こる「おかしな不具合」にはたくさんの原因が!スクリーンショットで送ってもらえると早く解決できます
WordPress
【2023年版】Jetpackの新しい統計情報から昔の統計情報に戻す方法
WordPress
WordPressのダッシュボードの「コメント」に数字がついている理由3選
IT
Google Chromeなら右クリックで日本語に翻訳できる!
IT
ギザギザしない!画像を高画質に拡大変換できるWebサービス「waifu2x」!

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

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

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

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

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

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

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

スマホ用投稿リスト

IT
Webで起こる「おかしな不具合」にはたくさんの原因が!スクリーンショットで送ってもらえると早く解決できます
WordPress
【2023年版】Jetpackの新しい統計情報から昔の統計情報に戻す方法
WordPress
WordPressのダッシュボードの「コメント」に数字がついている理由3選
IT
Google Chromeなら右クリックで日本語に翻訳できる!
IT
ギザギザしない!画像を高画質に拡大変換できるWebサービス「waifu2x」!
WordPress
Table of Contents Plus (TOC+) var.2302で目次が表示されなくなった時の原因と対処方法

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

標準のカラムで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でこんな風にできないか?などのご相談がありましたらお問合せください!

ホームページの新規作成・リニューアルでお困りの担当者様へ

WordPressの機能を活かして運用しやすいホームページを作成

せっかくのWordPressなのに「自分で文章が書き換えられない」「ブログの更新ができない」などWordPressの機能を活かしきれていないことはありませんか?

ゆうそうとではWordPressの機能を最大限発揮して、HTMLなどの知識がないお客様でも運用しやすいホームページを作成します。

この記事の作業代行をご依頼希望の方はこちら