もしもアフィリエイトどこでもリンクの画像の大きさを調整する方法

2025-04-04

An illustration representing the concept of custom

Last Updated on 04-04-25 by Shinichi

Table of Contents

もしもアフィリエイトの「どこでもリンク」画像の大きさを調節

もしもアフィリエイトの「どこでもリンク」を利用する際、画像リンクという便利な機能があります。一部の画像はドラッグ操作でサイズを変更することができますが、正確に調整できない場合もあります。そのような場合には、HTMLやCSSを活用することで、アフィリエイトリンクの情報を保持しながら画像サイズを柔軟にカスタマイズできます。このガイドでは、HTMLやCSSを使用してどこでもリンクの画像サイズを効果的に調整する方法をわかりやすく解説します。

もしもアフィリエイト無料会員登録はこちらからできます。

もしもアフィリエイトどこでもリンク

もしもアフィリエイトのどこでもリンクを使用するには、以下の手順を実行してください。どこでもリンクには、テキストリンクと画像リンクの2種類がありますが、ここでは画像リンクを選択する流れを説明します。

1. もしもアフィリエイトにログインする

まず、もしもアフィリエイトの管理画面にログインします。

2. どこでもリンクを作成する

管理画面から「プロモーション検索」に移動し、プロモーションを選択します。
対象のプロモーションで「どこでもリンク」を選択し、そのプロモーションのホームページなどリンク先を選択します。
「画像リンク」を選択し、リンク先URLを指定します。プロモーションのホームページにある画像を選択することが多いと思います。
必要に応じて、表示したい画像のURLも指定します。
指定が完了したら、「どこでもリンクを作成する」でリンクを生成します。

3. リンクを取得する

生成されたHTMLコードを取得します。
このHTMLコードをコピーして、ウェブサイトやブログに貼り付けます。

これにより、どこでもリンクを簡単に設定し、画像リンクをカスタマイズできます。

画像URL

生成されたHTMLコードの中で画像を指定する部分は、以下のような<img src=...>で始まる行です。ここでは、具体的な例として以下のコードを使用します。

<img src="https://afreshstart1.com/wp-content/uploads/2024/12/Updated_image_with_text.jpg" style="border:none;" alt="アフィリエイト画像">

こちらの画像です。

画像は初期設定ではオリジナルサイズのまま表示されますが、デザインに合わない場合はサイズを調整する必要があります。一部の画像はドラッグ操作で直感的にサイズを変更できますが、すべての画像で適切に調整できるわけではありません。その場合は、HTMLやCSSを使用して最適なサイズを指定することをお勧めします。上記の画像指定コードに必要な調整を加え、どこにどのような変更が加わるのかを確認してください。

1. インラインCSSで画像サイズを変更する方法

インラインCSSを使用することで、HTMLコード内に直接スタイルを記述し、画像サイズを調整できます。

例:

<img src="https://afreshstart1.com/wp-content/uploads/2024/12/Updated_image_with_text.jpg" 
     style="width: 300px; height: auto; border: none;" alt="アフィリエイト画像">

width: 300px;: 画像の幅をピクセル単位で指定します。
height: auto;: 高さをアスペクト比に合わせて自動調整します。

この方法は迅速に画像サイズを調整したい場合に便利です。

2. HTMLの属性でサイズを指定する方法

HTMLのwidthおよびheight属性を使用して、画像サイズを指定することも可能です。見ての通り、これが一番簡単なのではと思います。

例:

<img src="https://afreshstart1.com/wp-content/uploads/2024/12/Updated_image_with_text.jpg" 
     width="300" alt="アフィリエイト画像">

この例では幅のみを指定しており、高さはアスペクト比に基づいて自動調整されます。

3. CSSクラスを使った高度な方法

CSSを使用してスタイルを外部ファイルや<style>タグ内にまとめると、コードがすっきりし、複数の画像に同じスタイルを適用できます。

例:

<style>
  .affiliate-image {
    max-width: 100%;
    height: auto;
    border: none;
  }
</style>

<img src="https://afreshstart1.com/wp-content/uploads/2024/12/Updated_image_with_text.jpg" 
     class="affiliate-image" alt="アフィリエイト画像">

max-width: 100%;: 画像の幅を親要素内に収める設定です。
height: auto;: アスペクト比を維持して画像を調整します。

この方法は、レスポンシブデザインにも適しています。

4. メディアクエリを使ったレスポンシブ対応

異なる画面サイズに応じて画像のサイズを変えるには、CSSのメディアクエリを使用します。

例:

<style>
  .responsive-affiliate {
    width: 100%;
    max-width: 500px;
    height: auto;
  }

  @media (max-width: 600px) {
    .responsive-affiliate {
      max-width: 300px;
    }
  }
</style>

<img src="https://afreshstart1.com/wp-content/uploads/2024/12/Updated_image_with_text.jpg" 
     class="responsive-affiliate" alt="アフィリエイト画像">

デフォルト設定: 最大幅を500pxに設定。
メディアクエリ: 画面幅600px以下では最大幅を300pxに変更。

どこでもリンクの画像サイズを調整する理由

デザインの統一性: 画像サイズを統一することで、サイト全体の見た目が整います。
読み込み速度の改善: 適切なサイズに調整することで、ページの読み込み時間が短縮されます。
レスポンシブデザイン: モバイルユーザーにも最適な表示を提供できます。

実際の記事

ここで紹介した方法を多用した記事がこちらです。

Hands-On Japanese Cooking Classes in Japan: Perfect for Tourists and Residents via My Kitchen

もしもアフィリエイトどこでもリンクの画像の大きさを調整する方法　まとめ

もしもアフィリエイトのどこでもリンクに使用する画像サイズをHTMLやCSSで簡単に調整する方法をご紹介しました。これらのテクニックを活用することで、デザイン性の高いウェブサイトを構築し、ユーザー体験を向上させることができます。

不明点や質問があれば、ぜひコメント欄でお知らせください！

リンク

Web Creation

アメリカで生きる