記事一覧にアメンバー記事一覧も加えちゃう | 新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ

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

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

今度は記事一覧の中にもアメンバー限定記事一覧を加えちゃいます・・

(残念ながらアメ限記事一覧のページ自体は他と同じようにすることはできません)


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

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



フリープラグイン
におまじないが入っているか確認します
新デザインでは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>


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



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

<script type="text/javascript">
$(function(){
var ametab = "<span class='tab skinBlock'><a href='http://ameblo.jp/あなたのID/amemberentrylist.html'>アメンバー限定記事一覧</a></span>";
$('.tabArea .tab:first').after(ametab);
});
</script>





CSSは2カラムと3カラムで違ってきます

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

.tab {
min-width:150px;
max-width:150px;
}





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

.tab {
min-width:220px;
max-width:220px;
}