メインカラムの上下にオリジナル画像の読者登録ボタンを設置する方法

アメブロカスタマイズで自分らしい空間を作る技 メインカラムの上下にオリジナル画像の読者登録ボタンを設置する方法

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

こんにちは。

今回ご紹介するのは、アメブロの新CSSカスタマイズ用デザイン『CSS編集用デザイン』を適用したブログの、『メインカラムの上下にオリジナル画像の読者登録ボタンを設置する方法』です。

以前ご紹介した、メインカラムの上下に読者登録ボタンを設置する方法というカスタマイズ方法でアメブロのメインカラムに設置した読者登録ボタンを、CSSの編集により、オリジナルの画像ボタンに変更する方法となります。

メインカラムへの読者登録ボタンの設置がまだの場合は無意味ですので、まずはメインカラムの上下に読者登録ボタンを設置する方法で読者登録ボタンを設置して下さい。

画像を用意する

設置した読者登録ボタンをオリジナル画像にするために、まずは、ボタンにする画像を用意する必要があります。

今回は、以下のような画像を使うことにしました。

読者登録ボタン

普段は、画像の上半分がボタンとして表示され、オンマウス時(マウスカーソルがボタンの上に乗った時)には下半分が表示されるようにします。

CSSを編集する

CSSの編集で、以下のコードをユーザーCSSの末尾に貼り付けます。

.skinMainArea .readerBtn{
  text-indent:-9999px;
  width:250px;
  height:50px;
  background-image:url(https://stat.ameba.jp/user_images/20110824/22/sozai-land/e3/4d/p/o0250010011439433799.png);
}
.skinMainArea .readerBtn:hover{
  background-position:left bottom;
}

赤文字部分は、ボタンとして表示したい画像のURLですので、別の画像をご利用の場合は、利用したい画像のURLを設定してください。

紫文字緑文字部分には、ボタンの横幅高さを指定してください。

また、グレーの部分は、オンマウス時に画像下半分の表示に切り替えるためのコードです。

オンマウス時の切り替えが必要ない場合は、削除してもかまいません。

なお、オンマウス時に、今回のように同じ画像の別の部分を表示するのではなく、別の画像を表示する方法もあります。

その場合は、グレーの部分を以下のように書き換えてください。

.skinMainArea .readerBtn:hover{
  background-image:url(オンマウス時に表示したい画像のURL);
}

『メインカラムの上下にオリジナル画像の読者登録ボタンを設置する方法』の説明は以上となります。

最後に、今回利用した画像を作成した際、ついでだったので色違いをいくつか作成しましたので掲載させて頂きます。

けっして凝った画像ではありませんが、もしご入り用でしたらお使い下さい。

アメブロ内でしたらそのまま使ってもOKだと思いますが、削除等を心配される場合は、ご自分のアメブロの画像フォルダにアップロードしてからお使い下さい。

読者登録ボタン
https://stat.ameba.jp/user_images/20110824/22/sozai-land/e3/4d/p/o0250010011439433799.png

読者登録ボタン
https://stat.ameba.jp/user_images/20110824/22/sozai-land/05/31/p/o0250010011439437504.png

読者登録ボタン
https://stat.ameba.jp/user_images/20110824/22/sozai-land/79/3c/p/o0250010011439437483.png

読者登録ボタン
https://stat.ameba.jp/user_images/20110824/22/sozai-land/94/af/p/o0250010011439437482.png

読者登録ボタン
https://stat.ameba.jp/user_images/20110824/22/sozai-land/74/15/p/o0250010011439436982.png

読者登録ボタン
https://stat.ameba.jp/user_images/20110824/22/sozai-land/d2/08/p/o0250010011439436981.png

読者登録ボタン
https://stat.ameba.jp/user_images/20110824/22/sozai-land/6c/2c/p/o0250010011439436980.png

読者登録ボタン
https://stat.ameba.jp/user_images/20110824/22/sozai-land/61/b3/p/o0250010011439436342.png

読者登録ボタン
https://stat.ameba.jp/user_images/20110824/22/sozai-land/b9/92/p/o0250010011439436337.png

読者登録ボタン
https://stat.ameba.jp/user_images/20110824/22/sozai-land/bb/90/p/o0250010011439436336.png

読者登録ボタン
https://stat.ameba.jp/user_images/20110824/22/sozai-land/34/90/p/o0250010011439436335.png

読者登録ボタン
https://stat.ameba.jp/user_images/20110824/22/sozai-land/22/5e/p/o0250010011439436334.png

読者登録ボタン
https://stat.ameba.jp/user_images/20110824/22/sozai-land/39/de/p/o0250010011439435402.png

読者登録ボタン
https://stat.ameba.jp/user_images/20110824/22/sozai-land/d6/38/p/o0250010011439435399.png

読者登録ボタン
https://stat.ameba.jp/user_images/20110824/22/sozai-land/2b/37/p/o0250010011439435398.png

読者登録ボタン
https://stat.ameba.jp/user_images/20110824/22/sozai-land/cc/bc/p/o0250010011439435397.png

読者登録ボタン
https://stat.ameba.jp/user_images/20110824/22/sozai-land/b2/c8/p/o0250010011439435396.png

読者登録ボタン
https://stat.ameba.jp/user_images/20110824/22/sozai-land/39/3b/p/o0250010011439433767.png

読者登録ボタン
https://stat.ameba.jp/user_images/20110824/22/sozai-land/a2/f2/p/o0250010011439433761.png

読者登録ボタン
https://stat.ameba.jp/user_images/20110824/22/sozai-land/6a/d2/p/o0250010011439433753.png

読者登録ボタン
https://stat.ameba.jp/user_images/20110824/22/sozai-land/fb/16/p/o0250010011439433752.png

アメブロカスタマイズで自分らしい空間を作る技