【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号
お前次第な

 

コメント( ˶ˆ꒳ˆ˵ )

avatar