ブログを書くならせっかくだしアフィリエイトもやってみよう！
そう思って、審査がない優しい楽天アフィリエイトから始めてみたちゅーいんがーるです。
が！
いきなり壁がやってきました(笑)
どんな壁かというと、
アフィリエイト画像リンクを複数横並びでの中央寄せがきれいにできない・・・！！！
ということでした。
アフィリエイト記事を書いていると、1商品のみの紹介では収まらない場合もあり、
複数の画像リンクを縦に張り付けていくと、
どうしても間延びした見た目になってしまうなぁと思いました。
そこで、2つもしくは3つの画像リンクを横並びにして表示できないかと思い、
調べてやってみたところ、
今度は中央寄せがうまくできない・・・泣
もうイライラでした(笑)
あれこれ試行錯誤を重ね、そんな悩みをシンプルに解決することができましたので、
楽天アフィリエイト画像リンクをきれいに横並び中央寄せする方法をご紹介していきます！
複数の画像リンクを横並び表示させる手順
複数の画像を横並び表示させたい場合、「横並び」を使用します。
1．まずはブロックを追加し、「+」から「横並び」を選択。
2．横並びブロックの中に表示されている「+」をクリックし、「カスタムHTML」を選択する。
※もし画像のみでリンクではない場合は「画像」を選択します。
3．カスタムHTMLの「HTMLを入力」の部分にアフィリエイト画像リンクをペーストします。
4．カスタムHTMLの右端の点々から「グループ化」を選択します。
ここで注意なのが、必ずカスタムHTMLのブロックが選択された状態でグループ化してください。
間違って「横並び」でグループ化してしまうとうまくできません。
5．横並びブロックを選択した状態で右下の「+」からブロックを追加してもう一つ「カスタムHTML」を隣に入れ、左側同様に画像リンクのソースコードをペーストし、グループ化します。
6．最後に「横並び」のブロックを選択した状態で「中央揃え」をクリックします。
そうするとこのように表示されます↓（ちゅーいんがむ「マルベリーリーフティーラテ」ページより）
上の画像のように中央にされていればOKです！
注意点
もしやりかたや手順を間違えてしまうと、下の画像のような感じで
横に間延びした状態や、背景色の薄緑部分が広がって、画像だけ左に寄っているような状態
で公開されてしまいますので、
もしうまく表示されていない場合はもう一度手順を見返してみてくださいね。
また、楽天アフィリエイトのアフィリエイトリンクは
現時点ではまだレスポンシブ対応されていません！(2025年8月1日時点)
そのため、アフィリエイト画像リンクの画像サイズや品紹介文の位置などによっては
横並びしてもスマホからはみ出して表示されてしまったり、
そもそも横並びできない場合もあると知っておきましょう。
私が横並びにする際に行っている楽天アフィリエイトの画像リンク設定は、
・画像サイズ240×240
・商品名を移動を「下」に設定
・価格を非表示
・テキストを画像幅に合わせる
この条件で設定をしています。
また、今回は楽天アフィリエイトを対象にご紹介しましたが、
同様に横並び中央揃えで表示させる方法はほかのアフィリエイトリンクにも適応可能です。
楽天アフィリエイトを題材にした最大の理由は
私が知っているアフィリエイトの中で楽天アフィリエイトはレスポンシブ対応がされていないことが明白で、
自動でスマホサイズに最適化されないことから記事を作る段階で手作業で何とかする必要があったためです。
やってみると想定外にいろいろと手動でやらねばならないこともちらほら出てきますので、
アフィリエイトに挑戦する場合の小技として是非参考にしてみてくださいね♪
ちゅーいんがーるでしたー！
