Swiper の coverflow 効果の新着記事カルーセルをクエリーループで実装した例

WordPress コアの クエリーループ ブロックをカスタマイズして、Swiper の coverflow 効果を実装した新着記事のカルーセルを実装しました。

実装について

• ブロックはひとつのクエリーループだけで実装してあります。
• カード全体をリンクエリアにして使い勝手を向上しました。
• アイキャッチ画像にマウスホバー効果を設定してあります。
• 記事タイトルの文字数が多い・少ないが混在している場合、スライド時にスライダーの高さがカックンと変わってしまうことがないように調整してあります。
• ページネーションをやや控えめにしました。
• ブロックをコピーするだけで他のサイトで使い回しできるようにしてあります。

実案件で使う際の注意点など

• 過去の新着情報のリンク (2箇所あり) が /blog/ になっているので、コピー先のサイトに合わせて変更すること。
• 投稿にカテゴリーが複数設定されている場合は先頭のカテゴリーだけが表示される。
  投稿に設定されているカテゴリーの HTML をすべて出力して、CSS で表示・非表示をコントロールしているので、複数のカテゴリーを表示する仕様をかんたんに実装できる。

関連記事

この記事のカルーセルのベースになっているのは以下の記事で実装したカルーセルです。

投稿者プロフィール

対馬 俊彦魚沼情報サービス・ベクトル公式テクニカルパートナー

【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。

Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

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

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

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

≫メールでのお問い合わせはこちら

最新の投稿

投稿者アーカイブ

• WordPress2026年6月19日WordPress 7.0 のグリッドブロックのうれしいレイアウト仕様
• X-T92026年6月15日X-T9 でサイドバーにフローティングバナーを設置するカスタマイズ手順
• X-T92026年6月10日X-T9 のサイトにパンくずリストを表示しました
• WordPress2026年5月31日重要なお知らせを先頭に表示して新着記事一覧から除外したカスタマイズ

WordPress のトラブル解決・設定・カスタマイズ

ベクトル公式テクニカルパートナー
があなたをお手伝いします

Zoom で画面共有してQ&A形式でサポートいたします。わからないところや疑問点をどんどん質問してください。その場ですぐに解決をお手伝いします。※ご希望の方にはメールでのサポートも可能です。

PHP / jQuery / CSS / アクションフック / フィルターフック のカスタマイズのご依頼も承ります。自分では思い通りにできないのでプロの力を借りたいとお考えの方、ぜひご相談ください。

ご相談・お仕事のご依頼はこちら