アメンバー記事にヘッダー画像を表示する

こんにちは。
『やさしいブログの作り方』の松田です。

アメブロには限られた方にのみ公開できるアメンバー記事というのがあります。

通常はプライベートな内容などを親しい知人等にのみ公開したい場合などに使うのですが、お店ブログをされている方であれば、アメンバー限定でお得な情報を書いたりすることで、より繋がりを強くできるといった使い方ができます。

ただ、このアメンバー記事はサイドバーはプロフィールパーツのみ、ヘッダー部分もブログのタイトルが表示されるだけというシンプルというか寂しい作りになっています。

しかもCSSの設定は読み込まれないので、カスタマイズができるデザインを使っておられる方も、このシンプルなさびしいアメンバー記事を使うしかありません。


しかし私のアメンバー記事を読んでいただいた方ならわかると思いますが、アメンバー記事であってもちょっとしたカスタマイズなら可能です。

今日はその中で、アメンバー限定記事にヘッダー画像を表示する方法をご紹介します。


$やさしいブログの作り方

アメンバー記事をカスタマイズする場合、カスタマイズに必要な記述（CSS）は記事エリアに書きます。

ヘッダー画像を表示するCSSは以下の通りです。

<style type="text/css">#overHeader{width:980px;height:360px; background:url(http://stat.blogskin.ameba.jp/blogskin_images/20120224/10/04/27/p/o08800250amecafe20111330045806966.png);}#userNaviArea{display:none;}#overHeader h2 a{text-indent:-9999px;display:block;width:980px;height:360px;}</style>

※　上記赤の部分にはご自身のヘッダー画像の横幅（width）と高さ（height）を入れてください。
※　緑の部分にはご自身のヘッダー画像のURLアドレスを入れてください。
※　ヘッダー画像を表示させる他にヘッダー画像をクリックするとトップページへ戻るリンクも付けています。

上記の記述を記事編集画面の最初に書けばOKです。

なお、インターネットエクスプローラまたはFirefoxを利用されている方は、入力モードをタグ編集エディタ（入力スペース下の「HTMLタグを表示」をクリック）にして貼りつけてください。

ヘッダー画像が表示されるだけでも随分アメンバー記事がましになりますよ。＾＾