プロフィール欄の各ボタンをカスタマイズする方法

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

こんにちは。

今回は、CSS編集用デザインを適用したアメブロのサイドバーにあるプロフィール欄の各ボタンをカスタマイズする方法です。

ボタンは4つありますが、これらは初期状態ではグレーのボタン風画像を使って表現されています。

今回は、この画像を別の画像に変更することで、ご自分のアメブロの雰囲気に合わせたボタンに変更するカスタマイズ方法をご紹介したいと思います。

それでは、以下、やり方です。

一括でカスタマイズする方法

まず、4つのボタンを一括で変更する方法から。

ユーザーCSSの末尾に、次のような設定を追加して下さい。

.profileBtnArea .skinImgBtnS {
  background-image:url(ボタン用画像のURL);
}

ボタン用画像のURLには、ボタンとして表示したい、横幅128ピクセル・高さ28ピクセルの画像を用意し、その画像のURLを記述します。

この記事で後記する画像や、こちらの記事でご紹介した画像も利用できますので、使えそうなものがあったら持って行って下さいね。

また、ボタン上にマウスカーソルが乗ったときに、画像を別のものに切り替えたい(ロールオーバーさせたい)場合は、更に次のような設定を追加して下さい。

.profileBtnArea .skinImgBtnS:hover {
  background-image:url(ボタン用画像のURL(オンマウス時));
}

ボタン用画像のURL(オンマウス時)は、マウスカーソルが乗ったときにボタンとして表示する画像のURLです。

別々にカスタマイズする方法

次に、4つのボタンをそれぞれ別々に変更したい場合です。

ユーザーCSSの末尾に、次のような設定を追加して下さい。

.profileBtnArea .readerBtn {
  background-image:url(『読者になる』ボタン用画像のURL);
}
.profileBtnArea .amemberBtn {
  background-image:url(『アメンバーになる』ボタン用画像のURL);
}
.profileBtnArea .messageBtn {
  background-image:url(『メッセージを送る』ボタン用画像のURL);
}
.profileBtnArea .presentBtn {
  background-image:url(『プレゼントを贈る』ボタン用画像のURL);
}

どの設定が、どのボタンに該当するものかはわかっていただけると思いますので、細かい説明は省かせていただきますね。

もちろん、必要なもののみ追加すれば大丈夫ですので、既に非表示にしてあるボタンや、変更する必要のない場合ボタンに関する設定は省略して下さい。

また、一括で設定した場合同様、ボタン上にマウスカーソルが乗ったときに、画像を別のものに切り替える(ロールオーバーさせる)こともできます。

その場合は、次のような設定も追加して下さい。

.profileBtnArea .readerBtn:hover {
  background-image:url(『読者になる』ボタン用画像のURL(オンマウス時));
}
.profileBtnArea .amemberBtn:hover {
  background-image:url(『アメンバーになる』ボタン用画像のURL(オンマウス時));
}
.profileBtnArea .messageBtn:hover {
  background-image:url(『メッセージを送る』ボタン用画像のURL(オンマウス時));
}
.profileBtnArea .presentBtn:hover {
  background-image:url(『プレゼントを贈る』ボタン用画像のURL(オンマウス時));
}

こちらも、やはり、必要なもののみ追加すれば大丈夫です。

文字やアイコンを消す方法

なお、文字入りの画像を使う場合など、元々表示されている文字やアイコンを非表示にしたい場合は、ユーザーCSSの末尾に、次のような設定を追加すればOKです。

.profileBtnArea .skinImgBtnS span{
  visibility:hidden;
}

ちなみに、一括で全てのボタンの文字やアイコンが非表示になります。

画像素材

最後に、少しですが、本カスタマイズで利用できる画像素材を配布します。

アメブロ内からでしたらそのまま使っていただいても大丈夫だと思いますが、削除の心配などもありますので、安全のためにはご自分のアメブロの画像フォルダにアップロードされるのがいいと思います。


https://stat.ameba.jp/user_images/20120626/09/wazameba/49/03/p/o0128002812047878735.png


https://stat.ameba.jp/user_images/20120626/09/wazameba/0d/f4/p/o0128002812047878737.png


https://stat.ameba.jp/user_images/20120626/09/wazameba/c5/67/p/o0128002812047878738.png


https://stat.ameba.jp/user_images/20120626/09/wazameba/5c/04/p/o0128002812047878734.png


https://stat.ameba.jp/user_images/20120626/09/wazameba/4c/f4/p/o0128002812047878736.png


https://stat.ameba.jp/user_images/20120626/09/wazameba/93/77/p/o0128002812047879808.png


https://stat001.ameba.jp/user_images/20120626/09/wazameba/e0/c4/p/o0128002812047879809.png


https://stat001.ameba.jp/user_images/20120626/09/wazameba/5b/56/p/o0128002812047879810.png


https://stat001.ameba.jp/user_images/20120626/09/wazameba/2c/76/p/o0128002812047879811.png


https://stat001.ameba.jp/user_images/20120626/09/wazameba/bf/2c/p/o0128002812047879812.png

以上、アメブロのサイドバーのプロフィール欄の各ボタンをカスタマイズする方法をご紹介しました。

よかったら参考になさって下さいね。

関連記事

アメブロカスタマイズ用デザイン『CSS編集用デザイン』
CSSの編集によるカスタマイズ
アメブロの画像アップロード方法と画像のURL取得方法

アメブロカスタマイズで人が集まるブログ作り