今日のカスタマイズはサイドバーの「メッセージを送る」「アメンバーになる」「プレゼントを贈る」のテキストリンクを画像化するという、基本カスタマイズをしてみました。
もともとはこのようになっています。
では早速いってみましょう～。
①まずは画像を作成！
こんな感じでシンプルに作ってみました～。
このボタンもしよろしければ無料で配布しますのでコメントくださいね★
※直リンクはＮＧです～m(_ _)m
②CSSのカスタム［画像置換］次にCSSのカスタムです。リンクがはられているテキストを画像に置換します。
画像置換用のCSSをCSS編集フォームの最後に追加！
------------------------------------------------
#amemberProfArea li.menuMsg a {
display: block;
width:184px;//デモサイズです。ボタンの大きさに合わせて変更してください。
height:24px;//デモサイズです。ボタンの大きさに合わせて変更してください。。
background: url(http:/あなたの画像ファイル) no-repeat;
text-indent:-9999px;
}
#amemberProfArea li.menuAmember a {
display: block;
width:184px;//デモサイズです。ボタンの大きさに合わせて変更してください。
height:24px;//デモサイズです。ボタンの大きさに合わせて変更してください。
background: url(http://あなたの画像ファイル) no-repeat;
text-indent:-9999px;
}
#amemberProfArea li.menuPresent a {
display: block;
width:184px;//デモサイズです。ボタンの大きさに合わせて変更してください。
height:24px;//デモサイズです。ボタンの大きさに合わせて変更してください。
background: url(http://あなたの画像ファイル) no-repeat;
text-indent:-9999px;
}
------------------------------------------------③CSSのカスタムその二［元々あったアイコン飛ばし＆マージン調整］元々あったアイコン（背景に指定されています）を飛ばします。
間がつまりすぎているのでマージンを調整します。
元々あったアイコンを飛ばすためのCSS
------------------------------------------------
#sub_a #profile #amemberProfArea li {
padding:0px !important;
margin:0px 0px 3px 0px !important;
}
------------------------------------------------いかがでしょう～？これにて画像ボタンへと変更完了です★
次の機会にでも別のタイプのデザインボタンを作成してみたいと思います＾ー＾
是非皆さん参考にしてみてくださいね！
画像ボタンはコメントいただければ配布させていただきます。
★★スイの本日の必ず得するネタ！★★
5分ほどの登録掲載作業で500円！！損すること一切なし
こちらのMicroADに簡単登録後、自分のブログに広告を貼るだけで500円GETできます。★★スイの本日の必ず得するネタ！★★
