画像付ウェブページ更新ツールの詳細ページでもPCと携帯の2種類のデザインで同時更新できますか？ (No. 1256)

質問

現在、画像付ウェブページ更新ツールを設置テストさせて頂いております。

PCと携帯の2種類のデザインでの同時更新につきまして、
一覧は「全一覧」をPC用に、「短い一覧」を携帯用に使うとサポートページで確認いたしましたが、詳細ページでも2種類のデザインでページを書き出す事は可能でしょうか？（PC用・携帯用）

ウェブページ更新ツールでは実現可能なようですが、「画像アップロード機能付き製品や添付ファイルアップロード付き製品にはこの方法は使用できません。」と記載されておりましたので確認させて頂きます。

よろしくおねがいいたします。

回答

「すぐ使えるCGI」のご利用ありがとうございます。

■画像がある場合の対応可否について

携帯用とPC用に2種類のHTMLを書き出す方法は下記のページでご案内している通りですが、この方法は、やはり「画像付」や「添付ファイル付」の製品では採用いただけません。

「携帯サイトとPCサイトの新着情報を同時に更新する方法」
http://sugutsukaeru.jp/support/243/

どちらかで画像やファイルが表示から抜け落ちてしまうのです。


■対応方法１：スマホ対象の場合

もし「携帯用」が最近のスマホ（スマートフォン）対象でしたら、「レスポンシブWebデザイン」と呼ばれる、CSS スタイルシートを表示幅によって切り替える方法で、一つのHTMLでの対応が可能かと思います。

具体的には、以下のように、幅に合わせて追加で CSS ファイルを定義していく作業となります。

==============
/* デフォルトの定義（980-1119px） */
...

/* 大ディスプレイ */
@media (min-width: 1200px) { ... }

/* タブレット横置き & PC */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* タブレット縦置き & 携帯横置き */
@media (max-width: 767px) { ... }

/* 携帯縦置き */
@media (max-width: 480px) { ... }
==============


◇「レスポンシブWebデザイン」についてご参考（外部サイト）

「Ascii.jp ゼロから始めるレスポンシブWebデザイン入門 - 第1回」
レスポンシブWebデザインとは
http://ascii.jp/elem/000/000/697/697463/



■対応方法２：有料カスタマイズ

有料となりますが、「画像付 ウェブページ更新ツール」で2種類のページが書き出せるようにカスタマイズする事は可能です。
カスタマイズについて詳しくは、下記のページをご参照下さい。

「カスタマイズのご案内」
http://sugutsukaeru.jp/support/66/


どうぞご検討よろしくお願いします。