スポンサーサイト

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

ACR WEBさんのアクセスランキングのCSSを指定してみた

お気付きの方も多いと思いますが右側にACR WEBさんのアクセスランキングを設置してみました。今回のパーツは背景や文字の色やサイズなどは変更できるのですが設置してみるとどうもしっくりこない。これに限ったことじゃないけどブログパーツが自分のサイトやブログにうまく溶け込まないことってありますよね。
なぜかと考えたところpaddingなどがブログのほかのところと違うからです。CSSで指定してあげればいいのですがソースは以下のようにJavaScriptを貼るだけになっているのでどうしたらスタイルを指定できるのでしょうか。
<SCRIPT TYPE="text/javascript" SRC="http://pranking2.ziyu.net/js/???????.js" charset=shift_jis></SCRIPT>
で、考えたのが次の方法です。まず、JavaScriptの周りをdivで囲ってあげます。
<div id="side">
<SCRIPT TYPE="text/javascript" SRC="http://pranking2.ziyu.net/js/???????.js" charset=shift_jis></SCRIPT>
</div>
そして、パーツが実際表示されたときにどのような仕組みになっているか調べます。今回の場合は直接http://pranking2.ziyu.net/js/???????.jsにアクセスしてみます。するとtableでできていることが分かると思います。ですので
#side td {
   padding:5px 3px 3px 3px;
   line-height:130%;
}
とCSSを記述するとブログランキングのtdのスタイルを指定できます。

これに限らず他のJavaScriptでできたブログパーツでもこの方法でスタイルを変更できると思いますのでぜひお試しください。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
ありがとうございます役に立ちました♪
【2012/08/10 10:37】 | まーさ #- | [edit]
まーさ さん

お役に立ててうれしいです。
またお立ち寄りくださいね~
【2012/08/11 18:17】 | 管理人 #E2ywrYdA | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。