BEFORE
● ワンコイン500円～
AFETR
マイクロコピーと言えばこの本ですね
気になる方は買いましょう。面白かったですよ
カスタマイズは自己責任でやろう
自己責任の意味がわからない方、初めてカスタマイズする方は、必ずこちらの記事を読んでくださいね。
見たい場所へジャンプ
カスタマイズするための
準備
テキストエディタにコード追加
WordPress＞投稿＞テキストエディタ
下記のコードを記入するとマイクロコピーをボタンに追加することができます。
|
1 2 3 4 5 |
[center] <p class="abtn-mc1-top-text">★文字★</p> <div class="abtn-mc1">★アフィリンク★</div> <p class="abtn-mc1-under-text">★文字★</p> [/center] |
A8などで取得したアフィリエイトリンクを★アフィリンク★の部分に貼り付けるだけでOKです(*´罒`*)
CSSコードの追加方法
おすすめは追加CSSからコードを追加する方法です。
はじめてカスタマイズする方は、こちらの記事を読んでくださいね。
| 追加方法 | 難しさ |
|---|---|
| 追加CSS | |
| テーマエディター | |
| FTPソフト |
複数のカスタマイズをしたい方は、テーマエディターだと編集しやすくておすすめです。普段からFTPソフトを使ってる方はそちらからアップロードしてもカスタマイズできます。
カスタマイズに必要な
CSSコード
コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
.abtn-mc1 a { display: inline-block; width: 100%; margin: 0; border-radius: 3px; background: #4F9DF4; color: #fff; font-size: 1.2em; font-weight: 500; line-height: 44px; text-decoration: none; box-shadow: 0 2px 3px rgba(0,0,0,.2), 0 2px 3px -2px rgba(0,0,0,.15); } .abtn-mc1 a:after { content: "\f138"; font-family: "font awesome 5 free"; font-weight: 900; margin-left: 15px; } .abtn-mc1 a:hover{ text-decoration: none; box-shadow: 0 13px 20px -3px rgba(0,0,0,.24); -webkit-tap-highlight-color: transparent; } .abtn-mc1 img{ display: block; } p.abtn-mc1-top-text { font-weight: bold; margin-bottom: 3px; } p.abtn-mc1-under-text { font-size: .8em; margin-top: 3px; } |
こちらのコードをコピーしたら、追加CSSもしくはstyle.cssへ貼り付けます。
fontawesome4.7の方はこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
.abtn-mc1 a { display: inline-block; width: 100%; margin: 0; border-radius: 3px; background: #4F9DF4; color: #fff; font-size: 1.2em; font-weight: 500; line-height: 44px; text-decoration: none; box-shadow: 0 2px 3px rgba(0,0,0,.2), 0 2px 3px -2px rgba(0,0,0,.15); } .abtn-mc1 a:after { content: "\f138"; font-family: "fontawesome"; margin-left: 15px; } .abtn-mc1 a:hover{ text-decoration: none; box-shadow: 0 13px 20px -3px rgba(0,0,0,.24); -webkit-tap-highlight-color: transparent; } .abtn-mc1 img{ display: block; } p.abtn-mc1-top-text { font-weight: bold; margin-bottom: 3px; } p.abtn-mc1-under-text { font-size: .8em; margin-top: 3px; } |
16行目のfont-familyの値とfont-weightの値を変更する必要があります。
もっと使いやすくする
使い方はググりましょう。（いつか書くかも）
うまくできたか
確認
確認する際は必ずキャッシュを削除してから見てください。
| 確認方法 |
|---|
| 「Ctrl」+「F5」（キャッシュ削除） |
カスタマイズコードを追加CSS（またはテーマエディタ）に追加して保存したら、カスタマイズがうまく反映されているか、確認しましょう。
Mac bookやスマホではキャッシュ削除の仕方が違うので、詳しくはこちらの記事で確認してください。
くまからのお礼
本ブログ（for men）では、ひとりでも多くの方にブログを楽しんで欲しくてカスタマイズ記事を書いています。（決して自己満足ではありません）
もっとカスタマイズしたい人はこちらの記事を見てください。
【圧倒的SANGOカスタマイズまとめ】～ようこそ、沼への入口へ～
まとめ・雑談
おすすめのABテストプラグインはこじかABテストテスター（有料）です＼(^o^)／
こんにちは。いつもすばらしいカスタマイズをありがとうございます。調べたのですが解決できなかったため質問させてください。★アフィリンク★を★アフィ
リンク★のようにすると、通常のSANGOのボタンより、アフィとリンクの文字の隙間が大きくなってしまいます。何か解決策はございますでしょうか？
まこさん、こんにちは( ˶ˆ꒳ˆ˵ )
コメントいただき、ありがとうございます。
行送りすると行間の余白が広くなってしまう問題ですね！
お手数ですが、下記の部分を修正していただくとうまくいくと思います♪
（変更前）
.abtn-mc1 a {
display: inline-block;
width: 100%;
margin: 0;
border-radius: 3px;
background: #4F9DF4;
color: #fff;
font-size: 1.2em;
font-weight: 500;
line-height: 44px;
text-decoration: none;
box-shadow: 0 2px 3px rgba(0,0,0,.2), 0 2px 3px -2px rgba(0,0,0,.15);
}
（変更後）
.abtn-mc1 a {
display: inline-block;
width: 100%;
margin: 0;
padding: 10px 0;
border-radius: 3px;
background: #4F9DF4;
color: #fff;
font-size: 1.2em;
font-weight: 500;
line-height: 30px;
text-decoration: none;
box-shadow: 0 2px 3px rgba(0,0,0,.2), 0 2px 3px -2px rgba(0,0,0,.15);
}
このように変更していただくと2行になっても良さげな気がします( ˶ˆ꒳ˆ˵ )
変更は行の高さを指定するline-heightを低くして、ボタンの上下の余白をpaddingで調整しています٩( ᐛ )و
ご希望どおりに行くことを願っております♫
くまさん、迅速なコメントありがとうございました！パーフェクトな仕上がりになりました(^^) 本当にありがとうございました。これからもブログの更新を楽しみにしています。
いつもお世話になっています。このボタンは青以外に利用する方法はありますでしょうか？…初心者で申し訳ありません。
コメントありがとうございます( ˶ˆ꒳ˆ˵ )
カスタマイズコードの「background:カラーコード」を変更していただくか、テキストエディタのコードに下記のように追加していただくと、ボタンの色を変更できます♪
よろしくお願いします。