天使と悪魔選手権

FC2のショッピングカートでネットショップをしているのですが、表示される画像が小さいので大きくしたいのですが、どこをいじっていいのかわからなくて、困っています。

商品説明のページの写真(画面上で表示されている写真幅約2×3cm)を少し大きくしたいのですが。。。

使用しているテンプレートは custam です。

下のどこかをいじればよいのかな?とおもっておりますが、いかがでしょうか?

大変申し訳ありませんが、素人ですのでわかりやすく教えていただけると、とっても嬉しいです。

いろいろ検索して調べましたが、わからなくて困っています(涙)

どなたか、わかる方教えて頂けると助かります。



/*--盾妬亥風--*/
.sort{
width:460px;
margin-top:10px;
text-align:left;
padding-left:20px;
}
.sort a{
margin:0px 10px;
}
.pagelinks{
width:460px;
padding-left:20px;
}
.pagelinks .a{
width:460px;
text-align:left;
}
.pagelinks .b{
width:460px;
margin-top:3px;
}
.pagelinks .b .ahead{
width:20%;
float:left;
}
.pagelinks .b .pageno{
width:60%;
float:left;
}
.pagelinks .b .next{
width:20%;
float:right;
}
.item_list{
float:left;
width:33%;
padding-left:0px;
}
.item{
width:150px;
text-align:center;
overflow:hidden;
padding-left:20px;
}
.item a img{
border:solid #dcdcdc 1px;
}
.item .name{
text-align:left;
margin:3px;
}
.item .comment{
text-align:left;
margin:3px;
}
.item .other{
margin:3px;
text-align:right;
}
/*--盾妬傷亨ヘ-*/
.item_detail{
text-align: center;
font-size: 12px;
width: 480px;
}
.item_detail .thumb{
float:left;
margin-top:10px;
width:33%;
}
.item_detail .thumb img{
border:solid #dcdcdc 1px;
padding:0px;
margin:0px;
}
.item_detail .thumb a img {
background-color:none;
display:block;
}
.item_detail .img-comment{
padding:3px;
}
.item_detail .comment{
padding:3px;
text-align:left;
}
.item_detail .about{
text-align:right;
}
.item_detail .about .other{
padding:3px;
}
/*--チェック--*/
#subtitle{
margin:15px auto 5px;
}
.check{
margin:0;
padding:0 0 30px;
width:452px;
}
.pickupbase
{
font-size:10px;
font-family:Osaka, Verdana, "MS Pゴシック";
margin-right:15px;
padding-bottom:15px;
width:130px;
float:left;
overflow:hidden;
}
.pickupbase a img{
border:solid #dcdcdc 1px;
padding:0px;
margin:0px;
}
.pickupname
{
font-weight:bold;
text-align:center;
padding-bottom:3px;
overflow:hidden;
}
.pickupprice
{
text-align:center;
padding-top:5px;
overflow:hidden;
}

A 回答 (1件)

 同じFC2とテンプレートを使っている人で、かつスタイルシートやHTMLに詳しい人でないと、とてもじゃないけど無理です。


 そのスタイルシートでは、HTMLの樹構造がどのようなものであるかわかりませんから、スタイルを変更したい要素<IMG>をどのようにセレクトすればよいかわからないからです。HTMLが酷い物だということは想像できます。

 文書中の特定の要素をセレクタで選択して、その要素に対してプレゼンテーションを指定するのです。
 たとえば、<div class="header"></div>要素内の二番目以降のすべての段落<p></p>に含まれる最初の<img>要素でしたら
 div.header p+p img:first-child{}
とします。この様なスタイルシートでしたら、文書構造もHTMLを見なくても推測できますし、セレクタもそのまま記述するので修正も楽です。すべて.(クラスセレクタ)で指定してあるようなスタイルシートやHTMLじゃ無理です。

 この様な場合、firefoxをお使いでしたら標準インストールでDOM inspectorという文書構造を解析するツールがインストールされています(なければアドオンから)。
 それとfireBug( https://addons.mozilla.jp/firefox/details/1843 )を使って修正したい<IMG>要素を特定するために、セレクタ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )を組み合わせて、特定し画像のサイズをwidth,heighプロパティで指定することになります。

 知っていれば決して難しい作業ではなく、ものの数分もあればできるでしょう。知らない場合、その手法を教えるのはこの様な掲示板では無理です。最低限HTMLとCSSの仕様書を読んで概略を理解すること
★HTML 4.01仕様書 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
★REC-CSS2 邦訳 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
 いずれにしてもこの二つは必須な知識です。

 HTMLのソースのすべてと、スタイルシートを提示して誰かに修正してもらうか、自分で行うかのいずれかになるでしょう。
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


おすすめ情報