コピー2019.07.04WordPressテーマを「ストーク」から「SANGO」に変更しましたが、一つ問題点がありました。仕様の違いから、SANGOのショートコードではアフィリエイトリンクをボタンにすることが出来ません😩(出来ないわけではないけど、アフィリエイトリンクコードを改変することになってしまう。)そこで、SANGOでもアフィリエイトリンクをボタンに出来るようにカスタマイズを行いました。Twitterでつぶやいたら、やり方を知りたいという要望を頂いたので、記事にしてみました。HTMLカスタマイズ方法:style.cssの編集ボタンのデザイン浮き出しボタンテキストボタン塗りつぶしボタンシンプルな枠ボタン両端線ボタン好きな色にアレンジ可能まとめ事前準備このカスタマイズはスタイルシートを編集します。親テーマを使っているとアップデートなどに対応出来ないので、子テーマをインストールして有効化しておいてください。子テーマのダウンロード、インストール方法などは下記からご確認ください。基本のHTMLボタンにしたいアフィリエイトリンクを下記コードで囲うだけ。class="btn_link">ここにアフィリエイトリンク</div>アフィリエイトリンクとしていますが、ただのテキストリンクでもOKです。プラグイン「AddQuicktag」に登録しておくと簡単に利用できます。子テーマを有効化したら、ダッシュボード>外観>テーマの編集にアクセスします。Child」にします。その下のスタイルシート(style.css)を選択。(おそらく「テーマの編集」にアクセスするとデフォルトでstyle.cssが表示されます。)「こちらはSANGOの子テーマ~いきましょう。」の下に、後述するCSSをコピー&ペーストして、「ファイルを更新」をクリックしたら完了です。ボタンのデザインSANGOのショートコードのボタンを参考にしました。すべてのデザインには対応していませんが、色変更などでアレンジ可能です。#fff;/*触れたときの文字色*/}好きな色にアレンジ可能CSS内の/*~*/で挟まれたコメントがついている行を編集すればアレンジすることが出来ます。色を変更したい場合は#******(6桁の英数字)の部分を書き換えればOK。カラーコードは下記サイトが参考になります。線の色;という順に並んでいます。線の種類は下記の中からお好みのものに書き換えてください。solid(実線)dotted(点線)dashed(破線)double(二重線)doubleの場合は、太さ3px以上にしないと二重になりません。その他、デフォルトで中央寄せ・太文字になっているので適宜変更してください。上記のコードだと、ボタンの種類は一つしか使えません。2種類以上のボタンを同じWordPress内で使いたい場合は、HTMLのclass=”btn_link“とCSSの.btn_link{~}の3箇所、合計4箇所を同じ文字列に変更すれば、使えるボタンの種類を増やせます。CSSの.(ピリオド)は消さないように注意してください。まとめリクエストがあったので記事にしてみましたが、素人なので何か間違っていたらごめんなさい。SANGO用としていますが、他のテーマでもほぼ同じようなデザインにすることが出来ます。どなたかのお役に立てたら嬉しいです😊これからWordPressテーマを「ストーク」から「SANGO」に変更する方は、「ストーク→SANGOにテーマ変更。正規表現でショートコードを簡単に置換する方法」もお役に立つかもしれません。Me/5りらアフィリッチ関連記事WordPressカスタマイズ【JIN】目次の余白を調整するカスタマイズWordPressカスタマイズ【JIN】ブログカードに「続きを読む」を追加するカスタマイズWordPressカスタマイズストーク→SANGOにテーマ変更。コメントをキャンセルメールアドレスが公開されることはありません。個別の相談などにはお応えできかねます。質問は具体的にお願いいたします。コメント名前サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。アフィリッチ.メニューホーム節約ブログホーム検索トップサイドバーカテゴリーWordPressカスタマイズ10アフィリエイト4運営報告8タイトルとURLをコピーしました。