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

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

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





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

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




カラーは4色

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




カスタマイズ方法

操作は4手順でOK

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





CSSコードをコピー

4色あるボタンカスタマイズCSSをコピーしてください。

2.ボタンカスタマイズCSSをコピー


グリーンボタンCSS

 .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

 .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)); }



オレンジボタンCSS

.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)); }



ピンクボタンCSS

 .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)); }




CSSを貼り付け

カスタマイズしたい色のCSSを貼り付け(ペースト)します。

貼り付ける場所は「全体」と書かれたところに!!!

3.お好きなカラーのCSSをペースト



最後に保存

最後貼り付けたCSSを最新の情報にするために
「保存」します。

4.保存


これで完了です!!


今後カラーを少しずつ増やしていきます。

こんな色のボタンが欲しい!!

リクエストにもお答えいたします。

是非リクエストお待ちしております。

リクエストはコメントにお願いします!



ではまた
加藤でした!!

0コメント

  • 1000 / 1000

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

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

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

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