この記事では、テーマJINのカスタムボタンを視覚的に活用する方法についてまとめている。
ワードプレスの人気テーマ『JIN』。
初心者でも簡単に使いこなすことができ、カラーからデザインまでカスタマイズが簡単な魅力的なテーマだ。
このHORONBLOG（ホロンブログ）でもJINを使って作成している。
テーマJINには色々な魅力が散らばっているので、一つ一つ解説していきたいところだが、今回は「カスタムボタン」をメインに解説していこうと思う。
記事内にポンと入っているだけで魅力的なボタン。
あなたはうまく活用できているだろうか？
基本的にリンクをクリックさせる上では、ボタンよりもテキストの方が良くCTR（クリック率）もテキストの方が高い。
だが、ボタンをうまく活用することで読者を視覚的に飽きさせないデザインに仕上げることができ、記事自体にまとまりを生み出す。
また、テキストリンクだけではパッと見、華やかさにかけるがボタンが加わることでアクセントを取り入れることができる。
そんなボタンについて、ブログやアフィリエイトでうまく活用する方法を詳しくまとめてみた。
それでは見ていこう。
Contents
JINのカスタムボタンをカスタマイズする方法
まずは、JINのカスタムボタンをカスタマイズする方法からだ。
JINでカスタムボタンをカスタマイズするには以下の手順で簡単にできる。
外観▶︎カスタマイズ▶︎ボタンデザイン設定▶︎カスタムボタンのカラー変更・横幅を調整・高さを調整など
また、追加CSSなどでカスタマイズすればグラデーションのボタンにしたり、カラフルにもできるわけだが、今回はそこは省略させて頂く。
JINのカスタムボタンはどこで使える？
ワードプレスを初めて間もない方であれば、どこにボタンがあるのか分からない方もいるかもしれない。
カスタムボタンを呼び出すのは簡単で、記事の投稿画面を開いたら「ビジュアル」と「テキスト」に切り替えれることが分かると思う。
カスタムボタンはビジュアルエディターでもテキストエディターでも両方から呼び出すことができる。
ビジュアルエディターの場合は、スタイル『カスタムボタン①』『カスタムボタン②』を押すだけ。
するとこんな感じで現れる。
このままではダメなので、ちゃんとリンクを挿入してあげることを忘れないように。
リンクも入れるとこのように上手く表示される↓
そして、テキストエディターの方では、２列目に『カスタムボタン１』『カスタムボタン２』というのがあるので、そちらをクリックするだけで綺麗に表示させることができる。
実際に使っていただければ分かるのだが、JINでカスタムボタンを呼び出す場合はテキストエディターの方が使い勝手がいい。
普通のボタンを呼び出すときもテキストエディターの方が便利なので、JINのボタンを記事内に導入したい場合は、テキストエディターから使うといいだろう。
JINのカスタムボタン×フォントオーサムがおしゃれ
続いて、JINのカスタムボタンとフォントオーサムを組み合わせたおしゃれな表示方法を紹介したいと思う。
フォントオーサムって何？
という人はとりあえずこちらの記事を読んで見てほしい。
→【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう
フォントオーサムを簡単にいうとブログ内で気軽に使えるアイコンだ。
このアイコンをJINのボタンに組み合わせることで、こんな感じに演出できる。
このように躍動感のあるボタンに仕上がるわけだ。
もちろん、全然そそられない方もいるかもしれないが、多くの読者からしたら動くものには目がいってしまうというもの。
例えば、次のような表示をすれば少なくともクリックしたくなるのではないだろうか？
このようにフォントオーサムのアイコン、さらにアイコンが動くように設定することで、魅力的な動くボタンを作ることができる。
ちなみに、上記のボタンのコードはこんな感じ。
<span class=”color-button01-big”><a href=”#”>HORON-公式ページ<i class=”fas fa-angle-double-right fa-fw faa-passing animated”></i></a></span>
フォントオーサムのアイコン＋動きだけのコードはこうなっている。
<i class=”fas fa-angle-double-right fa-fw faa-passing animated”></i>
コピペするだけ（テキストエディタに）で使えるので、ぜひ参考にしてみてほしい。
フォントオーサムを動かすには『HTMLタグ設定』でhead内にコードを記述しないといけないのだが、そのやり方も先ほど紹介した記事にまとめられている。
ボタンの活用法
次にJINのカスタムボタンの具体的な活用法を見ていこう。
基本的に次の３つが挙げられる
- アフィリエイト用
- 公式サイトの導線
- PR商品やサービスへの導線
アフィリエイト用
まず一つ目が定番のアフィリエイト用に使うことだ。
ASPから各案件のリンクを取ってきて、ボタンに貼り付けるだけ。
このとき『rel=”nofollow”』も同時に加えるようにして欲しい。
こんな感じ。
<span class=”color-button02-big”><a href=”#” rel=”nofollow”>〇〇-公式ページ</a></span>
公式サイトの導線（target_blankも入れる）
２つ目の活用法が公式サイトの導線だ。
これはアフィリエイトに限らず、外部リンクとして紹介する際などにおすすめの方法である。
外部リンクをボタンに貼る際には基本的に『target=”_blank” rel=”nofollow noopener noreferrer”』をつけておけばSEO的に上手く機能してくれる。（もちろん、全てに当てはまるとは限らないが、詳しく解説しても初心者の方は頭がこんがらがると思うので、これからゆっくり上記のコードの意味を飲み込むようにしていって欲しい。）
<span class=”color-button02-big”><a href=”#” target=”_blank” rel=”nofollow noopener noreferrer”>公式ページ</a></span>
PR商品やサービスへの導線
３つ目の活用法が商品PRやサービスへの導線に使うことだ。
基本的にボタンは導線として活用することができるのだが、自分がLP（商品を売り込むページ）を作る時などにも使いやすい。
これから数年単位でブログを作成していくのであれば、間違いなく自分の商品を持つことになり、それを販売する機会が出てくるだろう。
そんな時、自分自身で商品を売るためのページを作らなければならない。
それがLP。
アフィリエイトの案件を見てみると分かりやすいがLPは視覚的に魅力を発揮しながらCTRを高めるような構成、ボタンの配置ができあがっている。
そのため、これからLPを作って自分の商品を売っていくような時にはぜひ人気商品のLPを参考にし、ボタンの配置や見せ方・デザインなどを真似てみるといいだろう。
カスタムボタンのおすすめ配置位置
カスタムボタンのおすすめ配置位置だが、確実にクリックして欲しいところには僕は使わないようにしている。
理由はシンプルで、テキストリンクの方がクリックしてもらいやすいからだ。
だから、僕の場合は次のような部分でうまく導入している。
１、テキストリンクを何度も入れてくどいと感じた頃にボタン型のリンクを導入
２、別にクリックされなくてもいい部分（例えば、アフィリエイト目的でない公式サイトの紹介など）
３、記事のデザイン上見栄えが良くなる位置（下から２つ目の見出し２など）
読者の読みやすさを想定して、ボタンを配置することが一番重要であるため、記事ごとに配置位置は変えた方がいいが、ポイントとしては上の３つを押さえておけば間違いない。
HORON式ボタンを使った誘導の仕方
僕の場合は、さらにボタンのCTR（クリック率）を高めるために、次のような表示の仕方でカスタムボタンを使用している。（ホロン式）
＼今すぐCheck!／
LPなどでよく使われている手法だが、ちょっと一手間加えるだけでも、心を揺さぶるようなボタンに仕上がる。
コード
<p style=”text-align: center; padding-bottom: 0px;”>＼今すぐCheck!／</p>
<span class=”color-button02-big”><a href=”#（ここにURLをコピペ！）”>HORON-公式ページ<i class=”fas fa-angle-double-right fa-fw faa-passing animated”></i></a></span>
＼60秒で登録完了！／
＼お得なキャンペーン開催中！／
＼今だけ初回980円！／
ちなみに、『＼（バックスラッシュ）』はバックスラッシュとキーボードでうち、変換を押すと出てくる。
『／（スラッシュ）』こっちはスラッシュとキーボードで打って、変換するだけ。
半角か全角で統一するのもポイントだ。
半角：\読んでくれてありがとう！/
全角：＼読んでくれてありがとう！／
僕は全角の方で使うようにしている。
【テーマJIN】カスタムボタン使いこなし技まとめ
ということで今回はカスタムボタンを徹底的に使い倒すテクニックを解説してみた。
カスタムボタンを記事内に取り入れることによって、一癖あるおしゃれな記事に仕上がる。
また、テキストリンクだけよりも、ボタンを取り入れたリンク構成の方がクリック率も高いので、うまく記事内に施してあげるのが重要だ。
特にJINの場合は、簡単にボタンのコードを呼び出すことができるので、ぜひどんどん利用していくべきだ。
ただし、外部リンクやアフィリエイトリンクを貼る際には先ほど紹介した、『rel=”nofollow”』や『target=”_blank” rel=”nofollow noopener noreferrer”』を忘れないようにして欲しい。
長くなってしまったが、結構優良な情報を提供できたと思う。
ホロンブログでもカスタムボタンを記事内にちりばめているので、どんな感じで配置しているか？その目で実際に確かめて頂けると嬉しい。
こんにちはホロンです。
突然ですが、 動画や電子書籍を無限に複製して 収入をガンガン増やすことが可能な 「情報販売」という職業をご存じですか？
パソコン１台で家から出ずに 年間６億円の利益を得ている講師による 情報を販売して自動的に 収入を得るための方法を 「基礎から応用」まで公開しています。
今だけ「特別プレゼント」もお渡ししていますが、 24時間限定となりますので、 チャンスを逃さないよう ご注意ください。 ↓↓↓
月収100万円をラクに達成するためのテンプレート「New Game+」
■卑怯すぎる裏技を公開 今回あなたにお伝えする 「情報販売」の手法は すでに月収100万円プレーヤーを 多数生み出していて、 中には3ヶ月で2300万円を 達成してしまった人もいる、 効果実証済みの手法です。
人間の購買意欲を強く刺激することも可能な 「危険な技術」を含むので 絶対に悪用しないでください。
・2019年だけで年間6億円の利益を得ている講師が使っている 「禁断の文章テンプレート」
・「卑怯すぎるカンニング」をして 勝てる勝負だけに挑む方法 (※もちろん合法です)
・不労所得を生み出す「自動販売機」を ネット上に設置する方法 上記のような強烈な内容を含むので、 人数と期間を限定しての公開となります。
詳細はこちらからご確認ください。 ↓↓↓
月収100万円をラクに達成するためのテンプレート「New Game+」
＼今すぐCheck！／
本気で100万を望んでいる人しか見ないでください。ガチです。
