【カスタマイズ例】スライダーで新着投稿をカルーセル表示

VK Blocks Pro の 投稿リスト と スライダー を使った、~~最新6件~~ 最新8件の新着投稿を表示するカルーセルのカスタマイズ例です。

2023.7.6 追記

最近の Lightning および VK Blocks のアップデートにより、組み込まれている Swiper のバージョンが 9.* にアップデートされました。
このことにより、カルーセルを正常に動作させるために同時表示スライド数の倍以上の数のスライドが必要になりました。これに加えて、スライドを中央に配置する場合はさらに2枚のスライドが必要です。

上記のカルーセルはいままで6件の新着記事をカルーセル表示していましたが、正常動作しなくなったため、記事数を8件に増やしてあります。

備忘録

スライダーブロックに追加 CSS クラス .card-in-text-right を指定してある。

画面幅が 992px より少し大きいあたりで投稿タイトルの行数が増えて見た目が悪くなる（投稿日の表示が欠ける）ので、以下の CSS により投稿タイトルの行数を最大4行に制限してある。

.card-in-text-right .card-intext .card-intext-inner .vk_post_body .vk_post_title {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

最初にスライダーアイテムが一瞬だけ大きく表示されることを防ぐために、以下の CSS を追加してある。

@media (min-width:576px) {
  .wp-block-vk-blocks-slider-item {
    max-width: 50vw;
  }
}

@media (min-width:992px) {
  .wp-block-vk-blocks-slider-item {
    max-width: 25vw;
  }
}

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

対馬俊彦魚沼情報サービス (新潟県南魚沼市)

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

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

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

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

また、制作業者様のサイト制作のお手伝いも数多く行っております。いま人手が足りない、ちょっとここだけコーディングを頼みたい、等々… お仕事の依頼をお待ちしています。

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

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

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

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

WordPress を使用したサイト制作・カスタマイズ・サポートを全国どこからでも承っています。ベクトルが開発している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン (VK Blocks Pro ・ VK Filter Search Pro) を使ったサイト制作・カスタマイズを最も得意としています。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

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

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

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

ご要望をうかがった上で費用見積り（無料）を提示させていただきます。

ご相談・お問い合わせはお気軽にどうぞ