こちらのニュースヘッダーは、カナダローカルニュースの最新記事ヘッドラインとニュースサイトへのリンクが表示されます。
表示させるには、ブラウザーのJava ScriptをONにする必要があります。
CSS、HTMLタグの知識がある方にお勧めです。
テキストエリアをクリックするとタグ全体が選択されます。
右クリックで、コピーして貼り付けてください。
通常、このままペーストしますとウェブサイト、ブログには装飾されない最新記事タイトルが並んでいるだけとなります。
CSSを利用して、各自で色、大きさをカスタマイズできます。
下記のコードを、CSSファイルもしくはスタイルシートに貼り付けますと、上記のように装飾されて表示されます。
.feedTitle {/*ニュースサイトのタイトル*/
font-size: 14px;
margin: 0px;
padding: 0px 1px;
}
#canadanews4804 ul{/*記事リスト全体を囲う要素*/
margin: 3px 0px 0;
padding-left: 0px;
font-size: 12px;
list-style-type: none;
}
#canadanews4804 li{/*個別の記事リストを囲う要素*/
margin: 0px 0px 0;
padding-left: 12px;
background: url(http://image.blog.livedoor.jp/admin/listbutton01.gif) no-repeat;
padding-bottom: 0px;
padding-top: 0px
}
.headline {/*個別の記事タイトルを囲う要素*/
}
.headline a:link,
.headline a:visited,
.headline a:active {
text-decoration: none;
border-bottom: 1px solid #ededed;
}
.headline a:hover {
text-decoration: none;
color: #e0861e;
border-bottom: 1px dotted #e0861e;
}
#canadanews4804 p.date {/*日付*/
font-size: 80%;
font-weight: normal;
color: #F60;
margin: 0 3px 3px;
text-align:right;
padding-bottom: 0px;
padding-top: 0px;
}
#creditfooter {/*パーツフッターを囲う要素*/
padding-left: 5px;
font-size: 10px;
text-align:right;
}
上記のCSSを<style>~</style>で囲って、ヘッドラインウェブパーツのHTMLコードのすぐ下に挿入しても上記のように装飾されます。
ぜひ、CSSの知識のありましたら、これらを利用してあなたのブログ、サイトに合わせて表示させてみてください。
このパーツはFeedBurner様のバズブーストサービスを利用しています。
このようにRSSを読み取り、見出しなどを、Java Scriptを利用してウェブサイト、ブログなどに表示させるサービスがほかにもあります。
・RSSリスティング
・RSS:Feed The Search
・moondakota: RSS FeedをJavascriptでウェブページに表示
それぞれのサービスも、すこしHTML、CSSの知識が必要とします。
あなたのサイト、ブログにあわせてお使いください。
今後さらなる利便性よい方法があれば、改善、変更を図っていきます。