アメブロカスタマイズのわざめーばです。

こんばんは。

通常、アメブロでは、どんなに頑張ってカスタマイズしても、アメンバー限定記事にはカスタマイズ結果が反映されないのはご存知ですよね。

でも、アメンバー限定記事をカスタマイズできる方法がないわけではありません。

今回から、その『アメンバー限定記事をカスタマイズする方法』をご紹介する予定です。

今回は、その1回目。

まずは、とにかくカスタマイズできるということを見ていただきます。

手法：

　記事にカスタマイズ用のタグを記述
　CSSの編集
　　（フリースペースやフリープラグインなどは使えません）

難易度：

　★★★★☆（4.やや難しい）

カスタマイズの効果：

次の画像をご覧下さい。

カスタマイズ前

カスタマイズ後

これは、以前、こちらの記事のためにサンプルとしてカスタマイズしたブログです。

通常は、頑張ってカスタマイズしても、アメンバー限定記事は『カスタマイズ前』のようにヘッダー画像もなく、白黒の、全くカスタマイズされない状態で表示されます。

これを、『カスタマイズ後』のように、通常記事と同じとまではいかなくても、似たイメージになるようにカスタマイズしてみました。

実際に見ていただけばいいのですが、サンプル用のブログにアメンバー登録していただくのも気の毒ですので、本ブログに、同様のカスタマイズをしたサンプル記事をアップしましたので、アメンバーの方はよろしければご覧下さい。

具体的な方法と解説：

アメンバー限定記事投稿時に、記事の中に次のようなタグを記述して、CSSファイルをページに読み込みます。

<style>@import url(CSSファイルのURL);</style>

場所は、記事内のどこでもかまいませんが、一番最初か一番最後でいいと思います。

CSSファイルは、別途用意してもいいのですが、通常記事等のカスタマイズ用CSS(ユーザーCSS)と共用することも可能で、基本的なカスタマイズ内容を共有できるのでお勧めです。

サンプル記事では、このユーザーCSSを読み込んでいます。

アメンバー限定記事専用のカスタマイズをしていなくても、それなりに変化は見られますので一度試して見られるといいと思いますが、やはり専用のカスタマイズをしなければ、恐らく満足のいくレベルにはならないと思います。

ご自分のユーザーCSSのURLはわからない方もいらっしゃると思いますが、こちらで見ることもできますし、お問合せいただければお教えします。

ただし、【カスタム可能】なデザインを選択していない方、選択していても全くCSSでカスタマイズしていない方は、ユーザーCSSがありませんのでご注意下さい。

なお、次回以降のアメンバー限定記事カスタマイズの記事では、このユーザーCSSを記事内に読み込むことを前提として書かせていただきますのでよろしくお願いします。

効果確認ブラウザ：

　IE7、IE8、Firefox 3.6、Chrome 9、Safari 5、Opera 11（何れもWindows版）で確認しています。

その他：

次回以降は、ヘッダー画像の入れ方や記事やコメント欄をカスタマイズするためのCSSセレクターなどについて説明したいと思います。