Simple WordPress Membershipで作った会員サイトのStripe決済ボタンの色をカスタマイズする方法

Simple WordPress Membershipで作った会員サイトのStripe決済ボタンは、↓のようなメタリックなブルーのボタンです。

ウェブサイトのイメージにあっているならこのままで使えますが、イメージとちょっと違うなぁという場合、色とか言葉とか変えたいですよね。

このボタンの色や言葉をカスタマイズする方法をご案内します。

ボタンのデザインをCSSで設定する

ワードプレスにログインして、左側メニューの[外観]-[カスタマイズ]を選択します。 

さらに左側メニューの[追加CSS]を選択します。

その枠の中に、下記のコードをコピー&ペーストします。

コード
/* 登録画面のStripeボタン */
.stripe-button-el {
	height: 2.5em; /*高さ*/
	width: 200px; /*幅*/
	background-color: #e89f4a; /*背景色*/
	color: #333; /*文字色*/
	box-shadow: 0px 1px 3px rgba(0,0,0,.5); /*影の形と色*/
	border: none; /*ボタンの枠*/
	border-radius: 2px; /*角を丸める*/
}

.stripe-button-el:hover {
	background: #70944b; /*カーソルをあてた時の背景色*/
	color: #fff; /*カーソルをあてた時の文字色*/
	box-shadow: 0px 1px 3px rgba(0,0,0,.5); /*カーソルをあてた時の影の形と色*/
}

上部の公開ボタンを押します。

カスタマイズ画面は閉じて、ボタンを貼り付ける固定ページ(投稿ページ)を開きます。

※ /* */で囲んだ文字がその行の説明です。色などは好きに変更可能です。変更方法の詳細は、このページ下部の「ボタンの色を変更する」に記載しましたのでご参照ください。

Stripeボタンの設置

いったんボタンのショートコード(サンプル:[ swpm_payment_button id=ボタンID ] )を貼り、プレビューボタンを押します。

プレビュー画面が表示されたら、画面を右クリックして「ページのソースを表示」を選択します。

ページのソースが表示されるので、下記のように『<div class=”swpm-payment-button”>』から始まり、『</div>』で終わる箇所までを探し、コピーします。

コード
<div class="swpm-payment-button">
<div class="swpm-button-wrapper swpm-stripe-buy-now-wrapper">
<form id="swpm-stripe-payment-form-フォームコード" action="https://tag.sincere-smile.com/?swpm_process_stripe_sca_subscription=1&amp;ref_id=swpm_フォームコード" method="POST">
<div style="display: none !important;"><script src="https://js.stripe.com/v3/"></script><link rel='stylesheet' href='https://checkout.stripe.com/v3/checkout/button.css' type='text/css' media='all'/> <script>var stripe=Stripe('Stripeのキーコード');jQuery('#swpm-stripe-payment-form-フォームコード').on('submit',function(e){e.preventDefault();var btn=jQuery(this).find('button').attr('disabled',true);jQuery.post('https://tag.sincere-smile.com/wp-admin/admin-ajax.php',{'action':'swpm_stripe_sca_create_checkout_session','swpm_button_id':ボタンID,'swpm_page_url':'https://tag.sincere-smile.com/guide/','swpm_uniqid':'フォームコード'}).done(function(response){if(!response.error){stripe.redirectToCheckout({sessionId:response.session_id}).then(function(result){});}else{alert(response.error);btn.attr('disabled',false);return false;}}).fail(function(e){alert("HTTP error occurred during AJAX request. Error code: "+e.status);btn.attr('disabled',false);return false;});});</script></div>
<button id="ボタンID" class="stripe-button-el" type="submit"><b>購入する</b></button></form>
</div>
</div>

ボタンを貼り付けたい固定ページ(投稿ページ)に戻り、ビジュアルモードからテキストモードにタブを変更します。

ボタンを貼り付けたい位置に、コピーした上記ソースを貼り付けます。

重要
ピンクの部分を削除します。
必要に応じて
赤字の「購入する」の部分がボタン上のテキストになります。必要がありましたら「入会する」等に変更します。

いったん貼り付けていたボタンのショートコードは削除してください。

これで、ボタンとテキストの色が、↓のようになります。右上の『変更をプレビュー』ボタンを押してご確認ください。

ボタンの上にカーソルを置くと、↓に変化します。

ボタンやボタンのテキストの色がこれでよければ、ボタンの色と形のカスタマイズは終了です。

他の箇所の作成も終わっている場合、公開してください。

ボタンの色の変更方法

ボタンとボタンのテキストの色の変更方法をもう少し詳しくご説明します。

↑をご覧ください。

赤枠の記述が、カーソルを乗せていない普通の時のボタンの設定です。

そして、青枠の記述が、カーソルを乗せた時のボタンの設定です。

さらに、それぞれ、オレンジ下線の部分が、ボタンの色を設定していて、緑下線の部分がボタンのテキストの色を設定しています。

『#e89f4a』がオレンジ色のカラーコードで、『#70944b』が緑色のカラーコードなので、普通がオレンジのボタンで、カーソルを乗せると緑に変わります。

同じように『#333(本当は#333333ですが、全て同じ数字の場合、3つに省略できます)』が黒色で、『#fff』が白色なので、普通のボタンの文字色が黒色で、カーソルを乗せると白色の文字色に変わります。

なので、それぞれの#から始まるカラーコードを変えると、お好きなボタン色・テキスト色に変えることができます。

カラーコードの調べ方

カラーコードはどう調べるか…ですが、『色の名前とカラーコードが一目でわかるWEB色見本』というカラーコード一覧表を出しているウェブサイトが多数ありますので、”カラーコード”で検索して、そのようなサイトを参考にするのが楽です。

『色の名前とカラーコードが一目でわかるWEB色見本』へジャンプ

また、Googleで例えば『#e89f4a』を検索すると、↓のようにカラーコードが表示されます。

『HEX』と書かれた部分ですね。

そのすぐ上のバーを横スクロールすると、色を変えられますし、さらに上の○の場所を変えると、色の薄さを変えられるので、ここで好きな色を探すのもいいと思います!

ぜひ、ウェブサイトのイメージに合った色のボタンにしてみてくださいね。

サポートをご希望の場合

今回の作業は、普段使わないページや箇所が多かったかもしれません。

もし、サポートをご希望される場合は、オンラインコミュニティTAGのメンバーの方は、さくさく作業会にご参加いただいてご質問いただくか、20分間の無料個別相談をご利用くださいね!

メンバーではない場合、マンツーマンサポートもございますし、↓のお得なオンラインコミュニティもございますのでへのご参加をご検討ください。

error: Content is protected !!