新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ -27ページ目

新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ

アメブロの新スキン(CSS編集用デザイン)のカスタマイズ
アメーバブログをCSSでカスタマイズして自分だけのオリジナルなデザインでアメブロを楽しんでください

このブログの左サイドについているランキング・・・



新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ

ダウンの↓はうんこに?

アップの↑はクラッカーに変わっています・・
ステイの→はパーに・・


やり方です・・・

CSSの最後に・・・

/*ランキング↑↓*/
.rankUp{
width:16px;
text-indent:-9999px;
background-image:url(http://stat.ameba.jp/blog/ucs/img/char/char2/098.gif);/*↑の画像*/
background-repeat:no-repeat;
background-position:bottom;
}
.rankDown{
width:16px;
text-indent:-9999px;
background-image:url(http://stat.ameba.jp/blog/ucs/img/char/char2/200.gif);/*↓の画像*/
background-repeat:no-repeat;
background-position:bottom;
}
.rankStay{
width:16px;
text-indent:-9999px;
background-image:url(http://stat.ameba.jp/blog/ucs/img/char/char2/106.gif);/*→の画像*/
background-repeat:no-repeat;
background-position:bottom;
}




さらに 位 も等賞とかに変更する場合は・・


フリープラグインにおまじないが入っているか確認します
新デザインではjqueryが標準で読み込まれていませんので入れないと動作しません


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

または( ↑↓どちらか1つが入っていれば大丈夫です )

<script type="text/javascript" src="http://stat.ameba.jp/common_style/js/library/jquery/jquery-1.6.2.min.js"></script>


上のどちらかが入っているか確認して
なければどちらかをフリープラグインの一番最初にコピペします



入れたあるいは入っているのを確認したらフリープラグインに・・・

<script type="text/javascript">
$(function(){
$(".rankUnit").html("等賞");
});
</script>