アメンバー限定記事を読むボタンをオリジナル画像にする方法

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

こんにちは。

今回は『アメンバー限定記事を読むボタンをオリジナル画像にする方法』です。

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

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

まず確認

このカスタマイズは、CSSの編集で行いますので、もし、やり方がわからない場合はCSSの編集方法を確認しておいて下さい。

CSSを編集

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

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

このコードは、新旧両デザイン対応です。

お使いのデザインが新デザイン『CSS編集デザイン』でも、『【カスタム可能】ベーシック』等の旧デザインでも使用出来ます。

コードの緑文字部分と紫文字部分の数値には、それぞれアメンバー限定記事を読むボタンとして表示する画像の横幅高さをピクセル数で指定します。

また、赤文字部分には、アメンバー限定記事を読むボタンとして表示する画像のURLを指定してください。

もし、画像のURLについてよくわからない場合は、画像アップロード方法とアップロードした画像のURLを取得する方法を参考にして下さい。

ロールオーバー

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

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

このコードも、新旧両デザイン対応です。

橙文字部分には、オンマウス時にアメンバー限定記事を読むボタンとして表示する画像のURLを指定してください。

不要なリンクを削除

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

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

このコードも、新旧両デザイン対応です。

もし、どちらか片方を消したい場合は、グレーで書いてある注釈を参考に、必要な設定のみ追加して下さい。

以上、『アメンバー限定記事を読むボタンをオリジナル画像にする方法』と、おまけの『アメンバー限定記事を読むには』や『アメンバーになる』を消す方法の説明でした。

アメンバー限定記事を書かれる方。

よかったらやってみてくださいね。

関連記事

CSSの編集
画像アップロード方法とアップロードした画像のURLを取得する方法

この記事は、2010/12/03の記事を2011/09/24に新旧統合記事として全面書きかえしました。

アメブロカスタマイズで自分らしい魅力的なアメブロを作る技