|講座・勉強会開催予定一覧

アメーバオウンド ボタン カスタマイズ ホームページを作ろうVol21

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





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

先ずは先行で
CDG:アメブロ連携対応」テーマ用
ボタンカスタマイズ用CSSを作ってみました。




カラーは4色

手始めに4色用意してみました。
グリーン、イエロー、オレンジ、ピンクの4色です。




カスタマイズ方法

操作は4手順でOK

1.ダッシュボード>カスタマイズ>CSSカスタマイズへアクセス





CSSコードをコピー

CSSはご利用のデザインテンプレートによって異なります。
デザインテンプレートごと、グループテーマAとグループテーマB 2種類あります。


ご利用のCSSを4色ある中からコピーしてお使い下さい



<<グループテーマ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コメント

  • 1000 / 1000

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

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

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

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