アフィリエイト 物販

楽天アフィリエイト商品リンクの中央揃え方法!【ワードプレス/HTML】

楽天アフィリエイト バナー 広告 画像 商品リンク ワードプレス ブログ 収益化 アドセンス 配置 中央寄せ 中央揃え 中央表示 HTML CCS

僕がブログ収益化に利用している、主な広告がgoogleアドセンスですが、

これと並行して状況に応じて配置しているのが楽天アフィリエイトですね。

恐らく、ブログ収益化をされている方々の中でもアドセンスと楽天アフィリエイトの組合せで収益化をされている方は多いと思います。

で、今回紹介するのは、楽天アフィリエイト画像商品リンク中央揃えの方法です!

それでは、ご覧ください!

 

 

楽天アフィリエイトの商品リンク(画像バナー)の中央揃え方法!【ワードプレス/HTML】

まず大前提として、この方法は「HTML」での方法です。

僕の場合は、ワードプレス(WordPress)でHP作成していますのでそのベースとなる言語がそれになりますね。

そして、恐らくこのページに辿り着かれた方は、実際の作業でリアルタイムで困ってしまった方かと思います!

そのためまずは要点だけ、早速、解説していきたいと思います!

 

HTMLでの楽天広告バナー中央配置方法

実施いただきたいのは以下のHTMLコードを追加してあげることです!

 

<div align="center">
楽天広告バナー
</div>

もしくは、

<center>
楽天広告バナー
</center>

 

※コピーしてお使いください!

 

 

ということで、たったこれだけで完了です!

あっさりですね~(笑)

早速、ご自身のサイトで実施し確認してみてください!

と、

言いつつも、念のため実例を紹介しておきますね!

 

楽天アフィリ商品リンク(画像バナー)のHTML中央寄せの実践例!

お分かりかもしれませんが、どこに貼り付けるかというと、記事作成画面のテキストですね!

ワードプレスだとビジュアルエディタテキストエディタがありますからお間違いなきよう!

そして、実際の記載方法はこんな感じになります!

 

コード入力前の画像バナー配置

楽天アフィリサイトで広告コードをそのまま貼り付けた場合、以下のような左寄せの状態で配置されます。

楽天アフィリエイト バナー 広告 画像 商品リンク ワードプレス ブログ 収益化 アドセンス 配置 中央寄せ 中央揃え

 

テキストエディタでのコード入力<div>

上で紹介した中央寄せコード<div>を広告バナーソースの前後に入力します。

※以下画像の黄色マーカー部

楽天アフィリエイト バナー 広告 画像 商品リンク ワードプレス ブログ 収益化 アドセンス 配置 中央寄せ 中央揃え

 

テキストエディタでのコード入力<center>

上で紹介した中央寄せコード<center>を広告バナーソースの前後に入力します。

※以下画像の黄色マーカー部

楽天アフィリエイト バナー 広告 画像 商品リンク ワードプレス ブログ 収益化 アドセンス 配置 中央寄せ 中央揃え

 

コード入力後の画像バナー配置

真ん中に配置されました

楽天アフィリエイト バナー 広告 画像 商品リンク ワードプレス ブログ 収益化 アドセンス 配置 中央寄せ 中央揃え

 

 

 

という具合で画面中央への配置が超簡単に出来るようになります!

とは言え、実はこのコードに辿り着くまでには、色々と試練がありまして…

いくつかの方法でトライしたのですが、中央揃えが出来そうな方法でもそうならない事例もあったんですよね。

最後にそういった事例を紹介して終わりにしたいと思います!

 

【失敗例】楽天広告バナーの中央配置はこの方法じゃできなかった…

ここでは、中央揃えしたいときに思い浮かぶ簡単そうな手法でトライして中央に配置できなかった事例を2つ紹介します!

 

ワードプレス / ビジュアルエディタでのダイレクト指示

ビジュアルエディタ上で画像をクリックすると出てくる配置コマンドをクリックしても何も起きませんでした…

原理が分かっていれば、納得できるのかもしれませんが、その理解は残念ながら出来ていません…

 

楽天アフィリエイト バナー 広告 画像 商品リンク ワードプレス ブログ 収益化 アドセンス 配置 中央寄せ 中央揃え

 

ワードプレス / 画像詳細設定

上記の詳細画面で選択しても何も起きませんね。

 

楽天アフィリエイト バナー 広告 画像 商品リンク ワードプレス ブログ 収益化 アドセンス 配置 中央寄せ 中央揃え

 

最初に中央表示する為に思いつくことはこのあたりかな、と思いますが、残念ながらそう簡単に行かないところに多少の難しさを感じます。

ですが、これは知っているか、知らないかの話ですから、知識を積み重ねていけば全然簡単なことだと思います!

ブログ作成作業で楽になる方法は、この繰り返しも重要ですね!

 

副業で成功したいならサバイバルしよう!!!!!

まぼ mabo ネットビジネス ブログアフィリエイト コンサルティング 副業 起業 脱サラ

 

今すぐ無料で登録する


  • この記事を書いた人
  • 最新記事

mabo-sp

2児の父であり現役サラリーマン。趣味は釣りを筆頭とするアウトドアですね~。 イメージはどこにでもいる普通過ぎる30代の男ですが、そんな僕が直近の目標としているのが脱サラ&独立… そんなことが出来る時代がやってきました! 普通は叶えられない時間とお金を手に入れて家族に、趣味に、充実した人生を送るぞぉ~!

-アフィリエイト, 物販
-, , , , ,

© 2020 まぼ公式HP