|札幌SNSランチ会、セミナー、勉強会開催予定一覧

  • 【満席ありがとうございます。】2017年8月30日(水) 東京 ホームページ作成講座
  • 【予定】あつしのお茶会 8月下旬予定
  • 【予定】2017年10月 名古屋
  • 【予定】2017年10月 仙台

アメーバオウンド ボタン カスタマイズ ホームページを作ろう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、アメーバオウンド)、ブログ(アメブロ)の制作をしています。
また、Skypeサポートで、PC、iPhone、SNSの悩み、質問、連携のアドバイスもしています。

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

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