[戻る]
No.2968

画像にワクを表示させたい

販促SAKURAさん  投稿日:2018/02/16(Fri) 16:54
key

お世話になっております。

商品画像にワク(フチ)を表示させたいのですが、
そういうオプションはございませんでしょうか?
(いつも自分が利用しているサイトが、
画像にワクが表示されていて、見栄えが良いですので)

画像そのものにワクを付ければいいとは思いますが、
登録しようとしているアイテム数が100個以上あるので、
できればHTMLやCSSなどで商品画像すべてにワクを
表示させるオプションがあるとありがたいです。

お手数おかけしますが、何卒よろしくお願い致します。

Re: 画像にワクを表示させたい

おたすけマイショップさん  2018/02/16(Fri) 18:04 No.2969
key

商品一覧・カテゴリページにて表示される商品画像であれば以下の方法で商品画像の周り等のデザイン変更を行うことが可能です。
※簡単モードでの案内となります。

1.ページレイアウト管理(デザイン設定>レイアウトタブ)を開きます。
2.表示されるレイアウト図中央にある[商品一覧]部分(背景黒)にある[商品一覧・フレーム設定]ボタンを押します。
3.主に[フレーム背景]を設定いただく事で画像の周り(背景)に色を追加する事ができます。
 また、[フレームサイズ]項目を調整することで背景部分の調整を行うことができます。

画像に対しての枠を表示することとは異なりますが、こちらの設定であればCSSを使用せずに行えます。

商品詳細ページ(商品毎のページ)や商品一覧・カテゴリページの商品画像に対してのみ(上記方法とは異なり画像のみ)に画像の周りに枠を追加する場合はCSSを使用した対策が必要となります。

商品画像に枠を表示する際に追加するスタイル(CSS)の例です。
※枠の太さ(2px)や色(#000000)は調節してスタイルを追加して下さい。

<style>
/* 商品一覧商品画像枠 */
.item_catalog img.item_image {
border: 2px solid #000000;
}
/* 商品詳細商品画像枠 */
.item_detail .item_image_main img.item_image {
border: 2px solid #000000;
}
</style>

スタイルは以下の方法で追加して下さい。

1. 店長ナビトップ > デザイン設定 > [レイアウト]タブ でページレイアウト管理を表示
2. スクリーンの設定ボタン(ギアアイコン)をクリック
3. [<head>追加]内に内容を追記して「保存」をクリック

上記スタイルは例となります。
ご利用者様にて細かい指定を希望される場合は、classをご利用者様自身で確認頂き、上記の方法と同様でスタイルを追加いただきお試し下さい。


Re: 画像にワクを表示させたい

販促SAKURAさん  2018/02/16(Fri) 19:06 No.2970
key

早速のご回答、誠にありがとうございます。

商品一覧・カテゴリページのワク、
商品詳細ページのワク、それぞれ表示させることが
できました。ありがとうございます!

ページレイアウトの機能や、CSSについて、
今後もっと理解を深めて良いページづくりを
行いたいと思います。


Re: 画像にワクを表示させたい

販促SAKURAさん  2018/02/19(Mon) 10:27 No.2971
key

お世話になっております。

すみません。追加で1点質問がございます。

先日、ページレイアウト管理→レイアウト→ギアのアイコンを
クリック→教えていただいた<style>の記述により、メイン画像にワク表示はされるようになりましたが、メイン画像下のサブ画像(サムネイル)にもワク表示はできませんでしょうか?
https://zeroone.easy-myshop.jp/c-item-detail?ic=A000000006

恐れ入りますが、ご教示の程、何卒よろしくお願い致します。

以上、よろしくお願い致します。


Re: 画像にワクを表示させたい

おたすけマイショップさん  2018/02/19(Mon) 18:18 No.2972
key

商品詳細ページにおけるサムネイル画像にはclass(item_image_thumbnail_src)を充てております。
こちらに要素を加えスタイル追加いただければ枠線が表示されます。

・スタイル例
<style>
.item_detail .item_image_thumbnail_src {
border: 2px solid #000000;
}
</style>

尚、イージーマイショップでは細かくデザイン修正ができるよう各所にclassを充てています。
classを確認する場合は、変更箇所を右クリックして頂き表示される「要素の検査(IEの場合)」や「検証(Chromeの場合)」などブラウザの機能でご確認下さい。
classを確認した後に上記の様に要素加えスタイルを追加して頂くことで修正完了です。


Re: 画像にワクを表示させたい

販促SAKURAさん  2018/02/20(Tue) 10:30 No.2974
key

お返事ありがとうございます。

商品詳細ページサムネイルに対する
classの記述について教えてくださいまして
ありがとうございます。
希望していたワク表示ができるようになりました。

また、画像のデザイン修正については、今後は
ブラウザの要素の検査等、ソースを見てclassから
割り当てるようにします。

ご教示くださいまして誠にありがとうございました。



返信
*おなまえ
*email (回答通知用。公開されません)
*タイトル
*内容
ショップURL
*key (修正の際に使用します)

無料で本格的なネットショップ開業できるのは『イージーマイショップ』