フリーレイアウト機能にRSSを組み込む際には、同じRSSでも様々なレイアウトで表示することができます。

ここでは、以下のようなレイアウトを実現するための具体的なフリーレイアウト機能の設定方法についてご紹介します。

 

①タイトルだけを表示させる

②画像とタイトルを横一列に配置する

③画像とタイトル・本文を表示させる

④画像と文字を複数列で配置する

⑤画像だけを表示させる

 

 

RSSのレイアウトを設定する前に

• 使用するRSSを用意しましょう。事前にRSSの推奨される形式をご確認ください。
  参考：『RSSとは』『推奨されている形式 - RSS』
  今回は Yappli note のRSS  [https://news.yappli.co.jp/rss]を例として使用します。
  
• 前提としてフリーレイアウト機能を使用いたします。フリーレイアウト機能の操作方法については下記サポートページをご覧ください。
  参考：『フリーレイアウト機能とは』

 

 

①タイトルだけを表示させる

1. RSSに組み込むコードの「表示させる文字数」を「0」に設定します。例えば、表示したい記事数が6の場合は以下となります。
   rss(https://news.yappli.co.jp/rss,6,0)
2. 「詳細設定」より、画像の繰り返しを「有効」に設定します。
   
   

 

 

②画像とタイトルを横一列に配置する

1. RSSを組み込んだブロックの「詳細設定」をクリックします。
2. 「画像の幅」を任意のサイズに変更いたします。ここでは30％に設定いたします。
   

ヒント

• 画像が表示されない場合は、「画像の幅」が「背景」になっていないかをご確認ください。
• それでも表示されない場合は、RSSの記述内に「img src="」ではじまる記述があるかをご確認ください。
  参考：『推奨されている形式 - RSS』
• RSSに画像がない場合でも、ブロックに画像を設定しておくことで、デフォルトで表示される画像を設定することができます。
  

 

 

③画像とタイトル・本文を表示させる

RSSで取得できる情報は、「タイトル」と「本文」に分かれています。

本文の内容を表示させたい場合は、以下のように本文に表示する文字数を設定します。

rss(https://news.yappli.co.jp/rss,6,100)

 

ヒント

• タイトル・本文は、「詳細設定」よりそれぞれフォントサイズや色・配置を自由に変更することができます。
• ここではわかりやすいようにタイトルを青色に設定しています。

 

 

④画像と文字を複数列で配置する

画像のように縦2列や3列に並べて、RSSを表示する方法です。

1. RSSを組み込んだブロックの「詳細設定」をクリックします。
2. 「画像の繰り返し」を「無効」にします。
3. 「カラムの幅」を変更します。2列であれば1/2、3列であれば1/3を選択します。
4. パディング（内側の余白）を調整し、タイトル・本文の表示位置を調整します。RSSで取得している画像の高さに合わせて、一番左の"上の余白"に任意の数字を入れます（目安：100〜200程度）。
   
   

ヒント

• RSSで取得する画像のサイズは全て同じ、または同程度のサイズを推奨しております。異なるサイズですとレイアウトが崩れる可能性がございますので、予めご確認ください。
• 4.で画像を表示させる際は、プレビューヤプリを使って画像がきれいに表示されるように余白サイズを調整しましょう。

 

 

⑤画像だけを表示させる

1. RSSを組み込んだブロックの「詳細設定」をクリックします。
2. 「画像の繰り返し」を「無効」にします。
3. 「タイトルカラー」「本文カラー」を"0%"に設定します。
4. 必要に応じて「マージン」を設定します。
   ここでは記事と記事の間に余白を作るために「10 10 10 10」と設定します。
   

ヒント

• RSSに組み込むコードの「表示させる文字数」を入力しているとその分の余白が生まれます。画像だけを表示させたいは場合は「表示させる文字数」を0にすることを推奨します。