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

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



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

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

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



ボタンに色を付ける

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


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

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



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サポートも出来ますので!!


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

0コメント

  • 1000 / 1000

アメーバオウンド 札幌 ホームページ 加藤敦志

札幌でホームページ制作をアメーバオウンドで行っています。
Smilefactoryten 代表 加藤敦志です。
農業土木設計技師に19年従事
現在
ホームページ(アメーバオウンド、WordPress)、ブログ(アメブロ)の制作をしています。
また、PC、iPhone、SNSの悩み、質問、など
トータルでWebサポートも行っています。

アメーバオウンド 札幌 ホームページ 加藤敦志

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