トップ > スポンサー広告 > あやぽんRSS!のデザインをCSSで変更したい ブログパーツjavascriptが発行するhtmlソース表示の確認の仕方トップ > RSSカスタマイズ > あやぽんRSS!のデザインをCSSで変更したい ブログパーツjavascriptが発行するhtmlソース表示の確認の仕方

人気サイト更新状況

画像は全てブログ上に表示。是非ソース元としてご紹介くださいませ。相互RSSもしてほちぃ!!
画RSS ローディング中・・・

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

あやぽんRSS!のデザインをCSSで変更したい ブログパーツjavascriptが発行するhtmlソース表示の確認の仕方



大層なサムネですが、
RSSチェッカー「あやぽんRSS!」の発行されているHTMLソースを確認し、
CSSを使いデザインを変更するやり方です。

あやぽんRSS!とは[ 別ウィンドウで表示 ]

あやぽんRSS!に限らず、javascript(ジャバスクリプト)で書かれたブログパーツは、
ソースの表示をしてもjavascriptコードしか表示されません。




これではHTMLの確認が出来ず、CSSによるデザインの指定ができません。

これはjavascriptがHTMLを動的に発行、書き出しを行なっているためです。
あやぽんRSS!で言えば、動的な部分は日付であったり記事タイトルになります。

そこで、動的な部分ではない、発行されているHTMLソースを確認します。
下記のjavascriptコードをブラウザのアドレスバーに貼り付け実行してください。


(引用元がどこのサイトか忘れてしまったので、ここに表示します。引用元様パクってごめんなさい。)

ページのソースが表示されたと思います。


都度、上記のコードをコピペして実行しても良いのですが、
面動なのでお気に入りに追加しておきます。

このリンクにマウスカーソルを当て、右クリック→お気に入りに追加→適当な名前を付け登録します。

この例では「ソース表示」という名前にします。
(これは、そのページをブックマークするという事ではなく、
上記の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によるデザインの設定が出来るはずです。
FC2ノウハウにも掲載されています


[広告] 関連性の高いお買い得商品
FC2ブログスーパーカスタマイズテクニック

FC2ブログスーパーカスタマイズテクニック

価格:2,184円(税込、送料別)

jQuery入門

jQuery入門

価格:3,129円(税込、送料別)


カテゴリ:RSSカスタマイズ

タグ: あやぽんRSS!, RSS, ブログパーツ, 素材, javascript, html, ソースの表示, CSS, スタイルシート,

付けたタグの関連記事

関連エントリ抽出中...

アクセスの多い記事 期間別はこちら→日間週間月間

ページランキングロード中・・・
ブログ内検索
最新記事
人気記事ランキング
ページランキングロード中・・・
カテゴリ
芸能人の愛用品紹介 イチオシ記事
おすすめリンク集
プロフィール

geinou77777

Author:geinou77777
TVでやってたアレ何だっけ?と、思い出したくても思い出せない事を、画像付きで紹介しています。

最新の芸能情報はありません。

かゆいところに手が届く、孫の手のようなブログを目指しています。


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。