フリーレイアウト機能にRSSを組み込む際には、同じRSSでも様々なレイアウトで表示することができます。
ここでは、以下のようなレイアウトを実現するために、フリーレイアウト機能をどのように設定すればいいのか、具体的にご紹介します。
①タイトルだけを表示させる
②画像とタイトルを横一列に配置する
③画像とタイトル・本文を表示させる
④画像と文字を複数列で配置する
⑤画像だけを表示させる
まずは使用するRSSを用意します。事前にRSSの推奨される形式をご確認ください。
RSSとは何かを知りたい方は、こちらをご覧ください。
今回は Yappli news のRSS [https://yapp.li/blog/feed/]を例として使用します。
①タイトルだけを表示させる
「機能設定」から「フリーレイアウト機能」を作成し、空のセルのタイトル欄にRSSを入力します。
この時、表示させる文字数を0に設定することで、タイトルのみを表示することができます。
文字の大きさは、赤枠の「タイトル」のフォントサイズから自由に変更することができます。
②画像とタイトルを横一列に配置する
①のRSSを入力したセルの「アピアランス」をクリックし、赤枠の数字を0~1の間で変更して、画像と本文の比率を調整します。（ニュースやブログなどでよく使われる数値は"0.7"です。これは全体のセルを1としたとき、本文を0.7の比率で表示することを表します）
画像が表示されない場合は、こちらの比率が1になっていないかご確認ください。
それでも表示されない場合は、RSSの記述内に「img src="」ではじまる記述があるかをご確認ください。
推奨されるRSSの形式＞
また青枠内に画像を入れておくと、RSSに画像がない場合でもデフォルトで表示される画像を設定することができます。
③画像とタイトル・本文を表示させる
RSSで取得できる情報は、「タイトル」と「本文」に分かれています。
本文の内容を表示させたい場合は、以下のように表示する文字数を設定したRSSを入力します。
rss(https://yapp.li/blog/feed/,4,100)
タイトル・本文は、それぞれフォントサイズや色・配置を自由に変更することができます。
④画像と文字を複数列で配置する
画像のように縦2列や3列に並べて、RSSを表示する方法です。
- まずは、①の枠の横幅を設定します。（2列であれば0.5と入力します）
この状態で、「本文」に入っている文字が２列で表示されたことを確認します。
- 続いて②のパディング（内側の余白）を調整し、画像を表示させます。
画像が表示されていない場合、画像の繰り返し設定がOFFになっているかを確認しましょう。
- RSSで取得している画像の高さに合わせて、一番左の"上の余白"に任意の数字を入れます（目安は100〜200程度）
- プレビューを使って、画像がきれいに表示されるように余白サイズを調整しましょう。
注：RSSで取得する画像のサイズは全て同じ、または同程度のサイズを推奨しております。異なるサイズですとレイアウトが崩れる可能性がございますので、予めご確認ください。
⑤画像だけを表示させる
「アピアランス」からタイトル・本文カラーパネルを"透明"に設定します。
この時、タイトルに入れたRSSも見えなくなりますので、透明化はレイアウトが決定してから行いましょう。
フリーレイアウト機能の使い方はこちら＞
