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

訂正

アフィリエイトリンク用に書き換えました。（2018.9.6）

パターン１のボタンで、下文字がボタンにかぶってしまう問題がありましたので、.abtn-mc1{margin-bottom: 1.3em;}の部分を削除しました。（2018.0916）

カスタマイズは自己責任で！

このブログのワードプレス環境

ワードプレステーマ

子テーマ

この記事では
ボタンにマイクロコピーを追加するカスタマイズを説明。

マイクロコピーをボタン周りに入れたいなぁ

補足でつけたりする文字のことやな、細部に神は宿るっていうしやってみれば？

よっしゃ！やってやんよ！

このサイトの環境

テーマ

子テーマ

プラグイン

こんな感じに変更（PC）

Before

After

ー　パターン①　ー

ー　パターン②　ー

ー　パターン③　ー

スマホ表示

ほんまもんのリンク

ー　パターン①　ー

無料初回30日　ハチミツ食べ放題

今すぐ申し込む

※その後はわずか月額￥900。

ー　パターン②　ー

今すぐ申し込む

30日間無料トライアル

登録は5分で完了

ー　パターン③　ー

20,000人

が利用中

今すぐ申し込む

2018.9.6（追記）アフィリエイトリンクを直接ボタンにした場合

上に入れる文字

【formrun】

下に入れる文字

【formrun】

nanntena

20,000人

が利用中

【formrun】

いきおい余って３つも作ったよ！ぼくのサイトではスマホでもちゃんと表示されました！

ボタンの文字が長いときは、ごめんなさいやな

使うソフトなどはこちら

必須

WordPress

Google Chrome

推奨

File zilla

sublime text

見たい場所へジャンプ

1 カスタマイズする準備（アフィリエイトリンク直接ver）
- 1.1 WordPressのテキストエディタにコードを追加
2 カスタマイズのコードを追加
3 URLだけの入力の場合
- 3.1 WordPressのテキストエディタにコードを追加
- 3.2 style.cssにコードを追加する
4 まとめ：マイクロコピーをボタンに追加する

カスタマイズする準備（アフィリエイトリンク直接ver）

パート①をメインに説明していきます。

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

WordPress＞テキストエディタ画面で下記のコードを記入するとマイクロコピーをボタンに追加することができます。

テキストエディタ（追加するコード：パート①）

/*--------------------------------------
テキストエディタにこちらを貼り付けてください
--------------------------------------*/
[center]
<p class="abtn-mc1-top-text">上に入れる文字</p>
<div class="abtn-mc1">★アフィリエイトリンク★</div>
<p class="abtn-mc1-under-text">下に入れる文字</p>
[/center]

/*--------------------------------------

テキストエディタにこちらを貼り付けてください

--------------------------------------*/

[center]

<p class="abtn-mc1-top-text">上に入れる文字</p>

<div class="abtn-mc1">★アフィリエイトリンク★</div>

<p class="abtn-mc1-under-text">下に入れる文字</p>

[/center]

パート②のコード（テキストエディタに追加）

テキストエディタ（追加するコード：パート②）

/*--------------------------------------
テキストエディタにこちらを貼り付けてください
--------------------------------------*/
[center]
<div class="abtn-mc2">★アフィリエイトリンク★</div>
<div class="abtn-mc2-text">
<p>★文字★</p>
<p>★文字★</p>
</div>
[/center]

/*--------------------------------------

テキストエディタにこちらを貼り付けてください

--------------------------------------*/

[center]

<div class="abtn-mc2">★アフィリエイトリンク★</div>

</div>

[/center]

パート③のコード（テキストエディタに追加）

テキストエディタ（追加するコード：パート③）

/*--------------------------------------
テキストエディタにこちらを貼り付けてください
--------------------------------------*/
[center]
<div class="abtn-huki">
<p class="big"><strong>20,000人</strong></p>
<p class="small">が利用中</p>
</div>
<div class="abtn-mc3">★アフィリエイトリンク★</div>
[/center]

/*--------------------------------------

テキストエディタにこちらを貼り付けてください

--------------------------------------*/

[center]

</div>

<div class="abtn-mc3">★アフィリエイトリンク★</div>

[/center]

アフィリエイトリンクを★アフィリエイトリンク★の部分に入れればOKです。

［center］の部分はSANGOの中央寄せショートコードです。

MEMO

自作のボタンを使用したい方は、<div class=”abtn-mc~”>の部分を自分のクラス名に変更してください。

まずはテキストエディタに貼り付けて、次はstyle.css（もしくはテーマの編集）にコードを追加していきます。

追加CSSの手順

外観

カスタマイズ

追加CSS

子テーマの手順

外観

テーマの編集

FTPソフトの手順

FTPソフト起動

自サイトに接続

style.cssを開く

追加CSSの使い方はこちら

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

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

パート①のコード

コード（style.css用）

style.css（追加するコード：マイクロコピー付きボタン①）

.abtn-mc1 a{
    display: inline-block;
    width: 95%;
    margin: 0;
    border-radius: 3px;
    background: #4F9DF4;
    color: #fff;
    padding: .2em .3em;
    font-size: 1.3em;
    font-weight: bold;
    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: 20px;
}
.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-top-text{
    font-weight: bold;
    margin-bottom:.4em!important;
}
.abtn-mc1-under-text{
    font-size: .8em;
}

.abtn-mc1 a{

display: inline-block;

width: 95%;

margin: 0;

border-radius: 3px;

background: #4F9DF4;

color: #fff;

padding: .2em .3em;

font-size: 1.3em;

font-weight: bold;

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: 20px;

}

.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-top-text{

font-weight: bold;

margin-bottom:.4em!important;

}

.abtn-mc1-under-text{

font-size: .8em;

}

パート②のコード

コード（style.css用）

style.css（追加するコード：マイクロコピー付きボタン②）

/*--------------------------------------
  マイクロコピー付き　ボタン2
--------------------------------------*/
.abtn-mc2{
    margin: .3em 0 -1.5em 0;
    display: inline-block;
    vertical-align: top;
}
.abtn-mc2 a{
    display: inline-block;
    margin: 0;
    border-radius: 3px;
    background: #4F9DF4;
    color: #fff;
    padding: .2em 2em;
    font-size: 1.3em;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 2px 3px rgba(0,0,0,.2), 0 2px 3px -2px rgba(0,0,0,.15);
}
.abtn-mc2 a:after{
    content: "\f138";
    font-family:"FontAwesome";
    margin-left: 20px;
}
.abtn-mc2 a:hover{
    text-decoration: none;
    box-shadow: 0 13px 20px -3px rgba(0,0,0,.24);
    -webkit-tap-highlight-color: transparent;
}
.abtn-mc2-text{
    display: inline-block;
    font-size: 14px;
    text-align: left;
}
.abtn-mc2-text p{
    margin:2px 0;
    padding-left: 10px;
}
.abtn-mc2-text p:before{
    content: "\f058";
    font-family:"FontAwesome";
    margin-right: 8px;
}

/*--------------------------------------

マイクロコピー付き　ボタン2

--------------------------------------*/

.abtn-mc2{

margin: .3em 0 -1.5em 0;

display: inline-block;

vertical-align: top;

}

.abtn-mc2 a{

display: inline-block;

margin: 0;

border-radius: 3px;

background: #4F9DF4;

color: #fff;

padding: .2em 2em;

font-size: 1.3em;

font-weight: bold;

text-decoration: none;

box-shadow: 0 2px 3px rgba(0,0,0,.2), 0 2px 3px -2px rgba(0,0,0,.15);

}

.abtn-mc2 a:after{

content: "\f138";

font-family:"FontAwesome";

margin-left: 20px;

}

.abtn-mc2 a:hover{

text-decoration: none;

box-shadow: 0 13px 20px -3px rgba(0,0,0,.24);

-webkit-tap-highlight-color: transparent;

}

.abtn-mc2-text{

display: inline-block;

font-size: 14px;

text-align: left;

}

.abtn-mc2-text p{

margin:2px 0;

padding-left: 10px;

}

.abtn-mc2-text p:before{

content: "\f058";

font-family:"FontAwesome";

margin-right: 8px;

}

パート③のコード

コメントありのコード（style.css用）

style.css（追加するコード：マイクロコピー付きボタン③）

/*--------------------------------------
マイクロコピー付き　ボタン3
--------------------------------------*/
.abtn-mc3{
    margin: .15em 0 -1.5em 15px;
    display: inline-block;
    vertical-align: top;
    width: 50%;
}
.abtn-mc3 a{
    display: inline-block;
    width: 100%;
    margin: 0;
    border-radius: 3px;
    background: #4F9DF4;
    color: #fff;
    padding: .4em 1.5em;
    font-size: 1.3em;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 2px 3px rgba(0,0,0,.2), 0 2px 3px -2px rgba(0,0,0,.15);
}
.abtn-mc3 a:after{
    content: "\f138";
    font-family:"FontAwesome";
    margin-left: 20px;
}
.abtn-mc3 a:hover{
    text-decoration: none;
    box-shadow: 0 13px 20px -3px rgba(0,0,0,.24);
    -webkit-tap-highlight-color: transparent;
}
.abtn-huki {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    border: solid 1px #d1d1d1;
    border-radius: 10px;
    padding: .5em 1.5em;
}
.abtn-huki p{
    margin-bottom: 0;
    line-height: 1.3;
}
.abtn-huki:before{
    content: "";
    position: absolute;
    top: 18px;
    left: 100%;
    border: 13px solid transparent;
    border-left: 17px solid #d1d1d1;
}
.abtn-huki:after {
    content: '';
    position: absolute;
    top: 19px;
    left: 100%;
    border: 12px solid transparent;
    border-left: 16px solid white;
}
@media screen and (max-width: 500px){
.abtn-huki:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 55px;
    border: 13px solid transparent;
    border-top: 17px solid #d1d1d1;
}
.abtn-huki:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 56px;
    border: 12px solid transparent;
    border-top: 16px solid white;
}
.abtn-mc3{
    width: 100%;
    margin-left: 0px!important;
}}

/*--------------------------------------

マイクロコピー付き　ボタン3

--------------------------------------*/

.abtn-mc3{

margin: .15em 0 -1.5em 15px;

display: inline-block;

vertical-align: top;

width: 50%;

}

.abtn-mc3 a{

display: inline-block;

width: 100%;

margin: 0;

border-radius: 3px;

background: #4F9DF4;

color: #fff;

padding: .4em 1.5em;

font-size: 1.3em;

font-weight: bold;

text-decoration: none;

box-shadow: 0 2px 3px rgba(0,0,0,.2), 0 2px 3px -2px rgba(0,0,0,.15);

}

.abtn-mc3 a:after{

content: "\f138";

font-family:"FontAwesome";

margin-left: 20px;

}

.abtn-mc3 a:hover{

text-decoration: none;

box-shadow: 0 13px 20px -3px rgba(0,0,0,.24);

-webkit-tap-highlight-color: transparent;

}

.abtn-huki {

display: inline-block;

vertical-align: middle;

position: relative;

border: solid 1px #d1d1d1;

border-radius: 10px;

padding: .5em 1.5em;

}

.abtn-huki p{

margin-bottom: 0;

line-height: 1.3;

}

.abtn-huki:before{

content: "";

position: absolute;

top: 18px;

left: 100%;

border: 13px solid transparent;

border-left: 17px solid #d1d1d1;

}

.abtn-huki:after {

content: '';

position: absolute;

top: 19px;

left: 100%;

border: 12px solid transparent;

border-left: 16px solid white;

}

@media screen and (max-width: 500px){

.abtn-huki:before {

content: "";

position: absolute;

top: 100%;

left: 55px;

border: 13px solid transparent;

border-top: 17px solid #d1d1d1;

}

.abtn-huki:after {

content: '';

position: absolute;

top: 100%;

left: 56px;

border: 12px solid transparent;

border-top: 16px solid white;

}

.abtn-mc3{

width: 100%;

margin-left: 0px!important;

}}

変更点（2018-08-31）

パート③がデバイス幅によって、想定される動きと違う場合があります。そのため.mc-btn3のwidthを70%から50%に変更いたしました。吹き出しの文字数によっては更に変更する必要があるかもしれません。

確認の手順

保存ボタンを押す

ブラウザでキャッシュを削除して更新

ボタン周りにマイクロコピーが現れたぜ！

あとは毎回コードを入力するのが、めんどくさいのでプラグインを使いましょう

Add Quicktagやな！

登録しておけばこんな感じで簡単にボタンを挿入できます

MEMO

プラグインのAdd Quicktagに追加する前に、ボタンの装飾をよく使うものに変更しておきましょう。

他にもいっぱいあるよ

SANGOをカスタマイズしたまとめホームへ戻る

URLだけの入力の場合

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

WordPress＞テキストエディタ画面で下記のコードを記入するとマイクロコピーをボタンに追加することができます。

テキストエディタ（追加するコード：パート①）

/*--------------------------------------
テキストエディタにこちらを貼り付けてください
--------------------------------------*/
<div class="mc-plus-btn">
<p class="mc-top-text">★太文字★</p>
<p class="mc-btn"><a class="btn raised blue-bc strong" href="#" target="_blank" rel="noopener">★ボタンの文字★</a></p>
<p class="mc-under-text">★補足★</p>
</div>

/*--------------------------------------

テキストエディタにこちらを貼り付けてください

--------------------------------------*/

<p class="mc-btn"><a class="btn raised blue-bc strong" href="#" target="_blank" rel="noopener">★ボタンの文字★</a></p>

</div>

パート②のコード（テキストエディタに追加）

テキストエディタ（追加するコード：パート②）

/*--------------------------------------
テキストエディタにこちらを貼り付けてください
--------------------------------------*/
<div class="mc-plus-btn2">
<p class="mc-btn2"><a class="btn raised blue-bc strong" href="#" target="_blank" rel="noopener">★ボタンの文字★</a></p>
<div class="mc-text2">
<p>★文字★</p>
<p>★文字★</p>
</div>
</div>

/*--------------------------------------

テキストエディタにこちらを貼り付けてください

--------------------------------------*/

<p class="mc-btn2"><a class="btn raised blue-bc strong" href="#" target="_blank" rel="noopener">★ボタンの文字★</a></p>

</div>

パート③のコード（テキストエディタに追加）

テキストエディタ（追加するコード：パート③）

/*--------------------------------------
テキストエディタにこちらを貼り付けてください
--------------------------------------*/
<div class="mc-plus-btn3">
<div class="mc-huki">
<p class="big"><strong>★太文字★</strong></p>
<p class="small">★小文字★</p></div>
<p class="mc-btn3"><a class="btn raised blue-bc strong" href="#" target="_blank" rel="noopener">★ボタンの文字★</a></p>
</div>
</div>

/*--------------------------------------

テキストエディタにこちらを貼り付けてください

--------------------------------------*/

<p class="mc-btn3"><a class="btn raised blue-bc strong" href="#" target="_blank" rel="noopener">★ボタンの文字★</a></p>

</div>

ボタンの種類はWordPress＞テキストエディタ＞スタイル＞ボタン＞浮き出し（青）を使っています。

ボタンの種類を変えたいときは、浮き出し（青）の選択を外してから、違うスタイルを適用してください。

まずはテキストエディタに貼り付けて、次はstyle.css（もしくはテーマの編集）にコードを追加していきます。

style.cssにコードを追加する

パート①のコード

コメントありのコード（style.css用）

style.css（追加するコード：マイクロコピー付きボタン①）

/*--------------------------------------
マイクロコピー付き　ボタン
--------------------------------------*/
.mc-plus-btn{/*全体（ボタンと文字）*/
    text-align: center;/*中央揃え*/
    margin: 1em 0 1.5em 0;/*外側の余白（上1em 下1.5em）*/
}
.mc-plus-btn .btn{/*ボタンの設定*/
    width: 100%;/*幅100%*/
    padding: .2em 1.3em;/*内側の余白（上下.2em 左右1.3em）*/
    font-size: 1.3em;/*文字の大きさ*/
    font-weight: bold;/*文字を太文字に*/
}
.mc-top-text, .mc-btn{/*文字＋ボタン*/
    margin-bottom:-.2em!important;/*外側の余白（下-2em）*/
}
.mc-top-text{/*上の文字*/
    font-weight: bold;/*太文字に*/
}
.mc-under-text{/*下の文字*/
    font-size: .8em;/*ちょい小さく*/
}
.mc-btn a:after{/*ボタンのアイコン*/
    content: "\f138";/*お好きに変更してください*/
    font-family:"FontAwesome";
    margin-left: 20px;/*ボタンの文字との余白*/
}

/*--------------------------------------

マイクロコピー付き　ボタン

--------------------------------------*/

.mc-plus-btn{/*全体（ボタンと文字）*/

text-align: center;/*中央揃え*/

margin: 1em 0 1.5em 0;/*外側の余白（上1em 下1.5em）*/

}

.mc-plus-btn .btn{/*ボタンの設定*/

width: 100%;/*幅100%*/

padding: .2em 1.3em;/*内側の余白（上下.2em 左右1.3em）*/

font-size: 1.3em;/*文字の大きさ*/

font-weight: bold;/*文字を太文字に*/

}

.mc-top-text, .mc-btn{/*文字＋ボタン*/

margin-bottom:-.2em!important;/*外側の余白（下-2em）*/

}

.mc-top-text{/*上の文字*/

font-weight: bold;/*太文字に*/

}

.mc-under-text{/*下の文字*/

font-size: .8em;/*ちょい小さく*/

}

.mc-btn a:after{/*ボタンのアイコン*/

content: "\f138";/*お好きに変更してください*/

font-family:"FontAwesome";

margin-left: 20px;/*ボタンの文字との余白*/

}

コメントなしのコード（style.css用）

style.css（追加するコード：マイクロコピー付きボタン①）

/*--------------------------------------
マイクロコピー付き　ボタン
--------------------------------------*/
.mc-plus-btn{
    text-align: center;
    margin: 1em 0 1.5em 0;
}
.mc-plus-btn .btn{
    width: 100%;
    padding: .2em 1.3em;
    font-size: 1.3em;
    font-weight: bold;
}
.mc-top-text, .mc-btn{
    margin-bottom:-.2em!important;
}
.mc-top-text{
    font-weight: bold;
}
.mc-under-text{
    font-size: .8em;
}
.mc-btn a:after{
    content: "\f138";
    font-family:"FontAwesome";
    margin-left: 20px;
}

/*--------------------------------------

マイクロコピー付き　ボタン

--------------------------------------*/

.mc-plus-btn{

text-align: center;

margin: 1em 0 1.5em 0;

}

.mc-plus-btn .btn{

width: 100%;

padding: .2em 1.3em;

font-size: 1.3em;

font-weight: bold;

}

.mc-top-text, .mc-btn{

margin-bottom:-.2em!important;

}

.mc-top-text{

font-weight: bold;

}

.mc-under-text{

font-size: .8em;

}

.mc-btn a:after{

content: "\f138";

font-family:"FontAwesome";

margin-left: 20px;

}

パート②のコード

コメントありのコード（style.css用）

style.css（追加するコード：マイクロコピー付きボタン②）

/*--------------------------------------
  マイクロコピー付き　ボタン2
--------------------------------------*/
.mc-plus-btn2{/*全体（ボタンと文字）*/
    text-align: center;/*中央揃え*/
    margin: 1em 0 1.5em 0;/*外側の余白（上1em 下1.5em）*/
}
.mc-btn2{/*ボタン全体*/
    display: inline-block;/*横並びになるように*/
    font-size: 1.3em;/*文字の大きさ*/
    font-weight: bold;/*太文字に*/
    margin-bottom: 0!important;/*ボタン下の余白削除*/
}
.mc-btn2 .btn{/*ボタン*/
    padding: .2em 2em;/*ボタンの内側の余白（上下.2em 左右2em）*/
}
.mc-text2{/*文字の設定*/
    display: inline-block;/*横並びになるように*/
    vertical-align: middle;/*縦方向に中央揃え*/
    font-size: 14px;/*文字の大きさ*/
    text-align: left;/*左寄せ*/
    padding-bottom: 4px;/*内側の余白（下）*/
}
.mc-text2 p{/*文字の余白調整*/
    margin:2px 0;/*外側の余白（上下2px 左右0）*/
}
.mc-text2 p:before{/*テキストにアイコンを追加*/
    content: "\f058";/*お好きに変えてください*/
    font-family:"FontAwesome";
    margin-right: 8px;/*文字との余白*/
}
.mc-btn2 a:after{/*ボタンにアイコンを追加*/
    content: "\f138";/*お好きに変えてください*/
    font-family:"FontAwesome";
    margin-left: 20px;/*ボタンの文字との余白*/
}

/*--------------------------------------

マイクロコピー付き　ボタン2

--------------------------------------*/

.mc-plus-btn2{/*全体（ボタンと文字）*/

text-align: center;/*中央揃え*/

margin: 1em 0 1.5em 0;/*外側の余白（上1em 下1.5em）*/

}

.mc-btn2{/*ボタン全体*/

display: inline-block;/*横並びになるように*/

font-size: 1.3em;/*文字の大きさ*/

font-weight: bold;/*太文字に*/

margin-bottom: 0!important;/*ボタン下の余白削除*/

}

.mc-btn2 .btn{/*ボタン*/

padding: .2em 2em;/*ボタンの内側の余白（上下.2em 左右2em）*/

}

.mc-text2{/*文字の設定*/

display: inline-block;/*横並びになるように*/

vertical-align: middle;/*縦方向に中央揃え*/

font-size: 14px;/*文字の大きさ*/

text-align: left;/*左寄せ*/

padding-bottom: 4px;/*内側の余白（下）*/

}

.mc-text2 p{/*文字の余白調整*/

margin:2px 0;/*外側の余白（上下2px 左右0）*/

}

.mc-text2 p:before{/*テキストにアイコンを追加*/

content: "\f058";/*お好きに変えてください*/

font-family:"FontAwesome";

margin-right: 8px;/*文字との余白*/

}

.mc-btn2 a:after{/*ボタンにアイコンを追加*/

content: "\f138";/*お好きに変えてください*/

font-family:"FontAwesome";

margin-left: 20px;/*ボタンの文字との余白*/

}

コメントなしのコード（style.css用）

style.css（追加するコード：マイクロコピー付きボタン②）

/*--------------------------------------
  マイクロコピー付き　ボタン2
--------------------------------------*/
.mc-plus-btn2{
    text-align: center;
    margin: 1em 0 1.5em 0;
}
.mc-btn2{
    display: inline-block;
    padding: .2em .5em;
    font-size: 1.3em;
    font-weight: bold;
    margin-bottom: 0!important;
}
.mc-btn2 .btn{
    padding: .2em 2em;
}
.mc-text2{
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    text-align: left;
    padding-bottom: 4px;
}
.mc-text2 p{
    margin:2px 0;
}
.mc-text2 p:before{
    content: "\f058";
    font-family:"FontAwesome";
    margin-right: 8px;
}
.mc-btn2 a:after{
    content: "\f138";
    font-family:"FontAwesome";
    margin-left: 20px;
}

/*--------------------------------------

マイクロコピー付き　ボタン2

--------------------------------------*/

.mc-plus-btn2{

text-align: center;

margin: 1em 0 1.5em 0;

}

.mc-btn2{

display: inline-block;

padding: .2em .5em;

font-size: 1.3em;

font-weight: bold;

margin-bottom: 0!important;

}

.mc-btn2 .btn{

padding: .2em 2em;

}

.mc-text2{

display: inline-block;

vertical-align: middle;

font-size: 14px;

text-align: left;

padding-bottom: 4px;

}

.mc-text2 p{

margin:2px 0;

}

.mc-text2 p:before{

content: "\f058";

font-family:"FontAwesome";

margin-right: 8px;

}

.mc-btn2 a:after{

content: "\f138";

font-family:"FontAwesome";

margin-left: 20px;

}

パート③のコード

コメントありのコード（style.css用）

style.css（追加するコード：マイクロコピー付きボタン③）

/*--------------------------------------
マイクロコピー付き　ボタン3
--------------------------------------*/
.mc-plus-btn3{/*全体（文字とバタン）*/
    text-align: center;/*中央揃え*/
    margin: 1em 0 1.5em 0;/*外側の余白（上1em 下1.5em）*/
}
.mc-huki {/*吹き出しの設定*/
    display: inline-block;/*横並びになるように*/
    vertical-align: middle;/*縦方向の中央揃え*/
    position: relative;/*自由に動かせるように*/
    border: solid 1px #d1d1d1;/*枠線*/
    border-radius: 10px;/*角丸に*/
    padding: .5em 1.5em;/*内側の余白（上下.5em 左右1.5em）*/
    text-align: center;/*文字を中央揃え*/
}
.mc-huki p{/*吹き出しの中の文字*/
    margin-bottom: 0;/*下側の余白を削除*/
    line-height: 1.3;/*テキストの高さを小さく*/
}
.mc-huki:before{/*吹き出しに△を追加*/
    content: "";
    position: absolute;/*自由に動けるように*/
    top: 29%;/*上からの位置*/
    left: 100%;/*左からの位置*/
    border: 13px solid transparent;/*縦の長さ*/
    border-left: 17px solid #d1d1d1;/*横の長さ*/
}
.mc-huki:after {/*吹き出しに▲を追加*/
    content: '';
    position: absolute;/*自由に動けるように*/
    top: 32%;/*上からの位置*/
    left: 100%;/*左からの位置*/
    border: 12px solid transparent;/*縦の長さ*/
    border-left: 16px solid white;/*横の長さ*/
}
.mc-btn3{/*ボタン全体*/
    display: inline-block;/*横並びになるように*/
    margin-left: 15px!important;/*吹き出しとの余白*/
    width: 50%;/*長さ（※変更前70%）*/
}
.mc-plus-btn3 .btn{/*ボタン*/
    width: 100%;/*長さ100%*/
    padding: .5em 1.3em;/*内側の余白（上下.5em 左右1.3em）*/
    font-size: 1.3em;/*文字の大きさ*/
    font-weight: bold;/*太文字に*/
}
.mc-btn3 a:after{/*ボタンにアイコンを追加*/
    content: "\f138";/*お好きに変えてください*/
    font-family:"FontAwesome";
    margin-left: 20px;/*ボタンの文字との余白*/
}
/*****スマホで見たとき用*****/
@media screen and (max-width: 500px){/*ブライクポイント500px*/
.mc-huki:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 41%;
    border: 13px solid transparent;
    border-top: 17px solid #d1d1d1;
}
.mc-huki:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 42%;
    border: 12px solid transparent;
    border-top: 16px solid white;
}
.mc-btn3{
    width: 100%;
    margin-left: 0px!important;
}}

/*--------------------------------------

マイクロコピー付き　ボタン3

--------------------------------------*/

.mc-plus-btn3{/*全体（文字とバタン）*/

text-align: center;/*中央揃え*/

margin: 1em 0 1.5em 0;/*外側の余白（上1em 下1.5em）*/

}

.mc-huki {/*吹き出しの設定*/

display: inline-block;/*横並びになるように*/

vertical-align: middle;/*縦方向の中央揃え*/

position: relative;/*自由に動かせるように*/

border: solid 1px #d1d1d1;/*枠線*/

border-radius: 10px;/*角丸に*/

padding: .5em 1.5em;/*内側の余白（上下.5em 左右1.5em）*/

text-align: center;/*文字を中央揃え*/

}

.mc-huki p{/*吹き出しの中の文字*/

margin-bottom: 0;/*下側の余白を削除*/

line-height: 1.3;/*テキストの高さを小さく*/

}

.mc-huki:before{/*吹き出しに△を追加*/

content: "";

position: absolute;/*自由に動けるように*/

top: 29%;/*上からの位置*/

left: 100%;/*左からの位置*/

border: 13px solid transparent;/*縦の長さ*/

border-left: 17px solid #d1d1d1;/*横の長さ*/

}

.mc-huki:after {/*吹き出しに▲を追加*/

content: '';

position: absolute;/*自由に動けるように*/

top: 32%;/*上からの位置*/

left: 100%;/*左からの位置*/

border: 12px solid transparent;/*縦の長さ*/

border-left: 16px solid white;/*横の長さ*/

}

.mc-btn3{/*ボタン全体*/

display: inline-block;/*横並びになるように*/

margin-left: 15px!important;/*吹き出しとの余白*/

width: 50%;/*長さ（※変更前70%）*/

}

.mc-plus-btn3 .btn{/*ボタン*/

width: 100%;/*長さ100%*/

padding: .5em 1.3em;/*内側の余白（上下.5em 左右1.3em）*/

font-size: 1.3em;/*文字の大きさ*/

font-weight: bold;/*太文字に*/

}

.mc-btn3 a:after{/*ボタンにアイコンを追加*/

content: "\f138";/*お好きに変えてください*/

font-family:"FontAwesome";

margin-left: 20px;/*ボタンの文字との余白*/

}

/*****スマホで見たとき用*****/

@media screen and (max-width: 500px){/*ブライクポイント500px*/

.mc-huki:before {

content: "";

position: absolute;

top: 100%;

left: 41%;

border: 13px solid transparent;

border-top: 17px solid #d1d1d1;

}

.mc-huki:after {

content: '';

position: absolute;

top: 100%;

left: 42%;

border: 12px solid transparent;

border-top: 16px solid white;

}

.mc-btn3{

width: 100%;

margin-left: 0px!important;

}}

コメントなしのコード（style.css用）

style.css（追加するコード：マイクロコピー付きボタン③）

/*--------------------------------------
マイクロコピー付き　ボタン3
--------------------------------------*/
.mc-plus-btn3{
    text-align: center;
    margin: 1em 0 1.5em 0;
}
.mc-huki {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    border: solid 1px #d1d1d1;
    border-radius: 10px;
    padding: .5em 1.5em;
    text-align: center;
}
.mc-huki p{
    margin-bottom: 0;
    line-height: 1.3;
}
.mc-huki:before{
    content: "";
    position: absolute;
    top: 18px;
    left: 100%;
    border: 13px solid transparent;
    border-left: 17px solid #d1d1d1;
}
.mc-huki:after {
    content: '';
    position: absolute;
    top: 19px;
    left: 100%;
    border: 12px solid transparent;
    border-left: 16px solid white;
}
.mc-btn3{
    display: inline-block;
    margin-left: 15px!important;
    width: 50%;
}
.mc-plus-btn3 .btn{
    width: 100%;
    padding: .5em 1.3em;
    font-size: 1.3em;
    font-weight: bold;
}
.mc-btn3 a:after{
    content: "\f138";
    font-family:"FontAwesome";
    margin-left: 20px;
}
@media screen and (max-width: 500px){
.mc-huki:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 55px;
    border: 13px solid transparent;
    border-top: 17px solid #d1d1d1;
}
.mc-huki:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 56px;
    border: 12px solid transparent;
    border-top: 16px solid white;
}
.mc-btn3{
    width: 100%;
    margin-left: 0px!important;
}}

/*--------------------------------------

マイクロコピー付き　ボタン3

--------------------------------------*/

.mc-plus-btn3{

text-align: center;

margin: 1em 0 1.5em 0;

}

.mc-huki {

display: inline-block;

vertical-align: middle;

position: relative;

border: solid 1px #d1d1d1;

border-radius: 10px;

padding: .5em 1.5em;

text-align: center;

}

.mc-huki p{

margin-bottom: 0;

line-height: 1.3;

}

.mc-huki:before{

content: "";

position: absolute;

top: 18px;

left: 100%;

border: 13px solid transparent;

border-left: 17px solid #d1d1d1;

}

.mc-huki:after {

content: '';

position: absolute;

top: 19px;

left: 100%;

border: 12px solid transparent;

border-left: 16px solid white;

}

.mc-btn3{

display: inline-block;

margin-left: 15px!important;

width: 50%;

}

.mc-plus-btn3 .btn{

width: 100%;

padding: .5em 1.3em;

font-size: 1.3em;

font-weight: bold;

}

.mc-btn3 a:after{

content: "\f138";

font-family:"FontAwesome";

margin-left: 20px;

}

@media screen and (max-width: 500px){

.mc-huki:before {

content: "";

position: absolute;

top: 100%;

left: 55px;

border: 13px solid transparent;

border-top: 17px solid #d1d1d1;

}

.mc-huki:after {

content: '';

position: absolute;

top: 100%;

left: 56px;

border: 12px solid transparent;

border-top: 16px solid white;

}

.mc-btn3{

width: 100%;

margin-left: 0px!important;

}}

コードを追加したら、style.cssの保存＞アップデート＞キャッシュを削除して更新します。

まとめ：マイクロコピーをボタンに追加する

手順をザクッと説明

変更手順

WordPressのテキストエディタにコードをペタ。
style.cssに追加のコードを書き込んで、保存。アップロード。
更新して確認。
プラグインのAdd Quicktagにコードを登録して終了。

なんで3つも作ってしまったんだろう、、、

編集が今までで一番たいへんだったな