Loading....
最近の投稿:

Article

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

アラレボのマニュアル作りに集中していた為、
またまた更新が滞ってしまいました。
済みません。<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

今回は以上です。



Comments (No comments)

What do you think?

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

カスタム検索

緊急告知

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

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

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

chikamao@u3g.biz

QLOOKアクセス解析