【HTML初心者向け】アフィリエイトリンク画像を左・中央・右揃えにする方法

2025-04-04

Last Updated on 04-04-25 by Shinichi

HTMLコードを使ってアフィリエイトリンク画像を「左揃え」「中央揃え」「右揃え」にする方法を解説します。
「WordPressやHTML編集画面で画像を簡単に配置したい」という方に役立つ内容です。

Table of Contents

HTMLコードを使った画像揃えの基本

まず、アフィリエイトリンク画像を揃えるには、HTMLコードでスタイル（CSS）を指定します。基本的な例を以下に紹介します。アフィリエイトリンクのコードの最初に<div style="text-align: left;">、最後に</div>を入れます。LeftはCenterやRightに変更して調整します。

1. 左揃えにする方法

左揃えにするには、style="text-align: left;"を使用します。以下のコードを参考にしてください。

<div style="text-align: left;">
    <a href="アフィリエイトリンクURL">
        <img src="画像URL" alt="商品説明" />
    </a>
</div>

画像が左端に配置されます。テキストと組み合わせる場合も、左揃えのレイアウトになります。

2. 中央揃えにする方法

中央揃えは、style="text-align: center;"で指定します。

<div style="text-align: center;">
    <a href="アフィリエイトリンクURL">
        <img src="画像URL" alt="商品説明" />
    </a>
</div>

画像が中央に配置され、均等に見えます。特に目立たせたい商品やプロモーションにおすすめです。

3. 右揃えにする方法

右揃えには、style="text-align: right;"を使います。

<div style="text-align: right;">
    <a href="アフィリエイトリンクURL">
        <img src="画像URL" alt="商品説明" />
    </a>
</div>

画像が右端に配置されます。ページ全体のバランスを調整したい場合に便利です。

画像サイズを変更したい場合

画像のサイズを調整する場合は、widthやheightを使って指定します。以下の例を参考にしてください。

<div style="text-align: center;">
    <a href="アフィリエイトリンクURL">
        <img src="画像URL" alt="商品説明" width="300" height="200" />
    </a>
</div>

width="300"は幅を300pxに設定します。
height="200"は高さを200pxに設定します。
幅や高さはお好みに合わせて調整してください。

注意点

レスポンシブ対応
スマホやタブレットでもレイアウトを崩さないよう、CSSで以下のように設定すると便利です。

<div style="text-align: center;">
    <a href="アフィリエイトリンクURL">
        <img src="画像URL" alt="商品説明" style="max-width: 100%; height: auto;" />
    </a>
</div>

画像に説明文を付ける
アフィリエイトリンク画像には、説明文（alt属性）を必ず設定しましょう。検索エンジンの評価にもつながります。

実際の活用シーン

商品紹介ページで複数の画像を使いたいとき
ページ全体のデザインに合わせて配置を調整したいとき
アフィリエイト収益をアップさせるために見やすいデザインを作りたいとき

アフィリエイトリンク画像を左・中央・右揃えにする方法　まとめ

画像の配置は、ブログやウェブサイトのデザインを整えるうえでとても重要な要素です。今回紹介した「左揃え」「中央揃え」「右揃え」を使い分ければ、訪問者にとって見やすく、魅力的なページを作成できます。また、HTMLコードを活用することで、より細かなデザイン調整が可能です。ぜひ、実際のブログ運営に役立ててみてください！

リンク

Web Creation

アメリカで生きる