アメーバオウンドカスタマイズ ボタン １８テーマ対応 ホームページを作ろうVol22

こんにちは。
アメーバオウンドマイスター
加藤敦志です。

アメーバオウンドボタンカスタマイズ

前回のブログで
ボタンカスタマイズ方法をまとめました。

「CDG：アメブロ連携対応」のみ適用可能なCSSについて
ご紹介しました。

１８テーマ対応

全１９テーマあるアメーバオウンドテーマ
内１テーマはカスタマイズ不可【LS】なので１８テーマ

この１８テーマに対応するようにCSSを作りました。

２パターンあります。

先ずはこちらの１０テーマ用ボタンカスタマイズCSSです。

1. MAGGIE 
   
2. VANILLA 
   
3. JUSTIN 
   
4. TYPTM 
   
5. PJ
   
6.  BILL
   
7.  NATALIE 
   
8. MALIA 
   
9. BELLE 
   
10. SUGAR 
    
11. JEPHOTO 
    

オレンジ

 .u-btn-bdr-clr { border-color: #ff9900; color: #fff; border-radius:5px; background-image:-moz-linear-gradient(top,#ffa035 0%,#ff9900); background-image:-webkit-gradient(linear,left top,left bottom,from(#ffa035),to(#ff9900)); } 

 ピンク

 .u-btn-bdr-clr { border-color: #ffb2b2; color: #fff; border-radius:5px; background-image:-moz-linear-gradient(top,#ffcccc 0%,#ffb2b2); background-image:-webkit-gradient(linear,left top,left bottom,from(#ffcccc),to(#ffb2b2)); } 

 イエロー

 .u-btn-bdr-clr { border-color: #f6cc33; color: #fff; border-radius:5px; background-image:-moz-linear-gradient(top,#f4da7c 0%,#f6cc33); background-image:-webkit-gradient(linear,left top,left bottom,from(#f4da7c),to(#f6cc33)); } 

 グリーン

 .u-btn-bdr-clr { border-color: #b5d78d; color: #fff; border-radius:5px; background-image:-moz-linear-gradient(top,#b5d78d 0%,#98d64d); background-image:-webkit-gradient(linear,left top,left bottom,from(#b5d78d),to(#98d64d)); } 

次のパターン

1. CDG 
   
2. SPUNE 
   
3. CELL 
   
4. WINKEL 
   
5. NOBLESSE 
   
6. NEMI 
   
7. HINATA
   

オレンジ

 .u-btn-bg-clr { border-color: #ff9900; color: #fff; border-radius:5px; background-image:-moz-linear-gradient(top,#ffa035 0%,#ff9900); background-image:-webkit-gradient(linear,left top,left bottom,from(#ffa035),to(#ff9900)); } 

 ピンク

 .u-btn-bg-clr { border-color: #ffb2b2; color: #fff; border-radius:5px; background-image:-moz-linear-gradient(top,#ffcccc 0%,#ffb2b2); background-image:-webkit-gradient(linear,left top,left bottom,from(#ffcccc),to(#ffb2b2)); } 

 イエロー

 .u-btn-bg-clr { border-color: #f6cc33; color: #fff; border-radius:5px; background-image:-moz-linear-gradient(top,#f4da7c 0%,#f6cc33); background-image:-webkit-gradient(linear,left top,left bottom,from(#f4da7c),to(#f6cc33)); } 

 グリーン

 .u-btn-bg-clr { border-color: #b5d78d; color: #fff; border-radius:5px; background-image:-moz-linear-gradient(top,#b5d78d 0%,#98d64d); background-image:-webkit-gradient(linear,left top,left bottom,from(#b5d78d),to(#98d64d)); }

テーマに合わせて

お使いのテーマにあったCSSをお使いください

今後カラーを増やす予定です。

欲しいカラーがありましたらリクエストくださいね

お待ちしております！

Skypeでホームページ、SNS、悩み相談、操作方法、活用法などサポートやっています。

詳しくはこちらから！！

ではまた
加藤でした！！