こんにちは。
アメーバオウンドマイスター
加藤敦志です。
アメーバオウンドボタンカスタマイズ
先ずは先行で
「CDG：アメブロ連携対応」テーマ用
ボタンカスタマイズ用CSSを作ってみました。
カラーは４色
手始めに４色用意してみました。
グリーン、イエロー、オレンジ、ピンクの４色です。
カスタマイズ方法
操作は４手順でOK
１．ダッシュボード＞カスタマイズ＞CSSカスタマイズへアクセス
CSSコードをコピー
CSSはご利用のデザインテンプレートによって異なります。
デザインテンプレートごと、グループテーマAとグループテーマB ２種類あります。
ご利用のCSSを４色ある中からコピーしてお使い下さい
＜＜グループテーマA＞＞
MAGGIE, VANILLA, JUSTIN, TYPTM, PJ BILL, NATALIE, MALIA, BELLE, SUGAR, JEPHOTO
【オレンジ 】
.u-btn-bdr-clr { border-color: #ff9900; color: #fff; border-radius:5px; background: #ff9900; /* Old browsers */ background: -moz-linear-gradient(top, #ffa035 0%, #ff9900 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #ffa035 0%,#ff9900 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #ffa035 0%,#ff9900 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ }
【ピンク 】
.u-btn-bdr-clr { border-color: #ffb2b2; color: #fff; border-radius:5px; background: #ffb2b2; /* Old browsers */ background: -moz-linear-gradient(top, #ffcccc 0%, #ffb2b2 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #ffcccc 0%,#ffb2b2 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #ffcccc 0%,#ffb2b2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ }
【イエロー】
.u-btn-bdr-clr { border-color: #f6cc33; color: #fff; border-radius:5px; background: #f6cc33; /* Old browsers */ background: -moz-linear-gradient(top, #f4da7c 0%, #f6cc33 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #f4da7c 0%,#f6cc33 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #f4da7c 0%,#f6cc33 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ }
【グリーン】
.u-btn-bdr-clr { border-color: #98d64d; color: #fff; border-radius:5px; background:#98d64d; /* Old browsers */ background: -moz-linear-gradient(top, #b5d78d 0%, #98d64d 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #b5d78d 0%,#98d64d 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #b5d78d 0%,#98d64d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ }
＜＜グループテーマB＞＞
CDG, SPUNE, CELL, WINKEL, NOBLESSE, NEMI, HINATA
【オレンジ】
.u-btn-bg-clr { border-color: #ff9900; color: #fff; border-radius:5px; background: #ff9900; /* Old browsers */ background: -moz-linear-gradient(top, #ffa035 0%, #ff9900 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #ffa035 0%,#ff9900 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #ffa035 0%,#ff9900 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ }
【ピンク】 .u-btn-bg-clr { border-color: #ffb2b2; color: #fff; border-radius:5px; background: #ffb2b2; /* Old browsers */ background: -moz-linear-gradient(top, #ffcccc 0%, #ffb2b2 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #ffcccc 0%,#ffb2b2 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #ffcccc 0%,#ffb2b2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ }
【イエロー】
.u-btn-bg-clr { border-color: #f6cc33; color: #fff; border-radius:5px; background: #f6cc33; /* Old browsers */ background: -moz-linear-gradient(top, #f4da7c 0%, #f6cc33 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #f4da7c 0%,#f6cc33 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #f4da7c 0%,#f6cc33 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ }
【グリーン】
.u-btn-bg-clr { border-color: #98d64d; color: #fff; border-radius:5px; background:#98d64d; /* Old browsers */ background: -moz-linear-gradient(top, #b5d78d 0%, #98d64d 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #b5d78d 0%,#98d64d 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #b5d78d 0%,#98d64d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ }
CSSを貼り付け
カスタマイズしたい色のCSSを貼り付け（ペースト）します。
貼り付ける場所は「全体」と書かれたところに！！！
最後に保存
最後貼り付けたCSSを最新の情報にするために
「保存」します。
これで完了です！！
今後カラーを少しずつ増やしていきます。
こんな色のボタンが欲しい！！
リクエストにもお答えいたします。
是非リクエストお待ちしております。
リクエストはコメントにお願いします！
ではまた
加藤でした！！
0コメント