FeedWind新バージョンを旧バージョン風のスタイルにする
FeedWindの旧バージョン（V1）をご利用の方の中には、新バージョンでも以前のデザインを使用したいケースもあるかもしれません。現在は旧バージョンのウィジェットの新規発行は停止しているのに加えて、新バージョンではデザインの大幅な改良を行っています。
そこで今回は、Pro版／Plus版で利用できるカスタムCSS機能を使って、新バージョンで旧バージョン風のスタイルを実現する方法をご紹介します。
FeedWind旧バージョンデザインを再現する
新バージョンで旧バージョンのデザインを実現するには、カスタムCSSを利用します。こちらはPro版／Plus版で利用可能なオプションです。カスタムCSSを利用すれば、サイトデザインに合わせたウィジェットのカスタマイズが可能です。
以下は、旧バージョン風デザイン用のカスタムCSSのサンプルです。お客様のCSSファイルにコピーして、ご自身のサーバにアップしてご利用ください。残念ながら、旧バージョンのデザインを完全に再現することは難しいですが、それに近い形にすることができます。
カスタムCSS機能は中上級者向けのお客様を対象としています。CSSの内容次第では、お客様のサイト全体のデザインに影響が出る可能性があるため、内容に関するサポートは対象外とさせていただいております。予めご了承ください。
FeedWindに新規ご利用のお客様には、Plus版14日間 無料トライアルがついてきます。CSSが正しく機能するかテストを希望される場合は、その期間中に動作確認をお願いします。
※よりご希望の形にデザインするために、色や余白などはご自身の環境に合わせて微調整してください。また、FeedWindの設定の内容によっては、さらにカスタマイズを要する箇所が発生します。カスタムCSSのガイドラインを参照の上、設定をお願いします。
/*Start CSS: FeedWind-v1-style */
body{margin:20px;padding:0;overflow-x:hidden;}
img{border:none;}
a{text-decoration: none;}
#fw-container{text-align:left;overflow:hidden;margin:0;padding:0;width:auto;font-family:Arial, Helvetica, sans-serif;font-size:12px;}
header{margin:0;padding:5px;color:#FFFFFF;background-color:#0066FF;background-image:none;}
header .fw-feed-title {margin:0;padding:0;font-weight:bold;border-bottom: none; word-wrap:break-word;}
header .fw-feed-title a:link{color:#FFFFFF;text-decoration:none;}
header .fw-feed-title a:hover{color:#FFFFFF;text-decoration:underline;}
header .fw-feed-title a:hover{color:#FFFFFF;text-decoration:underline;}
header .fw-feed-title a:visited{color:#FFFFFF;text-decoration:none;}
header .fw-feed-title a:active{color:#FFFFFF;text-decoration:none;}
#fw-feed-items{overflow:hidden;margin:0 0 0 0;padding:5px 0px 0px 0px;background-color:#FFFFFF;background-image:none;}
#fw-feed-items .fw-feed-item{margin:0 0 7px 0;padding:0 0 7px 0;border-bottom:1px dashed #CCCCCC;clear:both;}
#fw-feed-items .fw-feed-item-url{display: block;overflow: hidden;}
#fw-feed-items .fw-feed-item-content-module{margin:0 0 0 3px;padding:0;}
#fw-feed-items .fw-feed-item-title{margin:0;padding:0;color:#0066FF;font-weight:bold;}
#fw-feed-items .fw-feed-item-image{width:110px; height:100px; float:left; margin:5px 8px 5px 5px; overflow:hidden;}
#fw-feed-items .fw-feed-item-description{margin:0;padding:0;color:#666666;line-height:135%;word-wrap:break-word;clear:both;}
#fw-feed-items .fw-feed-item-date{margin:3px 0;padding:3px 0;color:#666666;overflow:hidden;text-overflow:ellipsis;clear:both;}
/* End CSS */