アフィリエイトボタンを作成したなら、他のブログでよく見るような目立つボタンにしたいですよね！
ボタンの上にある装飾のような小さなテキスト、あれは何て言うんだろう？
\こういうの!!/
ボタンの上下に見られる小さな文字の文章、それが「マイクロコピー」と呼ばれるものです。
「JIN:R」や「SWELL」などの最新テーマでは簡単にマイクロコピーを作れる機能が用意されていますが、「JIN」の場合少し工夫が必要です。
それでも、マイクロコピーをつけてカッコよく仕上げたい！
というわけで、方法を探してみました。
結論：コピペで簡単に作れた！
ボタンの上の部分にだけなら簡単にマイクロコピーを追加することができます。
こちらのJIN Forumの情報を参考に解決することができました！
この記事では追加情報とともに、手順を画像付きでまとめた備忘録として解説します。
アフィリエイトリンクボタンを作る方法はこちらの記事もぜひ参考にどうぞ！
JINでマイクロコピーを作る：手順
まずはWordPressの管理画面からスタートです
1. 外観 → カスタマイズ → 追加CSSに以下をコピペ
.cps-post-main .my-microCopy {
margin: 10px 0 0px;
padding-bottom: 0;
}
以下、画像で説明していきます。
まず管理画面の左側のメニューから「外観」を選択します。
「カスタマイズ」を開きます。
「追加CSS」を開きます。
空いているところにコピペします。
2. 投稿画面で「段落」にして文字を入力
ここから記事投稿画面です
段落ブロックをボタンの上に追加し、マイクロコピーとして表示したいテキストを入力します。
3. 高度な設定 → 追加CSSクラスに「my-microCopy」と入力
段落ブロックの右側の設定メニューから「高度な設定」を開きます。
「追加CSSクラス」の欄に、my-microCopyと入力してください。
4. 中央に合わせる
中央表示のボタンであれば、テキストもボタンの上に来るようにします。
「テキスト中央寄せ」を選びます。
テキストが中央寄せになりました。
5. プレビューで確認
最後にプレビューで正しく表示されているか確認しましょう。
余分な空白が無く、綺麗に表示されたら完成！
注意点
ここまでの方法でマイクロコピーを作ることは可能ですが、少しだけ注意点があります。
それはマイクロコピーをつける対象ブロックの仕様によっては、調節が必要ということです。
シンプルボタン（カスタムボタン）、画像、シンプルボックス、見出し付きボックス、もしもアフィリエイトのかんたんリンクなどは、綺麗にマイクロコピーが表示されますが…
リッチボタンの場合
すぐ上のブロックでマイクロコピーを作ると、文字にボタンが被ってしまいます。
編集画面でこんな感じでも…↓
プレビュー画面で見るとこう↓
なので、段落ブロックを一つはさんでみてください↓
プレビューするとこんな感じに表示されます↓
商品リンクの場合
私は商品リンクを作る場合、「もしもアフィリエイトかんたんリンク」と「Rinker」のどちらかを利用しています。
もしもアフィリエイトのかんたんリンクは、下記のとおり綺麗に表示されます↓
Rinkerで作成した商品リンクは、すぐ上のブロックにマイクロコピーを作っても、間隔が空いてしまいます↓
この行間を調節する方法、、ごめんなさい！簡単にできそうな方法を見つけることができませんでした。。泣
私は現状、「このくらいの間隔であれば許容する」か、「もしもアフィリエイトかんたんリンクを使用する」といった手段をとっています。
具体的な解決策がないのになぜこの情報を書いたかというと、
この間隔が空く現象に気がついた時、「追加CSSがページによって効いていないのでは？」と勘違いしてしまったからです。
そして「追加CSSが反映されない時の対処方法」を探してブラウザのキャッシュをクリアしてみたり、見慣れないデベロッパーツールを開いてみたり。
このように私は変な回り道をしてしまったので、これを読んでくれたあなたは時間をロスしないようにと情報をシェアさせていただきました。
それはそれで勉強にはなったけど…全然、見当違いのところでジタバタしてしまいました（笑）
JINでマイクロコピーを作る：補足情報
上記の方法では全部の文言をテキスト入力で作る必要があります。
例えば「\セール開催中/」のような装飾付きマイクロコピーを作る際、「/」「／」はキーボードに表記がありますが、「\」（バックスラッシュ）の入力方法に悩むことがあるかもしれません。
そもそも「バックスラッシュ」って読むんだコレ。知らなかった
名称を知ってれば「バックスラッシュ」と入力して変換するだけでも出てくるよ
以下、キーボードで入力する方法もまとめておきます。
バックスラッシュ（\）の入力方法
PC操作に長けた人は読み飛ばしてOKです。
Windowsの場合
- 日本語キーボードの場合
- 半角入力モードに切り替える（「英数」モード）。
- 「¥キー」を押す（エンターキーの左側にあるキー）。
- 日本語キーボードでは、このキーはバックスラッシュと円記号（¥）を切り替えて表示しますが、通常は環境によって適切にバックスラッシュとして認識されます。
- 英語キーボードの場合
- 「Shiftキー」を押しながら「\キー」を押す。
- このキーは、通常リターンキー（Enterキー）の右側や、バックスペースキーの下あたりにあります。
- 「Shiftキー」を押しながら「\キー」を押す。
Macの場合
- 日本語キーボードの場合
- 「英数モード」に切り替える。
- 「Optionキー（⌥）+ ¥キー」を同時に押す。
- 英語キーボードの場合
- 「Shiftキー + \キー」を押す。
- キーの位置はWindowsと同じくリターンキーの右側またはその近くにあります。
- 「Shiftキー + \キー」を押す。
ポイント
- 日本語キーボードの場合、環境によって「\（バックスラッシュ）」が「¥（円記号）」として表示される場合があります。ただし、HTMLやプログラムで使用する際には「\」として認識されることがほとんどです。
- 英語キーボードを使うと、日本語キーボード特有の混乱（¥と\の違い）が起きないため、より分かりやすいです。
まとめ：JINでも追加CSSでマイクロコピーは作れる！
「JIN」は「JIN:R」や「SWELL」に比べて価格が安いため、導入のハードルが低いのが魅力です。
そのため、初心者が選ぶことも多いテーマですよね。
「JIN」は初心者向けテーマとしてまだまだ人気
これからJINを使い始めた人は私のように悩むこともあるかと思ったので、記事にまとめてみました。
今回の方法がJINユーザーさんの悩み解決につながれば嬉しいです。
ぜひ、試してみてくださいね。
