WordPressでサイトを作成しているときに、テーマでモバイルファースト（スマホ＋PCブラウザで両方よく見える）の両立をしていると思います。このとき楽天アフィリエイトの掲載方法について、「大きさ」「仕様」「中央揃え」の方法を解説します！
本記事では、Wordpssでサイトを作成しているときに、スマホ＋PCブラウザで両方よく見える楽天アフィリエイトの画像配置と中央揃えの方法を解説したいと思います。モバイルファーストのとき、スマホで見てもWEBで見ても、デザイン的に崩れないようにするためにどうするのが良いか検討しました。「意外と簡単ね結論」に到着。楽天アフィリエイトは、レスポンシブがないのですよね！普通に貼ると、WEBではよく見えても、スマホでは、右側にはみ出てしまいます。そんな問題を解決する簡単な方法を考えました。しばらくは、私はこれでやってみます。今後やるときに自分も忘れそうなので備忘録として書きます。
ここでやりたいことは、以下のような「アフィリエイトリンク」をつくることです。
ポイントは以下の点です。
この大きさの画像ならば、スマホでもはみ出ないので、問題ありません。
あと、価格は表示しないほうがアフィリエイトでは良いですね。
あとはデザイン上の問題で、中央揃えにしています。
まず、楽天アフィリエイトに登録しましょう。
楽天会員であれば、すぐに登録できますよ。
次に、通常の楽天ショップから、アフィリエイトに登録したい品物を探します。
そして、その品物が掲載されているURLをコピーします。
楽天ショップのページに行きURLをコピーするだけです。かんたんですね。
https://item.rakuten.co.jp/attract/xxxxxxxxxxxxxxxxxxxx/
などです。
もっと長い場合もありますが、とにかくすべてコピーしましょう。
次に、登録した楽天アフィリエイトを開きます。
上記でコピーしたURLをアフィリエイト作成の方に入力して、「作成」ボタンを押します。
ページの一番下にURLができます。しかしコピーは少し待って下さいね！
以下のレイアウトになるようにリンクをカスタマイズします。
WEBブラウザの場合は、右側カラムにカスタマイズ項目があります。
これを以下のように設定していきます。
ここが、一番悩むところでした。
いくつか中央揃えにする方法はあるのですが、カスタマイズの容易さから、以下の方法にしました。
アフィリエイトリンクの最初のタグの中にあるmarginタグを変更します。
以下のタグが、アフィリエイト リンクの最初にありますのでチェックしてください。
<table border="0" cellpadding="0" cellspacing="0"><tr><td><div style="background-color:#FFFFFF;width:250px;margin:0px;padding:5px 0;text-align:center;overflow:hidden;">
このなかから「margin:0px」を探して、「margin:auto」に変更します。
<table border="0" cellpadding="0" cellspacing="0"><tr><td><div style="background-color:#FFFFFF;width:250px;margin:auto;padding:5px 0;text-align:center;overflow:hidden;">
変更ポイントは以上です。
あとは、このアフィリエイトのリンクをWEBに貼り付けましょう！
お役に立てたら嬉しいです。
楽天アフィリエイトの設定方法として、Wordpssの最適画像配置と中央揃えの方法について考えました。また良い方法がありましたら更新します。
皆さん、こんにちは、優良な投資…
皆さん、こんにちは、優良な投資…
皆さん、こんにちは、優良な投資…
皆さん、こんにちは、優良な投資…