Loading....
最近の投稿:

Article

拡大表示される画像を修正

今回は商品画像のサイズに関しての
改造方法をご紹介します。

かねてより気になっていたのですが、
アラジンサイトで表示される画像の中に
やけに拡大されて表示されるものがあります。

例えばこんな感じです。

●商品リストで拡大表示された画像

画像幅を64pxに固定

●商品詳細で拡大表示された画像

画像幅を128pxに固定

多分、こんな画面を見た事がある人もいるでしょう。

楽天アフィリの規約では、画像のサイズを
変更してはいけないとあるので、
これでは、楽天の規約違反とされる
可能性が高いと思います。(というか、されます。)

なんでこんな事になるかと言うと、
アラジンでは画像の横幅を64pxや128pxに
固定している為で、普通の画像では
問題ないのですが、縦長の画像の場合には
横幅が64pxや128pxに満たない為、
拡大表示されてしまうのです。

そもそも楽天の規約で画像のサイズを
変更してはいけないとある様に、
楽天APIで取得できる画像も、64pxや
128pxのサイズの画像が提供されているので、
それを変更する必要は無い訳です。

私感ですが、
アラジンでこの様な処理を行っているのは
画像が無い商品の為だと思います。

アラジンでは画像を固定で表示しているので、
画像が存在しない場合には画像の枠に
商品名(ショップが付ける商品説明的なもの)が
表示され、横長になってしまうケースがあるのです。
この場合、全体のレイアウトが崩れてしまいます。

例えばこんな感じです。

●画像が無い為全体のレイアウトが崩れるケース

画像が無いとレイアウトが崩れる

この為、画像の横幅を固定していると思います。

解決方法ですが、
横幅指定のwidthの代わりに
max-widthを使用できると便利なのですが、
これは未だ利用者が多いと思われる
IE6以前で未対応の為、諦めて、
画像の有無を判断して
画像の表示/非表示を切り替える方法を
ご紹介します。

ちなみにこの改造を行った場合の
画面がこんな感じです。

●商品リストで拡大表示されていた画像

画像幅を未指定

●商品詳細で拡大表示されていた画像

画像幅を未指定

●画像が無いケース

画像が無いケース

では、改造方法です。

※本ページで記載している行番号はオリジナルのソースでの行番号になります。
他のページで紹介している改造を行っている場合は行番号が異なっている可能性があるので、参考にあげているコードを目印に改造箇所を探し出して下さい。

※どうしても改造箇所が判らない方は、コメントなりメールで質問して下さい。その際、どうして判らないかを具体的に説明して頂けるとスムーズに回答できますので、宜しくお願いします。

楽天API用ライブラリの修正

lib\rakutenAPI.phpに対する修正

行番号 : 29
  public $shop_name;
この行の直後に下記コードを追加します。
  public $imageFlag;
行番号 : 61
(上記修正前は60行目)
      $this->genre_id=$body->genreId;
この行の直後に下記コードを追加します。
      $this->imageFlag=$body->imageFlag;
行番号 : 96
(上記修正前は94行目)
                        'shop_name'=> $body->shopName,
この行の直後に下記コードを追加します。
                        'imageFlag'=> $body->imageFlag,
行番号 : 131
(上記修正前は128行目)
                        'shop_name'=> $body->shopName,
この行の直後に下記コードを追加します。
                        'imageFlag'=> $body->imageFlag,

トップページの修正

index\contents.phpに対する修正

行番号 : 22
if($i%3==0){
この行の直前に下記コードを追加します。
$imgSrc = ( $c['imageFlag'] == 1 )
        ? '<img style="margin-bottom:0px;" src="'.$c['image_s'].'" alt="'.$c['name'].'('.$c['aff_rate'].')" /><br />'
        : '<br />';
行番号 : 37
(上記修正前は34行目)
<img style="margin-bottom:0px;width:64px;" src="{$c['image_s']}" alt="{$c['name']}({$c['aff_rate']})" /><br />
この行を下記コードに変更します。
{$imgSrc}

カテゴリーページの修正

category\src\result.phpに対する修正

行番号 : 9
if($i%3==0){
この行の直前に下記コードを追加します。
$imgSrc = ( $c['imageFlag'] == 1 )
        ? '<img style="margin-bottom:0px;" src="'.$c['image_s'].'" alt="'.$c['name'].'('.$c['aff_rate'].')" /><br />'
        : '<br />';
行番号 : 19
(上記修正前は16行目)
<img style="margin-bottom:0px;width:64px;" src="{$c['image_s']}" alt="{$c['name']}({$c['aff_rate']})" /><br />
この行を下記コードに変更します。
{$imgSrc}

サブカテゴリーページの修正

subcategory\src\result.phpに対する修正

行番号 : 9
if($i%3==0){
この行の直前に下記コードを追加します。
$imgSrc = ( $c['imageFlag'] == 1 )
        ? '<img style="margin-bottom:0px;" src="'.$c['image_s'].'" alt="'.$c['name'].'('.$c['aff_rate'].')" /><br />'
        : '<br />';
行番号 : 19
(上記修正前は16行目)
<img style="margin-bottom:0px;width:64px;" src="{$c['image_s']}" alt="{$c['name']}({$c['aff_rate']})" /><br />
この行を下記コードに変更します。
{$imgSrc}

商品詳細ページの修正

itemdetail\src\product.phpに対する修正

行番号 : 4
$explanation=mb_substr($api->item_caption,0,$maxlength);
この行の直後に下記コードを追加します。
$imgSrc = ( $api->imageFlag == 1 )
        ? '<img class="left" src="'.$api->image.'" alt="'.$api->item_name.'" /><br />'
        : '<br />';
行番号 : 12
(上記修正前は9行目)
<img class="left" src="{$api->image}" alt="{$api->item_name}" style="width:128px;" /><br />
この行を下記コードに変更します。
{$imgSrc}

itemdetail\src\result.phpに対する修正

行番号 : 6
if($i%3==0){
この行の直前に下記コードを追加します。
$imgSrc = ( $c['imageFlag'] == 1 )
        ? '<img style="margin-bottom:0px;" src="'.$c['image_s'].'" alt="'.$c['name'].'('.$c['aff_rate'].')" /><br />'
        : '<br />';
行番号 : 16
(上記修正前は13行目)
<img style="margin-bottom:0px;width:64px;" src="{$c['image_s']}" alt="{$c['name']}({$c['aff_rate']})" /><br />
この行を下記コードに変更します。
{$imgSrc}

検索結果ページの修正

isearch\src\result.phpに対する修正

行番号 : 9
if($i%3==0){
この行の直前に下記コードを追加します。
$imgSrc = ( $c['imageFlag'] == 1 )
        ? '<img style="margin-bottom:0px;" src="'.$c['image_s'].'" alt="'.$c['name'].'('.$c['aff_rate'].')" /><br />'
        : '<br />';
行番号 : 19
(上記修正前は16行目)
<img style="margin-bottom:0px;width:64px;" src="{$c['image_s']}" alt="{$c['name']}({$c['aff_rate']})" /><br />
この行を下記コードに変更します。
{$imgSrc}

今回の改造は以上です。
改造箇所、改造量ともに結構あるので、
充分気をつけて修正して下さい。

人気ブログランキングへ
人気ブログランキングへ参加しています。
応援をお願いします。


Comments (2 comments)

チカマオさん、こんにちは。
Lagです。

この画像の問題は結構初めの頃から気付いたので、widthタグを削除して対応してました。
その結果、チカマオさんの指摘通り画像なしの問題が発生しましたが、それ以上は分からず放置していました。。。

おかげでまた一つモヤモヤが解消されました。ありがとうございます。

Lag / 4 月 7th, 2009, 14:28

Lag さん、こんにちは。

そうですよね。
画像の問題は見ればすぐ判りますからね。
楽天規約違反ももちろんですが、デザイン的にも崩れますし。気になりますよね。

喜んでもらえて何よりです。
紹介するのが遅くなってごめんなさい。

チカマオ / 4 月 7th, 2009, 22:13

What do you think?

判らないphp命令やhtmlタグ等をここでお調べ下さい。

カスタム検索

緊急告知

本サイトより【アラジン】をご購入頂いた方は、お手数ですが下記アドレスまでメールを頂けないでしょうか。

サポート用メールアドレスのご連絡と、今後大規模改造が完成した際にはご連絡させて頂きます。

※メールには必ずInfotopからの購入完了メールに記載されている【注文ID】をご記載下さい。

chikamao@u3g.biz

QLOOKアクセス解析