ブログで稼ぐ

【テーマJIN】カスタムボタンをカスタマイズ&上手な導線活用テク

【テーマJIN】カスタムボタンをカスタマイズ&上手な導線活用テク

この記事では、テーマJINのカスタムボタンを視覚的に活用する方法についてまとめている。

ヘンリー
ヘンリー
テーマJINのカスタムボタンって具体的にどんな感じで使えばいいの?
ホロン
ホロン
アフィリエイトリンクに貼るのは定番だけど、導線としても使えるし、外部リンクを貼るときも便利だよ。カスタマイズの方法からおしゃれな表示の仕方まで詳しく解説していくね。

ワードプレスの人気テーマ『JIN』。

初心者でも簡単に使いこなすことができ、カラーからデザインまでカスタマイズが簡単な魅力的なテーマだ。

このHORONBLOG(ホロンブログ)でもJINを使って作成している。

テーマJINには色々な魅力が散らばっているので、一つ一つ解説していきたいところだが、今回は「カスタムボタン」をメインに解説していこうと思う。

記事内にポンと入っているだけで魅力的なボタン。

あなたはうまく活用できているだろうか?

基本的にリンクをクリックさせる上では、ボタンよりもテキストの方が良くCTR(クリック率)もテキストの方が高い。

だが、ボタンをうまく活用することで読者を視覚的に飽きさせないデザインに仕上げることができ、記事自体にまとまりを生み出す。

また、テキストリンクだけではパッと見、華やかさにかけるがボタンが加わることでアクセントを取り入れることができる。

そんなボタンについて、ブログやアフィリエイトでうまく活用する方法を詳しくまとめてみた。

それでは見ていこう。

JINのカスタムボタンをカスタマイズする方法

まずは、JINのカスタムボタンをカスタマイズする方法からだ。

JINでカスタムボタンをカスタマイズするには以下の手順で簡単にできる。

外観▶︎カスタマイズ▶︎ボタンデザイン設定▶︎カスタムボタンのカラー変更・横幅を調整・高さを調整など

また、追加CSSなどでカスタマイズすればグラデーションのボタンにしたり、カラフルにもできるわけだが、今回はそこは省略させて頂く。

JINのカスタムボタンはどこで使える?

ワードプレスを初めて間もない方であれば、どこにボタンがあるのか分からない方もいるかもしれない。

カスタムボタンを呼び出すのは簡単で、記事の投稿画面を開いたら「ビジュアル」と「テキスト」に切り替えれることが分かると思う。

カスタムボタンはビジュアルエディターでもテキストエディターでも両方から呼び出すことができる。

ビジュアルエディターの場合は、スタイル『カスタムボタン①』『カスタムボタン②』を押すだけ。

『カスタムボタン①』『カスタムボタン②』

するとこんな感じで現れる。

#HORONBLOG 

このままではダメなので、ちゃんとリンクを挿入してあげることを忘れないように。

リンクも入れるとこのように上手く表示される↓

#HORONBLOG

そして、テキストエディターの方では、2列目に『カスタムボタン1』『カスタムボタン2』というのがあるので、そちらをクリックするだけで綺麗に表示させることができる。

『カスタムボタン1』『カスタムボタン2』

詳細ページ

実際に使っていただければ分かるのだが、JINでカスタムボタンを呼び出す場合はテキストエディターの方が使い勝手がいい。

普通のボタンを呼び出すときもテキストエディターの方が便利なので、JINのボタンを記事内に導入したい場合は、テキストエディターから使うといいだろう。

JINのカスタムボタン×フォントオーサムがおしゃれ

続いて、JINのカスタムボタンとフォントオーサムを組み合わせたおしゃれな表示方法を紹介したいと思う。

フォントオーサムって何?

という人はとりあえずこちらの記事を読んで見てほしい。

→【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう

フォントオーサムを簡単にいうとブログ内で気軽に使えるアイコンだ。

このアイコンをJINのボタンに組み合わせることで、こんな感じに演出できる。

HORONBLOG

このように躍動感のあるボタンに仕上がるわけだ。

もちろん、全然そそられない方もいるかもしれないが、多くの読者からしたら動くものには目がいってしまうというもの。

例えば、次のような表示をすれば少なくともクリックしたくなるのではないだろうか?

HORON-公式ページ

このようにフォントオーサムのアイコン、さらにアイコンが動くように設定することで、魅力的な動くボタンを作ることができる。

ちなみに、上記のボタンのコードはこんな感じ。

<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のカスタムボタンの具体的な活用法を見ていこう。

基本的に次の3つが挙げられる

カスタムボタンの活用法
  1. アフィリエイト用
  2. 公式サイトの導線
  3. PR商品やサービスへの導線

アフィリエイト用

まず一つ目が定番のアフィリエイト用に使うことだ。

ASPから各案件のリンクを取ってきて、ボタンに貼り付けるだけ。

このとき『rel=”nofollow”』も同時に加えるようにして欲しい。

こんな感じ。

〇〇(商標)-公式ページ

<span class=”color-button02-big”><a href=”#” rel=”nofollow”>〇〇-公式ページ</a></span>

公式サイトの導線(target_blankも入れる)

2つ目の活用法が公式サイトの導線だ。

これはアフィリエイトに限らず、外部リンクとして紹介する際などにおすすめの方法である。

外部リンクをボタンに貼る際には基本的に『target=”_blank” rel=”nofollow noopener noreferrer”』をつけておけばSEO的に上手く機能してくれる。(もちろん、全てに当てはまるとは限らないが、詳しく解説しても初心者の方は頭がこんがらがると思うので、これからゆっくり上記のコードの意味を飲み込むようにしていって欲しい。)

公式ページ

<span class=”color-button02-big”><a href=”#” target=”_blank” rel=”nofollow noopener noreferrer”>公式ページ</a></span>

PR商品やサービスへの導線

3つ目の活用法が商品PRやサービスへの導線に使うことだ。

基本的にボタンは導線として活用することができるのだが、自分がLP(商品を売り込むページ)を作る時などにも使いやすい。

これから数年単位でブログを作成していくのであれば、間違いなく自分の商品を持つことになり、それを販売する機会が出てくるだろう。

そんな時、自分自身で商品を売るためのページを作らなければならない。

それがLP。

アフィリエイトの案件を見てみると分かりやすいがLPは視覚的に魅力を発揮しながらCTRを高めるような構成、ボタンの配置ができあがっている。

そのため、これからLPを作って自分の商品を売っていくような時にはぜひ人気商品のLPを参考にし、ボタンの配置や見せ方・デザインなどを真似てみるといいだろう。

カスタムボタンのおすすめ配置位置

カスタムボタンのおすすめ配置位置だが、確実にクリックして欲しいところには僕は使わないようにしている。

理由はシンプルで、テキストリンクの方がクリックしてもらいやすいからだ。

だから、僕の場合は次のような部分でうまく導入している。

おすすめ配置位置

1、テキストリンクを何度も入れてくどいと感じた頃にボタン型のリンクを導入

2、別にクリックされなくてもいい部分(例えば、アフィリエイト目的でない公式サイトの紹介など)

3、記事のデザイン上見栄えが良くなる位置(下から2つ目の見出し2など)

読者の読みやすさを想定して、ボタンを配置することが一番重要であるため、記事ごとに配置位置は変えた方がいいが、ポイントとしては上の3つを押さえておけば間違いない。

HORON式ボタンを使った誘導の仕方

僕の場合は、さらにボタンのCTR(クリック率)を高めるために、次のような表示の仕方でカスタムボタンを使用している。(ホロン式)

\今すぐCheck!/

HORON-公式ページ

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>

\今すぐCheck!/の他にこんな表示もできる

\60秒で登録完了!/
詳細ページ

\お得なキャンペーン開催中!/
詳細ページ

\今だけ初回980円!/
詳細ページ

ちなみに、『\(バックスラッシュ)』はバックスラッシュとキーボードでうち、変換を押すと出てくる。

『/(スラッシュ)』こっちはスラッシュとキーボードで打って、変換するだけ。

半角か全角で統一するのもポイントだ。

半角:\読んでくれてありがとう!/

全角:\読んでくれてありがとう!/

僕は全角の方で使うようにしている。

【テーマJIN】カスタムボタン使いこなし技まとめ

ということで今回はカスタムボタンを徹底的に使い倒すテクニックを解説してみた。

カスタムボタンを記事内に取り入れることによって、一癖あるおしゃれな記事に仕上がる。

また、テキストリンクだけよりも、ボタンを取り入れたリンク構成の方がクリック率も高いので、うまく記事内に施してあげるのが重要だ。

特にJINの場合は、簡単にボタンのコードを呼び出すことができるので、ぜひどんどん利用していくべきだ。

ただし、外部リンクやアフィリエイトリンクを貼る際には先ほど紹介した、『rel=”nofollow”』や『target=”_blank” rel=”nofollow noopener noreferrer”』を忘れないようにして欲しい。

長くなってしまったが、結構優良な情報を提供できたと思う。

ホロンブログでもカスタムボタンを記事内にちりばめているので、どんな感じで配置しているか?その目で実際に確かめて頂けると嬉しい。

ホロン
ホロン
この記事を読んで良かったと思った方はSNSでシェアして頂けると嬉しいです!
ABOUT ME
ホロン Z世代の経営者
アパレルブランド経営・海外規模の事業展開中。 友達とつるむことに飽きて一人でお金稼ぎを始めたら、気付いた時にはとんでもない境地まで辿り着いてしまった21歳。 一応神戸にある大学の首席。(現在4回生) 啓発書とビジネス書LOVER
毎日600円の自動収益を発生させる仕組みを作る方法!
毎日600円の自動収益を発生させる仕組みを作る方法!

お金が欲しいあなたにお金稼ぎのノウハウを紹介!

→モッピー×YouTubeで毎日600円の安定収益を発生させる仕組みを10日で作る方法【再現性100%

確実に毎日600円発生させる仕組みを作る方法を1から全て解説いたします。

この通りに真似するだけである程度の収益が発生することを断言。

詳しくはこちらのページをどうぞ!

\今すぐCheck!/

商品ページ

2980円