スマホGOLDページをPCページに移植

Question

いつもお世話になっております。

当店のスマホ商品ページ等に表示しているフロートのリンクより、
GOLDにて作成してあるスマホ用ページがいくつかあるのですが、

それらをPCのシステムページにそのまま移植することは可能なのでしょうか？
カテゴリーページの上部の説明のところにそっくりそのまま移したいと考えています。（フロートは外します）

CSSの内容がスマホとPCと異なる為、細かいところまで修正する必要があれば断念しますが、
何か簡単にできる方法をご存知でしたらご教授くださいませ。

宜しくお願い致します。

Answer

ECマスターズの田中です。

スマホ用のページをコピーし、
PC用の調整をしてタグで埋め込む方法は
いかがでしょうか。

調整が必要となる主な内容ですが、


リンク先がインラインフレーム内で開く問題は、
ヘッダーの中に



上記タグを入れることで、解決することができます。
(target="_blank" にすると、新しいタブで開きます）


インラインフレームの横幅が足りない場合は、
https://ec-masters.club/forum/post_view.php?id=1579
上記、イベント告知君を縮小表示する方法と
同じ方法で、拡大表示することができます。


スマートフォン向けの余分なパーツにつきましては、
HTML内から削除していただくでも結構ですし、
新しいCSSファイルで上書きすることによって、
例えば

header, header + b, aside, aside ~ * { display: none; }

という指定を加えて、フロート・フッターを非表示にすることができます。

Answer

ご回答ありがとうございます。
いつもご親切に本当に感謝しています。

最後にありました、
header, header + b, aside, aside ~ * { display: none; }

こちらをCSSに加えた所、PCページ内での表示はなくなりましたが、
スマホのGOLDページでも表示されなくなってしまいました。

なるべくHTMLを複製せずに仕様したいと考えております。
何か他に方法があればお教えいただけると幸いです。

また、スマホページの上部にあるカテゴリーボックスも消して表示したいのですが、
どのようにCSSに書き込めばいいかも教えてくださいませ。
お手数ですが宜しくお願い致します。

Answer

ECマスターズの田中です。

＞なるべくHTMLを複製せずに仕様したいと考えております。
＞何か他に方法があればお教えいただけると幸いです。
それでは、先ほどご案内したCSSの指定の代わりに、



より後方に、


$(function(){
if(window!=parent){
	$('header, header + b, aside, aside ~ *').css('display','none');
}
});


上記JavaScriptを挿入していただけますでしょうか。

タグは、そのまま入れていただいて結構です。


＞また、スマホページの上部にあるカテゴリーボックスも消して表示したいのですが、
＞どのようにCSSに書き込めばいいかも教えてくださいませ。
カテゴリーボックスを囲むタグに、idまたはclass属性が指定されておらず、
CSSでカテゴリーボックスを指定することが難しいので、
カテゴリーボックスを囲むタグにID属性をつけていただき、
それをCSSの規則に加えていただけますでしょうか。

たとえば、


↓


このようにID属性を追加した場合は、

$('header, header + b, aside, aside ~ *').css('display','none');
↓
$('header, header + b, aside, aside ~ *,#catbox').css('display','none');

このようにCSSに追記をお願いします。

Answer

ご連絡ありがとうございます。
上記の通りに追加しましたが、やはりスマホページのフロート・フッターが消えてしまいます。

確認ですが、
＞ヘッダーの中に
こちらはスマホGOLDページのHTMLのの中にですよね？

＞$('header, header + b, aside, aside ~ *').css('display','none');
＞↓
＞$('header, header + b, aside, aside ~ *,#catbox').css('display','none');
＞このようにCSSに追記をお願いします。
こちらに関しては、下記のような入れ方でよろしかったのでしょうか？

header, header + b, aside, aside ~ *,#catbox　{
　　　　display : none ;
}

JavaScriptは挿入してあります。
何度も申し訳ございませんがご回答宜しくお願い致します。

Answer

ECマスターズの田中です。

＞やはりスマホページのフロート・フッターが消えてしまいます。

下記の指定は、CSSに残ったままになっておりますでしょうか。
その場合は、削除をお願いします。

header, header + b, aside, aside ~ *,#catbox　{
　　　　display : none ;
}

CSS内の上記指定は、いかなる場合でもフロート・フッターを非表示にしますので、
その代わりにJavaScriptで、iframe内かどうかを判断して
表示・非表示を切り替える、という仕組みになっております。

＞＞ヘッダーの中に
＞こちらはスマホGOLDページのHTMLのの中にですよね？
正確には〜の中に入れていただく形になりますが、
どこに入っていても認識はされますので、動作に影響はありません。
できれば、〜内に移動をお願いします。

＞こちらに関しては、下記のような入れ方でよろしかったのでしょうか？
入れ方はそれで結構ですので、
JavaScript内のみに追記をお願いします。

Answer

申し訳ございません、自己解決しました。
ご回答ありがとうございました。