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

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



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

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

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



18テーマ対応

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

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





2パターンあります。

先ずはこちらの10テーマ用ボタンカスタマイズ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、悩み相談、操作方法、活用法などサポートやっています。

詳しくはこちらから!!



ではまた
加藤でした!!

0コメント

  • 1000 / 1000

札幌 AmebaOwnd アメーバオウンド 加藤敦志

札幌でAmebaOwnd(アメーバオウンド)でホームページ作成行っています。smilefacotryten アメーバオウンドマイスター 加藤敦志です。ホームページ、ブログ制作、悩み、苦手を問題解決へサポートする。IT、WEBを使ってお仕事をされる方のお手伝い トータルWebサポートをしています。