[戻る]
No.1446

パソコンとスマホで別の商品説明文を表示させる

おたすけマイショップさん  投稿日:2015/02/27(Fri) 17:53
key

パソコンとスマホの商品説明文を替えて表示させたい。

または、スマホだけ商品説明文内の画像を非表示にしたい。

Re: パソコンとスマホで別の商品説明文を表示させる

おたすけマイショップさん  2015/02/27(Fri) 18:19 No.1447
key

パソコンとスマホのショップで商品説明文を個々に設定することはできませんが、
HTMLとcss使う事で、現行でもデバイスにより非表示にする事ができます。

手順は以下の通りです。

フリーエリアパーツ管理(店長ナビ>デザイン設定>詳細レイアウト他)の
[ページ選択:]から[商品詳細]を選択し、レイアウト図へ以下の<style>を
追加します。

<style>
@media only screen and (max-width: 500px) {
.smartphone_non_display {
display: none;
}
}

@media only screen and (min-width: 501px) {
.pc_non_display {
display: none;
}
}
</style>

<style>の追加方法は以下のヘルプをご参考ください。
また、作成したパーツは中央の[商品詳細]枠のすぐ上に配置して下さい。

 イージーマイショップオープンガイド - ページに<style>を追加する
 http://emshelp.easy-myshop.jp/c-item-detail?ic=add-style


次に、商品説明文をHTMLモードに切り替えていただき、各タグの要素に以下を追加します。

・スマホで非表示にする場合 ⇒ class="smartphone_non_display"

・パソコンで非表示にする場合 ⇒ class="pc_non_display"

記述例)スマホで画像や文章を非表示にする
<img src="画像" class="smartphone_non_display">
<p class="smartphone_non_display">
<div class="smartphone_non_display">
<span class="smartphone_non_display">  など

※この要素を追加する際、他に「class="○○"」と入っていると適用され
 ませんので、元の「class="○○"」を削除またはクラス名の編集をする
 必要がございます。



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

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