【SANGOを自分でカスタマイズ】ボタン周りにテキストを追加してみた

この記事のカスタマイズ

  • ボタンの上下にマイクロコピーを追加

Before
ココナラでカスタマイズをお願いする

今すぐ申し込む

● ワンコイン500円~

 

After

ココナラでカスタマイズをお願いする

● ワンコイン500円~

 

POINT
アフィリエイトリンクでもSANGOのボタンっぽく利用できるようにカスタマイズしました。imgタグでデザインがくずれるのも修正しました。
マイクロコピーの本といえばこちら

 

環境とか
必須
推奨
推奨

カスタマイズする準備

MENくん

今回はCSS以外にテキストエディタにコードを追加する必要があります

テキストエディタにコード追加

WordPress投稿テキストエディタ

下記のコードを記入するとマイクロコピーをボタンに追加することができます。

A8などで取得したアフィリエイトリンクを★アフィリンク★の部分に貼り付けるだけでOKです(*´罒`*)

CSSを変更する準備

追加方法難しさ
追加CSS
テーマエディター
FTPソフト

はじめてカスタマイズをする方におすすめなのは追加CSSです。

カスタマイズを加速させる追加CSSブログのカスタマイズを加速させる「追加CSS」の使い方

カスタマイズのコードを追加

コード

こちらのコードをコピーしたら、追加CSSもしくはstyle.cssへ貼り付けます。

fontawesome4.7の方はこちら

16行目のfont-familyの値とfont-weightの値を変更する必要があります。

うまくできたか確認

確認の手順

  1. カスタマイズコードを保存
  2. カスタマイズしたページを開く
  3. cntrl+F5を押す

いわゆるキャッシュ削除ですね。詳しい手順はこちらの記事で書いています。

カスタマイズはキャッシュ削除をマスターしてからです

もっと使いやすくする

MENくん

はぁ、毎回テキストエディタにコードを書くのマジめんどくさい

くま3号

そこはプラグインのAdd Quicktagで解決やな

プラグイン仕様例
登録しておけばこんな感じで簡単にボタンを挿入できます

使い方はググりましょう。(いつか書くかも)

まとめ・雑談

追加CSSのまとめ

MENくん

マイクロコピーをつけるとなんだかそれっぽくなるね

くま3号

あとはABテストで検証したり、本で勉強しないとね

マイクロコピーの本といえばこちら

おすすめのABテストプラグインはこじかABテストテスター(有料)です\(^o^)/

MENくん

なるほど!マイクロコピーも進化させることができるんだね

くま3号

お前次第な

まだまだカスタマイズがありますよ

SANGOをカスタマイズしたまとめ