ノウハウ

大層なサムネですが、
RSSチェッカー「あやぽんRSS!」の発行されているHTMLソースを確認し、
CSSを使いデザインを変更するやり方です。
あやぽんRSS!とは[ 別ウィンドウで表示 ]
あやぽんRSS!に限らず、javascript(ジャバスクリプト)で書かれたブログパーツは、
ソースの表示をしても

javascriptコードしか表示されません。


これではHTMLの確認が出来ず、CSSによるデザインの指定ができません。
これはjavascriptがHTMLを動的に発行、書き出しを行なっているためです。
あやぽんRSS!で言えば、動的な部分は日付であったり記事タイトルになります。
そこで、動的な部分ではない、発行されているHTMLソースを確認します。下記のjavascriptコードをブラウザのアドレスバーに貼り付け実行してください。
javascript:var%20w=window.open('');if(w){var%20d=w.document;d.write('%3Cxmp%3E'+document.documentElement.innerHTML+'%3C/xmp%3E');d.close();}
(引用元がどこのサイトか忘れてしまったので、ここに表示します。引用元様パクってごめんなさい。)
ページのソースが表示されたと思います。

都度、上記のコードをコピペして実行しても良いのですが、
面動なのでお気に入りに追加しておきます。
このリンクにマウスカーソルを当て、右クリック→お気に入りに追加→適当な名前を付け登録します。
この例では「ソース表示」という名前にします。
(これは、そのページをブックマークするという事ではなく、
上記のjavascriptコードを保存すると考えてください。)

HTMLソースを確認したいページを表示し、
上記でブックマークしたページ「ソース表示」にそのままアクセスしてください。


javascriptで書かれた部分が、divタグなどで囲まれたHTMLソースの表示になります。


あやぽんRSS!のHTMLソース例


<DIV style="CLEAR: both; POSITION: relative"></DIV><IMG alt="" src="http://img.link-trade.net/user/021349/x/13400.gif?1283372601" align=absMiddle> <A title="サイト名や記事タイトルなど" href="記事のURL" target=_blank>記事タイトルなど</A>
こんな感じのが表示件数分出てきます。
あやぽんRSS!の貼り付けコード
<!-- AYAPON RSS START site_id=

• * -->

<!-- AYAPON RSS END -->
を
<div id="plugin_ayapon">
</div>
こんなので囲みCSS指定をしています。
私は行間をあけるため、
<style TYPE="text/css">
<!--
div#plugin_ayapon img{
margin-bottom:2px;
}
-->
</style>
こんな指定をしました。
行間がちょこっとだけあいていると思います。

これで、動的な表示をしているブログパーツjavascriptは
あやぽんRSS!に限らずHTMLソースの確認ができ、CSSによるデザインの設定が出来るはずです。

http://geinou77777.blog28.fc2.com/blog-entry-477.html