スタイルと画像表示

  • Created : May, 11, 2020
  • Last Updated: Dec, 11, 2023

スタイルの種類と設定

FeedWindではウィジェットのスタイルを複数パターン利用できます。「基本設定」「スタイル」から選択をしてください。選択できるスタイルは下記のとおりです。ウィジェットによって利用できる種類が異なります。

  • テキスト(RSS・Facebook・X)
  • サムネイル(RSS・Facebook・X・Instagram)
  • 画像大(Facebook・X・Instagram)
  • カード(RSS)
  • オーバーレイ(RSS)
  • HTML(RSS)

テキスト

テキストのみの表示で、画像は表示されません。

サムネイル

横幅110px、高さ100pxの画像とテキストを表示します。

サムネイル表示:サムネイル画像の表示方法を選択します。

四角に切り取る 110px × 100pxの枠に画像が収まるように画像を適切な箇所で切り取ります。画像全体は見えませんが、サムネイルのサイズが固定されるので統一感が出ます。
縦横比を維持 横110px固定で画像全体が表示されるようになります。画像が意図しないところで切り取られるのを防ぐことができますが、オリジナルサイズが大きい場合は縮小されて見づらくなることがあります。

サムネイル位置:初期設定ではサムネイルはウィジェットの左側に表示されます。右側に表示を変更することも可能です。
代替画像:記事に画像が含まれていない場合に表示する画像を明示的に指定することができます。画像のURLを指定してください。
画像表示優先順位:RSSウィジェットの設定項目です。

自動 RSS内に記述された画像の中からFeedWind独自の手法で最適な画像を表示します。
media:contentタグ優先 RSS内のmedia:contentで指定された画像を表示します。
media:thumbnailタグ優先 RSS内のmedia:thumbnailで指定された画像を表示します。
enclosureタグ優先 RSS内のenclosureで指定された画像を表示します。

画像大

Facebook、X、Instagramの各ウィジェットで選択できます。設定したウィジェットの横幅に合わせて画像が拡大されて表示されます。

以下のサンプルのようにその他の設定項目と組み合わせることで、より魅力的な表現も可能です(設定内容の詳細はこちら)。

カード

RSSウィジェットのみの設定項目です。画像がカードビュー形式で表示されます。画像の表示位置や表示方法を選べるほか、サムネイル形式と同様に画像が存在しない場合の代替画像を指定することも可能です。

また、カードを選択して「基本設定」「横幅」でレスポンシブに設定している場合、「記事数で指定」という項目が追加されます。ウィジェットの横幅に入る記事数を「2」以上に指定することで、記事を横並びに表示することができます。

カードのサンプル

オーバーレイ

RSSウィジェットのみの設定項目です。ウィジェットにマウスオーバーすると、レイヤーが立ち上がり、テキストが表示されます(「コンテンツ」>「表示内容」で「本文」を選択している場合)。レイヤーのカラーやグラデーションの設定が可能です。

オーバーレイのサンプル

HTML

RSSウィジェットのみの設定項目です。RSS内にCDATAでHTMLが記述されている場合に、FeedWindがHTMLを解釈してそのままのレイアウトでウィジェットを表示します。

サイトに埋め込むだけで更新情報を簡単表示 今すぐブログパーツを使ってみる

FeedWind14日間の無料トライアル

初めてご登録の方はPlus版の無料トライアルをご利用いただけます。

今すぐウィジェットを作成してみる