こんにちは、ナカムです。
本日は「バナー広告を中央に合わせる方法」を解説します。
本記事で分かる内容
• 左右によっているバナー広告を中央に合わせる
• 見た目が良くなる
今回の記事では、「左右によっているアフィリエイト広告を中央に合わせたいんですが…」という悩みを解決します。
先に方法をお伝えします。HTMLの上部と下部にタグを追加するだけです。
上部:<center>
下部:</center>
□バナー広告は左右によっていると離脱される
ブログを拝見していると、広告が左右によっている状態をよく見かけます。これは非常にもったいないです。
何がもったいないのかをいいますと。
結論:ブログの読者は細かい所に違和感を感じる。
結論の通りです。
読者は、ちょっとした違和感を感じるとアフィリエイト広告をクリックしてくれません。広告から離脱されてしまう可能性が高くなります。
なぜならば、ほとんどの広告は、初めて見たときに怪しさを感じます。しかも、表示の位置がズレていると「クリックしたい!」という気持ちが半減しますよね。
○ASPバナー広告
WordPressでウェジット(サイドバー)にASPのバナー広告を貼り付けている方は多いです。
広告は、ASPからコピペするだけでブログに表示できます。しかし、そのままでは位置がズレる場合もあるので注意が必要です。
余談ですが、稼げるASPのバナー広告については「【稼ぐ】誰でも自動収益が作れる人気のアフィリエイトASP 11選」を参考にしてくださいね。
□バナー広告を中央に表示する方法
バナー広告を中央に表示させる方法を解説します。ズレた場合と中央に設定した表示を比較の画像は次の通りです。
左より表示
中央表示
上記のようにバナー広告が左にズレているのと、中央に表示されている違いは分かりますよね?
率直に、中央の方が見た目もいい感じです。次は、バナー広告を中央に表示させる方法を解説します。
これは、簡単なので誰でもすぐにできます。
□バナー広告を中央に表示させる方法
今回は、サイドバーのバナーを中央に表示させる方法を解説します。
結論:タグ付けのみです。
結論の通りで、「タグ」を付けるだけでサクッと中央に表示させることが可能です。20秒ぐらいで完了します。
手順は次の通りです。
AFFINGERの「外観」→「ウィジェット」→「00_STINGERカスタムHTML」→「サイドバートップ」→「バナー広告」→「タグ追加」→「完了」
○タグ無しバナー
下記の画像は、HTMLをそのまま貼り付けただけです。このままでは、左よりになります。
○タグありバナー
下記は、「タグ」をHTMLの上下に付けた状態です。これでバナー広告が中央に表示されます。
タグは、こちらになります。コピペでOKです。(半角英数字)
上部:<center>
下部:</center>
再度、中央に表示されたバナー広告を見てみましょう。見た目が中央に表示されている方が読者もクリックをしたくなりますよね。
上部のバナーは、国内の暗号資産取引所を展開している「bitFlyer」です。ビットコインやイーサリアムなどに興味がある方は、すぐに口座開設ができますのでどうぞです。
詳しくは、「暗号資産取引所 bitFlyer(ビットフライヤー)の登録方法 手数料を解説」を参考にしてくださいね。
□ウェジェットおまけ
ウィジェットのおまけとして、記事の中にTwitterフォローボタンを表示させる方法について紹介します。
下記のようにフォローボタンを出すことが可能です。
○Twitterフォローボタンの表示方法
手順は次の通りになります。
AFFINGERの「外観」→「ウィジェット」→「カスタムHTML」→「投稿記事タイトル下に一括表示」→「HTMLを追加」→「完了」
表示の方法は、ご自身のTwitterアカウントを「カスタムHTML」の中に追加します。これだけです。
ウィジェットの「投稿記事タイトル下に一括表示」を選択すれば、記事のタイトル下に「○○さんをフォロー」の表示が出ます。Twitterフォローのきっかけになるのでおすすめです。
下記の「アカウント」と記載されている2ヶ所に、ご自身のTwitterアカウントを入力します。
HTML
<a href="https://twitter.com/アカウント?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @アカウント</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
下記のCopyをクリックすると、コピーされます。
html
<a href="https://twitter.com/アカウント?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @アカウント</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
これだけでフォローボタンが表示されます。フォローボタンを活用してくださいね!
□バナー広告を中央に合わせる方法まとめ
最後に内容の要点をまとめます。
本記事で分かる内容
• バナー広告を中央によせることでクリックの離脱を防ぐ
• 「タグ」をHTMLの上下に追加する
左右によっているバナー広告を中央に表示させるだけで読者の違和感は減少します。ちょっとしたことで、離脱されてしまっては、非常にもったいないですね。
中央に合わせる方法は、「タグ」を追加するだけなのでサクッと20秒のコピペで終わります。
ぜひとも早速、活用してくださいね!
補足として、nakamublogでは国内シェアNo.1、エックスサーバー株式会社の「エックスサーバー 」と「Xserverドメイン
」を使用しています。
無料ブログに比べると、お金はかかりますが「Google AdSense」「アフィリエイト」を使用してじゃんじゃん収益が出せます。
合わせて、WordPressテーマとして大人気の「ACTION(AFFINGER6)」は、ボタン、レイアウトなどのカスタムが最初からたくさん入っているのでおすすめです。
もしよかったら活用してくださいね!
最後にタグの貼り付けておきます。それではまた。
上部:<center>
下部:</center>