リンク画像の表示範囲指定の方法が知りたい

2023/10/15 17:29

このQ&Aのポイント

ＦＣ２のブログでアフィリエイトをしていますが、著作権の関係で画像を加工することはできません。そこで、リンク画像の表示範囲を指定する方法を知りたいです。
具体的には、余白部分をトリミングしたり、見せないようにして詰めて表示する方法があるのか知りたいです。
例えば、以下の2つのリンク画像を指定した場合、画像の表示範囲を制限する方法を教えてください。

ベストアンサー

リンク画像の表示範囲指定の方法が知りたいです！

2008/08/16 19:12

ＦＣ２のブログでアフィリエイトをしてます。次のような2つのリンク画像を載せる場合、余白部分をトリミング、あるいは見せないようにして詰めて表示する方法はありませんか？画像は著作権の関係で、ダウンロードして加工はできないので。 <a href="http://www.dmm.com/digital/book/-/detail/=/cid=ipapy_1-104167/" target="_blank"><img src="http://pics.dmm.com/digital/photo/1-104167/1-104167pm.jpg" alt="" border="0"></a> <a href="http://www.dmm.com/digital/book/-/detail/=/cid=ipapy_1-104167/" target="_blank"><img src="http://pics.dmm.co.jp/digital/photo/1-104167/1-104167sl.jpg" alt="" border=""></a>

yuukisyou
お礼率50% (3/6)

ブログ
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

SortaNerd
ベストアンサー率43% (1185/2748)

2008/08/18 09:51 回答No.1

難しいですね。 margin指定をマイナスにすることで画像の上に画像を重ねることはできますが、片方の余白がもう一方の画像本体部分にかからないようにする必要がありますので、余白1つ分は残ってしまいます。一応、margin指定の方法は次のようにします。 <img src="～" style="margin:-10 0 -10 0; position:relative; z-index:-1"> marginを指定しただけだと上の行の文字にかかってしまうので、z-indexで高さ指定を本文より低くしておく必要があります。 position:relativeはこれをしないとz-indexが使えないので。既に他にposition指定があった場合はレイアウトが崩れるかもしれません。

質問者

お礼 2008/08/18 20:07

丁寧な説明ありがとうございました。おっしゃる通り、かなり難しいですね（笑）。時間を掛けて調整すればできないことはないですが、時間が掛かる上にレイアウトが崩れるのでは、効率が悪いので諦めます。どおりでググっても、有効な解決策が見つからなかった訳ですね。

関連するQ&A

ウインドウを狭めてもレイアウトが崩れない方法
ウインドウを狭めてもレイアウトが崩れない方法を教えて下さい。内容は、一番上にタイトルとしての画像を表示させて、その下に画像を３列で何列ものせる。ウインドウを大きく広げたときは、それらの画像を中央に表示させてレイアウトを崩さないようにする。下のような感じでは、ウインドウを狭めると画像が勝手に移動してしまいます。全てを固定にしたいです。お手本を教えて頂きたいです。よろしくお願いいたします。添付画像が理想です。ウインドウを狭めても画像が固定されている瞬間をイメージ化したものです。 <img src="" border="0" width="300" height="60" /> <br> <br> <br>         <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <br>         <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <br>         <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a>
- ベストアンサー
- HTML
ヤプログ　画像リンクができない
ヤプログを利用しています。スキンを作るため、素材屋さんへのリンクを貼りたいのですがバナーの画像が表示されなくて困っています。リンクはできているのですが添付してある画像のようになってしまいます。タグは↓です。 <a href="リンク先URL" target="_blank"><img　src="画像のURL" alt="" border="0"></a> どこか違っているのでしょうか…。御手数ですが、なるべく詳しく、わかりやすく教えていただけますでしょうか。よろしくお願い致します。
- 締切済み
- ブログ
アフィリエイトリンクの画像のサイズを変更するには？
現在Seesaaでブログを開設していますが、そのブログの中にA8.netにある楽天アフィリエイトリンクをA8wappenで作成しています。そこで、質問なのですが、リンク画像のサイズを変更したいのですが、やり方がわかりません。因みにＨＴＭＬは下記のとおりです。 <a href="http://～" target="_blank"> <img border="0" alt="Click Here!" src="http://～.jpeg"></a> <img border="0" width="1" height="1" src="http://～" alt=""> 上のwidthやheightの数値を変えてみたのですが、上手くいきません。よろしくお願いします。
- ベストアンサー
- ブログ
HTMLの画像のリンクについて
ページ内にインラインフレームを作成し画像サムネイルをクリックするとフレーム内に表示するという感じにしたいのですが、フレームサイズを500×500にしたので、このサイズを超える画像を表示するとページのスタイルが崩れてしまいます。元画像のリサイズをせずに表示させる方法はないでしょうか？構造は以下のようになってます。 <html> <head> <title>photo</title> </head> <body BGCOLOR="007777"> <br><br> <iframe NAME="photo" WIDTH="500" HEIGHT="500" FRAMEBORDER="0" ALIGN="right"></iframe> <br><br><br> <p> 　　　<a HREF="gazou1.jpg" TARGET="photo"><IMG SRC="gazou1.jpg" ALT="" WIDTH="50" HEIGHT="50" BORDER="0"></a> <a HREF="gazou2.jpg" STYLE=""><IMG SRC="gazou2.jpg" ALT="" WIDTH="50" HEIGHT="50" BORDER="0"></a> </body>
- ベストアンサー
- その他（インターネット・Webサービス）
ランダムリンクにて
現在お小遣いサイトを開設したいと思っています。そして、リードメールなどのダウンサポートが出来るように現在、 JavaScriptを利用して、ランダムリンクを取り入れようと思っているのですが、リンク時のIDの部分のみランダムになるようにするにはどのようにすれば良いのでしょうか？現在取り入れているのは下記ですが、 kensu=2; num=Math.floor(Math.random()*kensu); if (num==0){document.write('<a href="http://xxxx?ID1" target="_blank"><img border="0" alt="ID1" src="http://xxxx.gif"></a>');} if (num==1){document.write('<a href="http://xxxx?ID2" target="_blank"><img border="0" alt="ID2" src="http://xxxx.gif"></a>');} 理想としては http://www.h7.dion.ne.jp/~kalno/h_terrier.html こちらのようにしたいです。 JavaScriptの中身を拝見させてもらいましたが、数値等がよく解りません。出来ればこのようなJavaScriptのやり方が掲載されているサイト等がありましたら教えて下さい。
- 締切済み
- JavaScript
jQueryプラグイン「Skitter」でリンク
jQueryプラグイン「Skitter」でリンクについて jQueryプラグイン「Skitter」でリンクについてわからないことが２点ございます。まず、画像の淵に青色のラインが入る（IMGの「 border="0"」が効かない）あと、インラインフレーム内で動かし、変わる画像のリンク指定を全ウィンドウ（target="_parent"）に指定したいのですが、これもうまくいきません。。。ぜひお助けいただきたいと思っております。よろしくお願いします。 ↓例えば下記のように３つの画像を指定した場合にborderもtargetもききません。 <div class="box_skitter box_skitter_large"> <ul> <li> <a target="_blank" href="http://www.yahoo.co.jp/"><img src="http://thumbnail.image.rakuten.co.jp/@0_mall/calmlife/cabinet/detai..." border="0" class="circles" ></a> </li> <li> <a target="_blank" href="http://www.google.co.jp/"><img src="http://thumbnail.image.rakuten.co.jp/@0_mall/calmlife/cabinet/detai..." border="0" class="circles" ></a> </li> <li> <A target="_blank" href="http://www.rakuten.co.jp/"><IMG src="http://thumbnail.image.rakuten.co.jp/@0_mall/calmlife/cabinet/detai..." border="0"></A> </li> </ul> </div>
- 締切済み
- JavaScript
画像のパスを教えてください
画像のパスを教えてください <a href="http://blog-imgs-24.fc2.com/n/i/c/niconicosaikou/aaa.jpg" target="_blank"><img src="http://blog-imgs-24.fc2.com/n/i/c/niconicosaikou/aaa.jpg" alt="ニコニコ動画君" border="0" /></a><br clear="all" />
- 締切済み
- HTML
リンク付き画像を右よりに表示するには？divタグ
<a href="http://○○" target="_blank"> <img src="http://○○" border="0" /></a> というタグを、ページの右に表示させたいのですが、どうやって、表示させればいいのでしょうか？ divタグで挟むことをなんとなくわかったのですが、 divタグをどのように使えばいいのかわかりません。 cssで表示させる方法を教えてください。今の状態でアップロードすると、自動で左寄りに表示されてしまいます
- 締切済み
- HTML
テーブル幅を完全に指定したい
テーブル幅の指定方法を教えてください。以下のような記述のテーブルを何列も羅列して表を作ろうと思っています。 alt="小A"～alt="小D" のところは項目ごとのアイコン画像が入り、その項目に該当するものが無い場合は空白となるような表です。実際にブラウザで表示してみると、widthの設定はしているのに、空白をつくると若干ですが横幅が変わってしまい、表として並べたときにそのズレが目立ちます。何がいけないのか、お知恵を拝借できませんでしょうか。宜しくお願い致します。以下、その表の一部であるテーブルになります。 <table bordercolor="#ffffff" width="520" height="80" align="center" cellspacing="3"> <tr><td bgcolor="#ffcccc"> <table> <tr> <td width="100" bgcolor="#ffcccc" align="center" valign="middle"> <a href="★" target="_blank"><img src="■.gif" width="80" height="60" border="0" class="pict"/></a> </td> <td width="260" align="left" valign="center"> あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよ </td> <td valign="center"> <img alt="中" src="■.gif" width="80" height="60" class="pict" /> </td> <td width="25"><a href="★" target="_blank"><img alt="小A" src="■.gif" width="25" height="60" class="pict" /></a></td> <td width="25"><a href="★" target="_blank"><img alt="小B" src="■.gif" width="25" height="60" class="pict" /></a></td> <td width="25"><a href="★" target="_blank"><img alt="小C" src="■.gif" width="25" height="60" class="pict" /></a></td> <td width="25"><a href="★" target="_blank"><img alt="小D" src="■.gif" width="25" height="60" class="pict" /></a></a></td> </tr> </table></td></tr></table>
- ベストアンサー
- HTML
指定時間ごとに画像とリンク先を変えるには？
バナーが指定時間ごとに変わるページを作りたいと思っているのですが下記のソースではどうもうまくいきません。 <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=x-sjis"> <TITLE>指定時間毎に画像とリンク先を変えるには？</TITLE> </HEAD> <BODY BGCOLOR="#ffffff" onLoad="banner()"> <SCRIPT language="JavaScript">  </SCRIPT> <a href="http://www.test.co.jp/ng" NAME="photo"><IMG SRC="img/1.jpg" NAME="photo" ALIGN="BOTTOM" WIDTH="60" HEIGHT="110" BORDER="0"></a> </BODY> </HTML> 画像は変わるのですがリンク先が変わらないようで…。どなたかご指示をいただけないでしょうか？
- 締切済み
- その他([技術者向] コンピューター)