FeedCanvasではRSSフィードの表示領域の見た目をある程度ユーザーがデザインできるようになっています。ブログのデザインに溶け込むような自然な設置も可能なので、商用サービスを利用した時のような「RSSフィードの表示部分だけ異なるデザインで浮いて見えてしまう」ことを防ぐことができます。
FeedCanvaのリスト表示で設定できる項目は大き5つで、表示の並び順、見出しテキスト、リスト領域、リストのテキストと背景、囲み線となります。
以下では、それぞれの設定値が表示上のどの部分にあたるのか、表示例を示しながら説明していきます。なお、リスト表示は2つのデザインを独立して設定できますが、設定項目は同じです。
表示の並び順
リスト表示させるRSSフィードの上から下への並び順です。更新日時が新しいものを上に持ってくるか、それともRSSフィードURLタブの中で設定した#1から#50の順番に表示させるかを選択できます。デフォルトは「更新日時が新しい順」です。
なお、1サイトから表示されるRSSフィードは1件です。RSSの中に複数の記事情報が含まれていたとしても、その中で最も新しい1件のみを参照して表示させる仕様となっています。
見出しテキスト
この項では見出しテキストの文字（半角全角問わず0〜20文字まで）、開始位置（0〜100px）、フォントサイズ（2〜40px）、文字色（#000000〜#FFFFFF）を設定できます。リスト1の場合、それぞれのデフォルトは「他サイト更新情報」「20」「14」「#666666」です。
見出しのテキスト、フォントサイズ、文字色は説明がなくともわかりやすいと思うのですが、「見出しの左位置」というのはわかりにくいと思うので実際の表示例で示します。下の図をご参照ください。
なお、見出しテキストには左右に10px、上下には0pxの余白がstyle.cssで設定されているので、見出しの左位置を0pxに設定しても、必ず見出しテキストの左側には10pxの余白が入ります。
リスト領域
この項ではスクロール高さ（40〜2,000px）、行間の余白（0〜30px）、行間罫線の有無、罫線の色（#000000〜#FFFFFF）を設定できます。リスト1の場合、それぞれのデフォルトは「200」「8」「有り」「#CCCCCC」となっています。
ここで「スクロール高さ」と「行間の余白」がどこにあたるのかを実際の表示で示します。下の図をご参照ください。
なお、表示されるRSSリストの数が少なく、スクロール高さで設定した高さまで達しない時は、RSSリストの数の応じてリスト表示領域が短くなります。この時、スクロールバーは表示されません。
また、リスト表示されるRSSのテキストには上下に4pxの余白がstyle.cssで設定されているので、仮に行間の余白を0pxに設定しても上下のテキストがくっついてしまうことはありません。
リストのテキストと背景
この項ではリスト表示されるRSSフィードの背景色（#000000〜#FFFFFF）、ホバー時（マウスを乗せた時）背景書（#000000〜#FFFFFF）、テキストのフォントサイズ（2〜40px）、リンク文字色（#000000〜#FFFFFF）、ホバー時リンク色（#000000〜#FFFFFF）を設定できます。リスト1の場合、それぞれのデフォルトは「#FFFFFF」「#EEF6FF」「14」「#333333」「#000000」となっています。
実際に設定した時の表示例を下に示します。わかりやすいように、リンク文字色を「#0000FF」（青）、ホバー時リンク色を「#FF0000」（赤）に設定しました。背景色とホバー時背景色はデフォルトのまま「#FFFFFF」（白）と「#EEF6FF」（薄い水色）です。
こう設定するとRSSリストのテキストが「#0000FF」（青）で表示され（下図の上）、このリストの行にマウスを乗せると背景が「#EEF6FF」（薄い水色）、テキストが「#FF0000」（赤）に変わります（下図の下）。
ブログのテーマで設定しているテキストリンクの設定にあわせることでブログ記事の一部のように溶け込ませることもできますし、上の例のように敢えて表示色を変えることで、記事本文とは別の存在であると際立たせた見せ方をすることもできます。
囲み線
この項では囲み線の色（#000000〜#FFFFFF）、囲み線の太さ（0〜10px）、囲み線の角の丸み（0〜10px）、囲み線の外側余白（上下左右それぞれ0〜100px）を設定できます。リスト1の場合、それぞれのデフォルトは「#999999」「4」「5」「0、0、50、0」となっています。
囲み線の色をブログの背景色と同じにするか、あるいは囲み線の太さを0pxにすると囲みの無いRSSリスト表示になります。
また囲み線の角の丸みを0pxにすると直角になり、1〜10まで数値を大きくするほどに四隅の角が丸みを帯びていきます。
囲み線の色、太さ、角の丸み具合などを調整してブログのデザインに似せることで、RSSフィード表示をブログの中に溶け込ませることができます。
囲み線の外側の余白は前後左右に配置する他のブログ要素との間隔調整にお使いいただけます。
全ての設定値を入力し終えたら、必ず最後に一番下にある「変更を保存」ボタンを押して設定を保存するのを忘れないでください。
コメント