クエリーループを使ってノーコードで作った投稿リスト ＋ 追加カスタマイズ
対馬 俊彦白抜き文字の日付の部分が特徴的な投稿リストをクエリーループを使ってノーコードで作ってみました。
この通り、ノーコードでもかなりのところまで作ることができますが、使い勝手や見た目にもう少しこだわりたい、ってときは CSS が必要になります。
ということで、以下のようにカスタマイズしてみました。
CSS でカスタマイズした例
- カードの高さを揃えました。
- カード全体をリンクエリアにしました。
- マウスホバー効果を設定しました。
- スマホで2カラムのレイアウトにしました。
投稿リストを自由にデザインできるのがクエリーブロックの魅力です。
ブロックテーマの X-T9 であれば、アーカイブページもクエリーブロックを使って作ることができるんです。
関連記事
X-T9 でクエリーブロックを使ってアーカイブページをカスタマイズした例がこちらです。
ブログの投稿リストをカスタマイズしました | X-T9 / VK Blocks Pro / WordPress のカスタマイズ - ujs
日付の部分が特徴的な白抜き文字になっているカード型のデザインです。
X-T9 / VK Blocks Pro / WordPress のカスタマイズ - ujs 
投稿者プロフィール
- 魚沼情報サービス・ベクトル公式テクニカルパートナー
-
【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。
Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。
遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。
オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。
デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。
ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。
メールでのお問い合わせはこちら
最新の投稿
WordPress2025年12月24日クエリーループを使ってノーコードで作った投稿リスト ＋ 追加カスタマイズ
Lightning G32025年10月24日オリジナルのモバイル固定ナビ② - ナビゲーションブロックと組み合わせ
Lightning G32025年10月24日オリジナルのモバイル固定ナビ① - Lightning モバイルナビと組み合わせ
VK Blocks2025年9月30日VK スライダーで作った左右にゆっくり流れるギャラリー
