WordPress コアの RSS ブロックのカスタマイズ例

2025年1月27日(月)2025年6月19日(木)対馬 俊彦対馬 俊彦

WordPress コアの RSS ブロックを使うと、外部サイトの RSS または Atom フィードを取得して新着情報を表示できます。

対馬

これを使うと WordPress 以外のブログのフィードも表示できますので、例えばブログをアメーバブログで運用している場合などに活用できますね。

この RSS ブロックを使って弊社メインサイト https://uonuma-js.com/ のフィードを表示したものをカスタマイズしてみます。

グリッドビュー と リストビュー の両方で、それぞれ1つずつカスタマイズしてみました。

デフォルトの RSS ブロック（グリッドビュー）

テーマが Lightning G3 の場合、デフォルトで以下のように表示されます。

グリッドビューのカスタマイズ例

カスタマイズ内容

  • 対角のコーナーをカットしたデザインにしています。
  • 背景色を交互に切り替えています。
  • リンク先を新しいタブで開くようにしてあります。
  • スマホで2列表示にしてあります。
  • 日付を先頭に配置してあります。
  • リンクエリアを枠全体に拡張してあります。
  • マウスホバーで上に動く効果を設定してあります。

デフォルトの RSS ブロック（リストビュー）

テーマが Lightning G3 の場合、デフォルトで以下のように表示されます。

リストビューのカスタマイズ例

カスタマイズ内容

  • リンク先を新しいタブで開くようにしてあります。
  • 日付を左に配置して1行で表示してあります。
  • 日付の表示形式を 2025年1月17日 から 2025 / 1 / 17 に変更してあります。
  • リンクエリアを行全体に拡張してあります。
  • マウスホバーで日付の色が反転する効果を設定してあります。
  • パソコンで表示したときの幅を小さめにしてあります。

関連記事

note のフィードを WordPress で表示したカスタマイズ例 | Lightning / VK Blocks / WordPress のカスタマイズ ②

WordPress サイトのトップページにこのサイトの新着情報と note の新着情報を並べて表示するカスタマイズを行いました。

Lightning / VK Blocks / WordPress のカスタマイズ ②

投稿者プロフィール

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

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

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

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

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

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

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

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

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

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

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

ご相談・お仕事のご依頼はこちら
カテゴリー
WordPressカスタマイズ
タグ
前の記事

画面下部に固定するレスポンシブ対応バナーの制作例

2024年10月10日
カテゴリー
WordPressカスタマイズ
タグ
CSSバナーレスポンシブ対応
この記事を読む
次の記事

カスタム投稿タイプごとにサイトアイコンを切り替えたカスタマイズ例

2025年1月30日
カテゴリー
カスタマイズ
タグ
カスタム投稿タイプサイトアイコンフィルターフック
この記事を読む