アメーバオウンド ボタンをカスタマイズする方法 Vol.１１

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

アメーバオウンドの基本機能「ボタン」があります。

• お問い合わせフォームへのリンク
  
• お申込みフォームへのリンク
  
• ホームページ内のページへのリンク
  

など、使い方は様々です。

ボタンに色を付ける

基本デザインですとボタンはかなりシンプルです。

このデザインもシンプルで個人的には好きですが、ボタンとしては目立ちません。

今回目立たせるために「ボタンに色」をつけるカスタマイズをやってみました。

CSSカスタマイズを使います

CSSと聞いただけで
蕁麻疹が出る人が多いかもしれませんが。。

しかしそこは目標を達成するために
我慢、我慢。。

自分のホームページでお申込をしていただく為に

目立つわかりやすいボタンを設置する為に（笑）

➢ダッシュボード＞カスタマイズ＞CSSカスタマイズです。

設置するCSS

テーマによってCSSが若干ことなります。

※classが違いますのでご注意下さい。

以下の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+ */ }

設置する場所

今回はパソコン表示メインとします。

☆パソコン表示

ボタンの色が変わっているか確かめてみましょう

画像赤枠のトグルをパソコン表示にセットして確認してください。

ボタンの色変更、カスタマイズできましたぁ〜！！

今日の内容はちょっと難しかもしれませんが
是非チャレンジしてみてください。

わからなければSkypeサポートも出来ますので！！

ではまた
加藤敦志でした！！