CSS改造 素材屋さん

CSS改造 素材屋さん

ブログの説明を入力します。

Amebaでブログを始めよう!


CSS改造 素材屋さん
アメンバー限定記事を投稿すると、トップページなどにアメンバー限定記事を読むための画像ボタンが表示されますが、このカスタマイズ方法で、そのボタンをオリジナル画像に変更することができます。

おまけで、アメンバー限定記事を読むボタンの下に表示される『アメンバー限定記事を読むには』や『アメンバーになる』というリンクの消し方もご紹介します。

以下のようなコードをユーザーCSSの最後に追加します。


/* アメンバー限定記事を読むボタンをオリジナル画像にする */
.amemberEntryBtn img{ /* 元の画像を消す */
display:none;
}
.amemberEntryBtn a{ /* 通常時 */
display:block;
margin:0 auto;
width:320px;
height:240px;
background-image:url(画像のURL);
}


アメンバー限定記事を読むボタンを、オンマウス時(マウスカーソルが画像ボタンの上に乗った時)に、別の画像に切り替わるようにしたい場合は、更に、以下のようなコードをユーザーCSSの最後に追加します。

.amemberEntryBtn a:hover{ /* オンマウス時 */
background-image:url(画像のURL);
}

もし、アメンバー限定記事を読むボタンの下にあるリンク『アメンバー限定記事を読むには』や『アメンバーになる』が不要な場合は、以下のコードをユーザーCSSの最後に追加することで消す(非表示にする)ことができます。

.amemberEntryTxt{ /* 「アメンバー限定記事を読むには」 */
display:none;
}
.amemberEntryReq{ /* 「アメンバーになる」 */
display:none !important;
}