Loading....
最近の投稿:

Category 'アラジン改造'

ジャンル指定を追加しよう~データ設定編~

今回は、前回ご紹介した改造の運用方法をご紹介します。

これは、検索用ジャンルIDをテキストエディタを用いて修正し、
FTPツールでサーバーにアップロードする方法です。

修正はそんなに大変じゃないので、テキストエディタと
FTPツールの使用に慣れている方には便利な方法だと思います。

テキストエディタ等に慣れてなく、管理者画面から入力したい
という方は次回の設定部分の改造をお待ち下さい。

続きを読む・・・

ジャンル指定を追加しよう

今回はカテゴリー/サブカテゴリーで表示する商品を
楽天のジャンルで絞って検索する改造方法をご紹介します。

今回は最も重要な検索実行部分の改造方法をご紹介し、
次回でデータ構造に関して紹介します。
そして次々回で管理画面からジャンル指定をする為の
改造方法をご紹介します。

今回ご紹介するジャンル指定の仕方、データ構造に関しては
以前ご紹介した「検索キーワードの追加」と同じですので、
理解されている方は次回を待たずにデータ設定を行って、
使用して下さい。

ジャンル指定の為に追加した変数は
$mainCategory4G
$subCategory4G です。

本改造では上記変数が存在する場合のみ、
ジャンル指定を行うようになっていますので、
変数を作成しなくても動作に影響はありません。
もちろん、ジャンルで絞られもしませんが。

今回ご紹介するコードは以前ご紹介した
キーワードの分離~検索機能編~」と
キーワード分離~2ページ目以降~」の
改造を施した後のソースを対象としていますので、
これらの改造を行っていない方は、先にこれらの
改造を行ってから本改造を行って下さい。

では、改造方法です。

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

lib\rakutenAPI.phpに対する修正

行番号 : 12
  public $genre_id;
この行を下記コードに変更します。
  public $genre_id=0;
行番号 : 77
    $param .= "&page=".$this->page;
この行の直後に下記コードを追加します。
    $param .= "&genreId=".$this->genre_id;

トップページの修正

index\contents.phpに対する修正

行番号 : 13
$p->keyword = urlencode($k);
この行の直後に下記コードを追加します。
if(isset($mainCategory4G[$m])){
  $p->genre_id=$mainCategory4G[$m];
}

カテゴリーページの修正

category\index.phpに対する修正

行番号 : 15
$p->keyword = urlencode($categoryKwd);
この行の直後に下記コードを追加します。
if(isset($mainCategory4G[$categoryName])){
  $p->genre_id=$mainCategory4G[$categoryName];
}

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

subcategory\index.phpに対する修正

行番号 : 15
$p->keyword = urlencode($categoryKwd);
この行の直後に下記コードを追加します。
if(isset($subCategory4G[$categoryName])){
  $p->genre_id=$subCategory4G[$categoryName];
}

検索結果ページの修正

isearch\index.phpに対する修正

行番号 : 11-18
if( $cnum == 'm' && isset($mainCategory4S[$area]) ){
  $area4S=$mainCategory4S[$area];
} 
elseif( $cnum != ''){
  if( isset($subCategory4S[$area]) ){
    $area4S=$subCategory4S[$area];
  }
}
これらの行を下記コードに変更します。
if( $cnum == 'm' ){
  if( isset($mainCategory4S[$area]) ){
    $area4S=$mainCategory4S[$area];
  }
  if( isset($mainCategory4G[$area]) ){
    $p->genre_id=$mainCategory4G[$area];
  }
} 
elseif( $cnum != ''){
  if( isset($subCategory4S[$area]) ){
    $area4S=$subCategory4S[$area];
  }
  if( isset($subCategory4G[$area]) ){
    $p->genre_id=$subCategory4G[$area];
  }
}

今回の改造は以上です。

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

商品列数に関連する表示幅を変更しよう

アラレボのマニュアル作りに集中していた為、
またまた更新が滞ってしまいました。
済みません。<m(_ _)m>

前回は各画面で表示する商品リストの表示列数と
列の幅を変更する方法をご紹介しました。

この改造で、列数は自由に変更できる様になりますが、
アラジンで作ったサイトは、画面全体の表示幅が
800pxに固定されている為、列数を増やすと列の幅を
狭めなければいけないという問題がありました。

そこで今回は、商品列数と関連した表示幅の
変更方法をご紹介します。

とは言っても、殆どはcssでの指定になりますので、
特にPHPファイルを修正する必要はなく、HTML/CSSの
幅をしている箇所をご紹介するのみとしますので、
具体的なサイズは皆さんご自由に設定して下さい。

多分、こんな注意は不必要だと思いますが、
HTMLコンテンツは入れ子構造になっていて、
一つだけのサイズを変更すると全体的なデザインが
崩れたりすることもままありますので、
親子関係に充分注意して変更して下さい。

では、まずは全体のサイズをしている箇所をご紹介します。

※これ以降に於いて、ご紹介している行番号は
widthプロパティをしている行番です。
また、これはオリジナル・アラジンのソースにおける
行番号になりますので、対象ファイルに改造を
施している場合は、セレクタで判断するなど、
適宜読み替えて下さい。

商品の表示列数を増やした場合、ページ全体の幅を
広げたくなると思います。
その場合はこちらを修正して下さい。

css\style.css

行番号 : 12
セレクタ:body
width:800px;

ページ全体の幅をいくら広げても、
商品リストを内包しているブロック(div.main)が
広がらなければ全く意味がありませんので、
こちらもbodyに合わせて広げましょう

css\style.css

行番号 : 48
セレクタ:div.main
width:558px;

後、商品リストの表示幅とは直接は関係が無いですが、
カテゴリー帯メニュー(ul.category)と
(ページ末端にある場合は)お気に入りリンク(ul.link)の幅が
ページ全体と関係をもっているので、
これらのサイズも修正しましょう。

css\style.css

行番号 : 77
セレクタ:ul.category
width:800px;

css\style.css

行番号 : 92
セレクタ:ul.link
width:700px;

ちなみに、
 div.main
 ul.category
 ul.link
のページ上の位置は下図の通りです。

div.mainその他の表示位置

トップページの商品リストの上に表示される
「~~の新着商品」とある帯タイトル(ul.link)も
表示幅が固定で指定されていますので、
商品リストの幅に合わせて修正しましょう。

css\style.css

行番号 : 175
セレクタ:h1.new
width:440px;

これは蛇足かも知れませんが、ページ全体の幅を
変更すると、ページタイトル()の幅も修正したく
なるかも知れませんので、こちらもご紹介しておきます。

css\style.css

行番号 : 140
セレクタ:h1.title
width:525px;

これら、
 h1.new
 h1.title
のページ上の位置は下図の通りです。

h1.newその他の表示位置

最後に、商品リスト等とは無関係になりますが、
商品リストを内包しているブロック(div.main)を
広げると、必然的に特定商取引法のページの
ブロックも広がります。
それ自体は特に問題ないのですが、文章の
上下にある線(hr)とのバランスが
崩れてしまいますので、こちらも適当に
修正しましょう。

※ここだけはスタイルシートではなく、
phpで記述されていますので、気をつけて下さい。

law\contents.php

行番号 : 11,13
<hr style="width:480px;"/>

特定商取引法のページのhrのページ上の
位置は下図の通りです。

特定商取引法ページのhr

今回は以上です。

商品の表示列数を変更しよう

今回は商品の表示列数を変更する方法をご紹介します。

オリジナル・アラジンでは800ピクセル(ドット)の画面に
3列の商品が並ぶ様に設計されています。

これは、トップ、カテゴリー、サブカテゴリー、
商品詳細、検索結果の各画面でそれぞれ設定されている為、
このままだと、列数を変更しようとした場合、それぞれの
画面に対応するソースコードを修正しないといけません。
(それぞれの画面で異なる列数にしたい場合は
この方が便利ですが・・・)

そこで今回の改造では、列数、1列の幅とその余白を
1箇所で設定する改造方法をご紹介します。

この改造を施せば、設置したサイトの商品表示列数を
変更したい場合でも1箇所修正すればOKです。

※ただし、今回ご紹介するのは、商品の列数と
列幅、その余白のみであり、画面全体の幅や
商品を配置するブロックの幅などは含まれて
いないので、変更できる列数には限りがあります。
ウィンドウ等の幅の変更方法は次回ご紹介する予定です。

では、改造方法です。

※今回は複数のファイルに同じ改造をする事が多い為、今までとは異なり、対象ファイルが複数になっていますので、気をつけて改造して下さい。

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

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

■改造1

改造ファイル/行番号
index\contents.php (21行目)
改造内容
if($i<3){
この行を下記コードに変更します。
if($i<$item_col){

※改造1は当初の公開時に漏れていた分で
4月21日に追加したものです。

■改造2

改造ファイル/行番号
index\contents.php (22行目)
category\src\result.php (9行目)
subcategory\src\result.php (9行目)
itemdetail\src\result.php (6行目)
isearch\src\result.php (9行目)
改造内容
if($i%3==0){
上記ファイルに存在するこの行を下記コードに変更します。
if($i%$item_col==0){

■改造3

改造ファイル/行番号
index\contents.php (31行目)
category\src\result.php (13行目)
subcategory\src\result.php (13行目)
itemdetail\src\result.php (10行目)
isearch\src\result.php (13行目)
改造内容
<td style="width:160px;text-align:center;padding:10px 5px;">
上記ファイルに存在するこの行を下記コードに変更します。
<td style="width:{$item_w_td};text-align:center;padding:10px {$item_w_pad};">

■改造4

改造ファイル/行番号
index\contents.php (39行目)
category\src\result.php (21行目)
subcategory\src\result.php (21行目)
itemdetail\src\result.php (18行目)
isearch\src\result.php (21行目)
改造内容
if($i%3==2){
上記ファイルに存在するこの行を下記コードに変更します。
if($item_col-($i%$item_col)==1){

■改造5

改造ファイル/行番号
top\3rd.php (6行目)
改造内容
require "./contents.php";
この行の直前に下記コードを追加します。
$item_col=4;
$item_w_td='120px';
$item_w_pad='5px';

この改造を行った後は、改造5で追加した
変数の値を変更する事により、商品列数を
自由に変更できます。

※上記サンプルコードでは、列数を4列にした際の
値が設定されていますので、皆さん自由に変更して下さい。
オリジナルはそれぞれ、3、160px、5pxです。

各変数の意味は下記の通りです。

$item_col:列数
$item_w_td:列幅
$item_w_pad:列の余白(左右両側)

$item_col だけは数字じゃないといけませんが、
他の変数は単位(px、em、%など)も含めて設定できます。

なお、この商品一覧はdiv.mainブロックの中にあり、
div.mainは幅が558pxに設定されていますので、
この幅に全体が収まる様に列数、列幅、列余白を
調整しましょう。
※列余白は左右両側にあるので、2倍になる事に
気をつけましょう。

div.mainや更にその外側のブロックの変更に関しては
次回ご紹介する予定です。

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

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

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

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

例えばこんな感じです。

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

画像幅を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}

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

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

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

カスタム検索

緊急告知

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

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

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

chikamao@u3g.biz

QLOOKアクセス解析