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

訂正
アフィリエイトリンク用に書き換えました。(2018.9.6)

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


カスタマイズは自己責任で!
ワードプレステーマ
SANGO
子テーマ
PORIPU

この記事では
ボタンにマイクロコピーを追加するカスタマイズを説明。
マイクロコピーをボタン周りに入れたいなぁ
補足でつけたりする文字のことやな、細部に神は宿るっていうしやってみれば?
よっしゃ!やってやんよ!

このサイトの環境

テーマ
子テーマ
プラグイン

こんな感じに変更(PC)

Before

普通のボタン

After

ー パターン① ー

パート1

 

ー パターン② ー

パート2

 

ー パターン③ ー

パート3


ほんまもんのリンク

 

ー パターン① ー

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

今すぐ申し込む

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

 

ー パターン② ー

今すぐ申し込む

30日間無料トライアル

登録は5分で完了

 

ー パターン③ ー

20,000人

が利用中

今すぐ申し込む

 

上に入れる文字

下に入れる文字

 

nanntena

nanntena

 

20,000人

が利用中

いきおい余って3つも作ったよ!ぼくのサイトではスマホでもちゃんと表示されました!
 
ボタンの文字が長いときは、ごめんなさいやな

使うソフトなどはこちら

必須

WordPressWordPress

グーグルクロームGoogle Chrome

推奨

ファイルジッラFile zilla

サブクライムテキストsublime text

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

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

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

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

 

テキストエディタ(追加するコード:パート①)
テキストエディタ(追加するコード:パート②)
テキストエディタ(追加するコード:パート③)

 

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

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

 

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

 

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

カスタマイズ方法

追加CSSの手順
外観
カスタマイズ
追加CSS
子テーマの手順
外観
テーマの編集
FTPソフトの手順
FTPソフト起動
自サイトに接続
style.cssを開く

追加CSSの使い方はこちら

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

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

パート①のコード

パート1

style.css(追加するコード:マイクロコピー付きボタン①)

パート②のコード

パート2

style.css(追加するコード:マイクロコピー付きボタン②)

パート③のコード

パート3

style.css(追加するコード:マイクロコピー付きボタン③)
変更点(2018-08-31)
パート③がデバイス幅によって、想定される動きと違う場合があります。そのため.mc-btn3width70%から50%に変更いたしました。吹き出しの文字数によっては更に変更する必要があるかもしれません。

 

確認の手順
保存ボタンを押す
ブラウザでキャッシュを削除して更新

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

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

プラグイン仕様例
登録しておけばこんな感じで簡単にボタンを挿入できます
MEMO
プラグインのAdd Quicktagに追加する前に、ボタンの装飾をよく使うものに変更しておきましょう。

 

 

URLだけの入力の場合

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

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

テキストエディタ(追加するコード:パート①)
テキストエディタ(追加するコード:パート②)
テキストエディタ(追加するコード:パート③)

 

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

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

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

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

パート①のコード

パート1

style.css(追加するコード:マイクロコピー付きボタン①)
style.css(追加するコード:マイクロコピー付きボタン①)

パート②のコード

パート2

style.css(追加するコード:マイクロコピー付きボタン②)
style.css(追加するコード:マイクロコピー付きボタン②)

パート③のコード

パート3

style.css(追加するコード:マイクロコピー付きボタン③)
style.css(追加するコード:マイクロコピー付きボタン③)

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


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

追加CSSのまとめ

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

なんで3つも作ってしまったんだろう、、、
編集が今までで一番たいへんだったな