【投稿リスト編】ノーコード＆ブロックエディタのみ！Lightning G3やKatawaraでおしゃれなデザインのホームページを作る【コピペOK】
松田 啓
こちらは広告が入った記事ですが、本当におすすめしたいものだけを掲載しています
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用とタブレット用とスマホ用で投稿リストを複数作成している場合があります。
それぞれの投稿リストの表示設定はテーマに用意されている「非表示設定」という項目でコントロールしています。
ブラウザのサイズを変えながら表示確認
ブロックエディターで作ってみたら、プレビューをして、ブラウザのサイズを広げたり縮めたりして確認してみてください。
スマホやタブレットなど、画面サイズの異なるデバイスでの表示確認のためにこちらを行います。
※スマホで確認する時とは多少表示が異なる場合があります。
枠線で最新記事を目立たせる投稿リスト
オリジナルテーマから既存テーマへの変更のメリット5選！カスタマイズ性と運用効率が向上します2024年1月17日
WordPressを使っている中で WordPressを使ってるけどメニューやページの書き換えができない 検索したけど書いているやり方ができない などということはありませんか？ オリジナルテーマから既存テーマへの変更は、 […]
【ポイント】VK Blocks Proのグリッドカラムに分けてそれぞれに設定の異なる投稿リストを追加
VK Blocks Proのグリッドカラムで2カラムにし、それぞれ設定が異なる投稿リストを追加しました。
左カラムの赤い枠線は、枠をつけたいブロックを選択して(ブロックが1つのみでも可)グループ化すると付けられます。
右側は最新記事が出ないように「オフセット」を「1」にして、2番目に新しい記事が出るようにしています。
区切り線で最新記事を目立たせる投稿リスト
【ポイント】グリッドカラムに分けてそれぞれに設定の異なる投稿リストを追加
1カラムに設定した投稿リストブロックと2カラムに設定した投稿リストブロックを追加しました。
また、1カラムと2カラムの間に標準の区切りを追加して、最新画像を目立たせています。
2カラムになっている投稿リストは最新記事が出ないように「オフセット」を「1」にして、2番目に新しい記事が出るようにしています。
カラムをずらした投稿リスト
【ポイント】グリッドカラムに分けてそれぞれに設定の異なる投稿リストを追加
2カラムに設定した投稿リストブロックと3カラムに設定した投稿リストブロックを追加しました。
3カラムになっている投稿リストは最新記事が出ないように「オフセット」を「2」にして、3番目に新しい記事が出るようにしています。
最新記事の画像が大きい投稿リスト
PC・タブレット用とスマホ用で投稿リストを2種類作成しています。
PC、タブレット用投稿リスト
スマホ用投稿リスト
【ポイント】標準のカラムを使うことで画像の大きさが異なる投稿リストを作成
標準のカラムで2カラムにしオフセット設定が異なる投稿リストを追加しました。
右側は最新記事が出ないように「オフセット」を1つ追加して、2番目に新しい記事が出るようにしています。
また、PC用かスマホ用かの見分けがつきやすいようにしました。
投稿リストの前に段落ブロックを「PC・タブレット用投稿リスト」などと明記して非表示設定でどの画面サイズでも表示しないようにしてあります。
LTG Media Postsを再現した投稿リスト
昔のLightningウィジェットにあった「LTG Media Posts」の画像カード 1st featureを再現した投稿リストです。
LTG Media Postsが好きだった方は特にご参考になさってみてください！
スライダーで流れる投稿リスト
PC・タブレット用とスマホ用で投稿リストを2種類作成しています。
【ポイント】VK Blocks Proのスライダーで投稿リストを作成
VK Blocks Proのスライダーで投稿リストを作成し、オフセット設定が異なる投稿リストを追加しました。
PC・タブレットでは3カラム、スマホで1カラムで表示するようにしてあります。
スライダーで流れる投稿リストのリストを増やすには、投稿リストが入ったスライダーアイテムを複製し、オフセットの数字を変えるだけでOKです。
また、PC用かスマホ用かの見分けがつきやすいようにしました。
投稿リストの前に段落ブロックを挿入し「PC・タブレット用投稿リスト」などと明記して非表示設定でどの画面サイズでも表示しないようにしてあります。
Lightning G3 Pro Unit、Katawaraを未購入の方はこちらから購入可能です
有料テーマのKatawaraは、左にメニューが表示されるおしゃれなテーマです。
買い切りで複数のサイトで使いまわせるところもおすすめのひとつです！
大幅な機能変更や追加はないようですので、カスタマイズがしやすいテーマでもあります。
Lightning G3 Pro Unitは、Lightningを使ってる方に特におすすめの拡張プラグインです。
以下のようにホームページを使いやすく＆充実させることができます。
- 見出しのデザインを簡単に変更
- ヘッダーを半透明に変更
- ヘッダーに電話番号やお問合せボタンを追加
Lightning G3 Pro Unitは買い切りではありませんが、アップデート保証期間が1年、3年、5年の3つのプランがあります。
Lightning G3 Pro Unit、Katawaraのご相談を受け付けております！
以上ノーコード＆ブロックエディタのみで投稿リストをおしゃれに見せる方法でした！
また投稿リストの活用アイディアが思いついたらこちらに追加します。
こちらに掲載している投稿リストの具体的な設置手順はもちろん、Lightning G3 Pro Unit、Katawaraでこんな風にできないか？などのご相談がありましたらお問合せください！
ホームページの新規作成・リニューアルで
お困りの担当者様へ
WordPressの機能を活かして運用しやすいホームページを作成
せっかくのWordPressなのに「自分で文章が書き換えられない」「ブログの更新ができない」などWordPressの機能を活かしきれていないことはありませんか？
ゆーそうとではWordPressの機能を最大限発揮して、HTMLなどの知識がないお客様でも運用しやすいホームページを作成します。
