楽天アフィリエイトの商品リンクを中央寄せにする簡単な方法

楽天アフィリエイトで商品リンクを作り、ワードプレスやブログに貼りつけると、自動的に左寄りになってしまいます。

ブログでは画像を中央に配置することが多いので、楽天商品リンクだけ左に寄っているのは見栄えが悪いですね。

楽天アフィリエイトの商品リンクを、中央寄せにする簡単な方法を説明します。

 

楽天アフィリエイトの商品リンクを中央に配置する

分かりやすい簡単な方法

詳しい説明や理屈はいいから、中央揃えをする方法だけ知りたい！という人向けに、簡単な説明をします。

 

1. 楽天アフィリエイトの商品リンクを取得する

2. 商品リンクの一番最初にある、以下のコードを削除する

3. 削除したところに、以下のコードを入力する

4. 商品リンクの一番最後にある、以下のコードを削除する

5. 削除したところに、以下のコードを入力する

コピー＆ペーストすると、間違いなく入力できます。

 

このように、楽天アフィリエイトの商品リンクを中央に配置するのは、とても簡単です。

もし、「どうしてこうなるの？」を詳しく知りたいなら、次の章も読んでいってくださいね。

興味がなければ、ここで終わりにしてもらって大丈夫です♪

 

より詳しい説明

商品リンクを取得する

【elevele エレベレ】デザイナーズ ねこハウス ウールフェルト製 ハンドメイド 北欧 キャットハウス 猫ハウス ネコハウス ペットハウス 猫ベット 猫ベッド ネコベット ネコベッド キャットベット キャットベッド ペットベット ペットベッド 価格：18700円（税込、送料無料) (2020/10/28時点) 楽天で購入

 

楽天アフィリエイトから、商品リンクを取得したままの状態でブログの編集画面に貼りつけると、上のように商品が左寄せになってしまいます。

そのうえ、商品リンクの周りにさらに囲いができてしまうので、ブログデザインに合わなくなってしまうことも。

今回は、以下の処理をして、商品リンクの見映えを良くしていきましょう。

　・商品リンクを大きく囲っている線を消す

　・商品リンクを中央寄せにする

楽天アフィリエイトの商品リンクコードは、1行になっていますが、ここでは見やすいように＜＞単位で区切って改行しています（一部コードを省略／設定によっては内容が違うこともあり）

これが、楽天アフィリエイトの商品リンクのコード全体になります。

えー！　ごちゃごちゃしてなにがなんだか分からないよ！　難しい！

……と不安になるかもしれませんが、ぜんぜん大丈夫です。

あなたが編集しなければいけないのは、ハイライト（黄色になっている部分）、3行目と24行目だけ！

4～23行目は無視してOK。

コード全体を見ると難しそうですが、このあとの作業はとても簡単なので、最後まで読み進めてくださいね。

 

商品リンクを囲っている線を消す

 

まずは、商品リンクを囲っている線を消しました。

これだけでもスッキリしますね。

3行目と24行目の記述を、すべて削除します。

楽天アフィリエイトの商品リンクは、ずらずらと一行で表示されているので、最初と最後の部分のタグ＜＞を「3つずつ」削除すると覚えておきましょう。

間違えないように、しっかり確認してくださいね。

これで、商品リンクを囲っている線が消えました。

 

商品リンクを中央寄せにする

 

商品リンクが中央になりました。

これで中央寄せが完成です！

3行目と24行目の記述を、追加入力します。

「商品リンクの最初と最後に追加する」と覚えておきましょう。

テーブルタグを削除したところに、代わりに入力するというイメージです。

コピー＆ペーストを使って入力すると、コードを間違えません。

改行は入れてもいいし、入れなくてもどちらでも大丈夫です。

 

まとめ

楽天アフィリエイトの商品リンクを、中央寄せにする簡単な方法を説明しました。

もし「ブログに書いてある通りにやってみたけど、商品リンクがどうしても中央に表示されない！」ということがあれば、お気軽にお問い合わせくださいね。

一見すると難しそうな商品リンクのコードですが、実はとても単純な仕組みで成り立っていることも、分かってもらえたら嬉しいです。

HTMLの仕組みが分かってくると、商品リンクの設置も楽になるので、少しずつ覚えていくことをおすすめします。