【もしも】「かんたんリンク」をスマホで小さく表示されるようにカスタマイズ!

【もしも】「かんたんリンク」をスマホで小さく表示されるようにカスタマイズ! ノウハウ

もしもアフィリエイトの「かんたんリンク」は簡単に、Amazon・楽天市場・Yahooショッピングのリンクを一瞬で作成できるので、すごく便利ですよね。

そのまま貼り付けるだけで、このようにキレイに表示されるので、手を加える必要がないのが良いですよね。

 

パソコンで見るとスマートに見える「かんたんリンク」ですが、スマートフォンなどの小型デバイスで見ると大きすぎて、見た目が良くないですよね。(ボタンも全てオレンジ色だし・・・)

「かんたんリンク」をスマホで小さく表示されるようにカスタマイズ!

 

本記事では、もしもアフィリエイトの「かんたんリンク」をスマートフォンでの表示を小さくするのと併せて、リンクのボタンの色とサイズをクリックされやすいようにカスタマイズする方法を紹介します。

 

 

かんたんリンクのスマホ表示は大きすぎ

普段、記事を書いているのはパソコンという人が多いと思います。かんたんリンクをパソコン画面で見るとバランス良く表示されていますよね。しかし、スマートフォンで見ると画面いっぱいにリンクが表示されてしまいます。

「かんたんリンク」をスマホで小さく表示されるようにカスタマイズ!

記事内容だけでなく、リンクも読み手側を意識することが必要です。画面いっぱいに広告のリンクが表示されて嬉しいと思う人はいないです。

サイトを開いた時に、アドセンス広告が画面いっぱいに表示されるサイトとか見かけませんか?「うわっ」て思い画面を閉じますよね。つまり、同じように記事を読んでいる最中に画面いっぱいの”かんたんリンク”が表示されると「うっとうしい、じゃま!」と感じるユーザーが多いのです。

記事を書いている側からすると、クリックして欲しいですよね?それなら記事内容だけでなくリンクも読み手側のことを考えてカスタマイズが必要です。

 

 

かんたんリンクのボタンはダサすぎ

「かんたんリンク」をスマホで小さく表示されるようにカスタマイズ!

かんたんリンクのAmazon・楽天市場・Yahooショッピングの”ボタン”は、すべてオレンジ色です。オレンジ色で統一感があるようにも見えますが、ダサいですよね。

ダサいというのは言い過ぎかもしれませんが、一つ言えるのは「押したい!」と思えるボタンの色ではないですよね。事実として、月間PVが多いサイトほどサイトのテーマデザインとあわせてボタンのデザインも変更しています。

このブログに関しても、テーマのデザインの変更にあわせて変更しています。

参考までにお話をすると、リライトをしていない記事で「かんたんリンク」のみを貼り付けて効果があるか1ヵ月ほど様子を見ました。結果としては、ボタンのクリック率は2割程向上しました。収益はチロルチョコ300個ほど増えました。

PV数や収益は個人差はありますが、クリック率は確実に増えているので、ユーザーがクリックしたくなるようにボタンデザインを変更をすべきと言えます。

 

 

かんたんリンクをスマホ表示にカスタマイズ

【もしも】「かんたんリンク」をスマホで小さく表示されるようにカスタマイズ!

最近はパソコンでサイトを見るよりも、スマホで見るという人の方が多くなってきています。つまり普段パソコンで記事を作成している人は、スマホで見ることを意識して書く必要があります。

同じように、広告リンクもスマホで見やすいように変えていかなければいけないということです。

かんたんリンクは文字通り”かんたん”にリンクを作ることができますが、あくまでデフォルトの状態なので、そのまま使うのは良くないです。読み手側には、スマホ画面いっぱいに表示され”邪魔”でしかないからです。

 

本ブログのテーマはCocoonを使用しています。かんたんリンクはスマホで小さく表示されるようにカスタマイズしています。

パソコン画面の変更前と変更後はこのような感じです。

「かんたんリンク」をスマホで小さく表示されるようにカスタマイズ!

 

スマホ画面の変更前と変更後はこのような感じです。

「かんたんリンク」をスマホで小さく表示されるようにカスタマイズ!

 

スマホ表示のカスタマイズ方法

「かんたんリンク」をスマホで小さく表示されるようにカスタマイズするのは、WordPress管理画面から簡単にできます。

 

①WordPressの管理画面から外観の「テーマエディター」をクリック

「かんたんリンク」をスマホで小さく表示されるようにカスタマイズ!

 

②CSSは自分の好みのものを作成して下さい。
Cocoonテーマ以外を使用している人で、CSSを公開している人がいますので、参考にすると良いです。Cocoonテーマ用のCSSとして公開されていない場合は、そのまま貼り付けは絶対に止めましょう。

パソコンとスマホで問題ないことを確認しましたが、後日Google先生よりお叱りのメールが来ました。。(幸いにもブログを見て下さっていた方からすぐに指摘があったので何事もなく済みました。)

 

③カスタマイズしたCSSをstyle.cssに追記して「ファイルを更新」をクリック

「かんたんリンク」をスマホで小さく表示されるようにカスタマイズ!

 

以上で、かんたんリンクをスマホで小さく表示させたり、ボタンの色を自由に自分の好きなデザインに変更することができます。

自分のブログに合うデザインのCSSを作成してみてはいかがでしょうか。

スマホ表示を小さくするためにカスタマイズした後の「かんたんリンク」はこんな感じです。ボタンもタップで少し色が変化します。

 

まとめ

今回の記事をまとめます。

・「かんたんリンク」のスマホ表示は大きすぎる。
・デフォルトのボタンは全てオレンジ色で押されづらい。
・ボタンをカスタマイズすることでクリック率アップ。
・「かんたんリンク」のカスタマイズ方法はとても簡単。
・ブログで紹介されているCSSをそのまま貼るとGoogleから怒られる。
 (※WordPressテーマが一緒なら問題なし)
・リンクも自分のブログデザインに合わせよう。

 

コメント

タイトルとURLをコピーしました