更新日: 2013年6月13日 VER.1.8.0
編集画面
01 部品（ボタン、ボックス、エキスパンド、タブ、スライドの形状を変更する場合は？ 02 配置した部品の順序（上下、左右）を入れ替える場合は？ 03 PCサイトの画像の一部分だけを利用したい場合は？ 04 PCサイトにない画像を使いたい場合は？ 05 別ページの画像を使いたい場合は？ 06 画像に影を付ける場合は？ 07 画像を横並びに配置したい場合は？ 08 画像やテキストを横並びに配置する場合は？ 09 テキストの背景色を変更する場合は？ 10 テキストにPCサイトで表示されている装飾をそのまま反映させたい場合は？ 11 テキストの一部分のみ強調や文字色の変更をしたい場合は？ 12 HTMLタグを直接記述したい場合は？ 13 更新情報など、iframe（インラインフレーム）で構成されたページを表示する場合は？ 14 Google Mapsを利用する場合は？ 15 YouTubeの動画を利用する場合は？ 16 フォームを利用する場合は？ 17 フォームを利用する手順は？ 18 フォームを利用する場合は？（直接コードを記入する場合） 19 新着情報など、内容、個数が動的に変わる要素を変換したい場合は？ 20 不動産の物件一覧ページのような「同じルールの適用」要素を変換する場合は？ 21 PCサイトにないコンテンツを追加する場合は？ 22 スライドにまとめてPCサイトの画像を配置する場合は？ 23 iPhoneのボタンのようにアイコンを並べたようなボタンを作成したい場合は？ 24 変換したスマートフォンサイトの検索一覧ページで 2ページ目以降の「前のページに戻る」ボタンが表示されない場合は？ 25 詳細画面で設定できない装飾をしたい場合、プロパティを変更したい場合は？ 26 画像にリンクがついている場合、その画像がボタンだとわかるようにしたい場合は？ 27 設定していたテキストが表示されなくなった場合は？ 28 スマートフォンサイトビューでアイコンが出ていますが、これは何？ 29 スマートフォン表示とPC表示を切り替えるには？ 03P 03P 03P 04P 05P 06P 07P 07P 08P 09P 10P 11P 12P 14P 16P 18P 19P 20P 21P 21P 22P 23P 24P 25P 26P 27P 28P 28P 29Pページ管理
01 不要なページを削除する場合は？ 02 ほとんど同じようなページを効率的に作成する場合は？ 03 SSLで保護されたページを変換する場合は？ 04 マイページなどのログイン後のページを変換する場合は？ 05 作成したページを実機で確認する場合は？ 06 作成したページを実際にスマートフォンサイト変換させるには？ 07 PCサイトにないページを追加する場合は？ 08 自社のテスト環境で動作確認したい場合は？ 09 テスト環境で実機検証を行う場合は？ 10 サイトリニューアルなどでテスト環境と本番環境を使い分ける場合は？ 11 TOPページなどURLが違っても同じページが表示される場合の登録方法は？ 12 1つのURLで複数のデザインを使い分けたい場合は？ 13 ページの優先度を設定する場合は？ 14 手作業でHTMLを作っていますが、スマートProに適した作り方はありますか？ 15 ページを更新して反映したら、実機で表示されない箇所がある場合は？ 16 CMSを使っていて、同じテンプレートを使ったサイトを複数運営している場合は？ 32P 33P 33P 34P 35P 37P 37P 37P 37P 37P 37P 38P 41P 41P 41P 41Pページ管理
その他の項目
01 TOPページが変換されない場合は？ 02 スマートProタグを設置してもスマートフォン用のページが表示されない場合は？ 03 テキストのフォントを変更したい場合は？ 04 タブレット(iPad, Androidタブレットなど)に適したサイトを作成する場合は？ 05 編集画面と実機の表示が異なる場合は？ 06 PCサイトの表示が真っ白になっている場合は？ 07 サイトの一部でBASIC認証をかけていますが、対応していますか？ 42P 42P 42P 42P 43P 43P 43P1. 部品(ボタン、ボックス、エキスパンド、タブ、スライド)の形状を
変更したい場合は？
1-1. 部品の詳細設定から「一覧から表示」ボタンを選択すると各部品の形状が一覧表示されます。 1-2. 一覧から使いたい形状の部品をクリックすると、スマホサイトビュー側の部品の形状が 選択した形状に変更されます。2. 配置した部品の順序（上下、左右）を入れ替える場合は？
2-1. 各スマホサイトビュー画面上で、移動させたいコンテンツ(要素もしくはコンテナ) を選択します。 2-2. 移動させたい位置までドラッグ＆ドロップすることで、順序を入れ替えられます。3. PCサイトの画像の一部だけを利用したい場合は？
画像の詳細設定メニューの「画像の切り取り」 メニューから範囲を選択、または数値を入力し て画像を切り出します。 画像表示の拡大縮小は「幅設定」メニューにて調整できま す。 幅設定メニューから“オリジナルサイズで表示“に チェックを入れるとサイトで利用している画像サイズに固 定することもできます。 3-1. スマホサイトビューの画像要素(緑色枠)を選択し右クリック →「詳細設定画面」を開きます。4-4. 画像一覧メニューの「画像アップロード」から「参照」ボタンをクリックして、 利用したい画像を選択後、「更新」ボタンをクリックすると No Image画像がアップロードした画像に差し替わります。 4-3. クリックすると、「画像一覧」画面が ポップアップされます。
4.
PCサイトにない画像を使いたい場合は？
4-1. 画面上部の「イメージ」ボタンを選択してそのままスマートフォンサイトビュー上に ドラッグ＆ドロップします。Copyright © 2013 Salespartner Inc, All Rights reserved. 04
4-2. スマートフォンサイトビュー上にNo Image画像が 作成されます。
画像を選択し、右クリック→「詳細設定」画面を 開きます。
5-4. ボックス内に絶対パス指定で変更したい画像の URLを入力し、決定ボタンをクリックすると No Image画像が指定したURLの画像に切り替わります。 5-3. クリックしてURL入力ボックスを表示 5-2. スマートフォンサイトビュー上にNo Image画像が 作成されます。 画像を選択し、右クリック→「詳細設定」画面を 開きます。
5.
別ページの画像を使いたい場合は？
5-1. 画面上部の「イメージ」ボタンを選択してそのままスマートフォンサイトビュー上に ドラッグ＆ドロップします。※ボックスコンテナに影を付ける場合、初期値は幅いっぱいに設定されているため、改めて幅を画像に合わせる必要があります。
Copyright © 2013 Salespartner Inc, All Rights reserved. 06
6-2. 「影あり」「枠あり」に チェックを入れて設定します。
6. 画像に影を付ける場合は？
PCサイトのボリュームによっては、多少表示に時間がかかる場合があります。 PCサイトの情報をすべて読み終える間、画面への描画を行っていないためです。 ※画像は読み込み対象から除いています。 現在は、1サイトにつき1つのみBASIC認証の設定が行えます。 ※1サイトに複数のBASIC認証を設定することは現在行えません。 ※テスト環境をご利用の場合は本番環境とテスト環境で別々のBASIC認証の設定を行えます。 編集画面と実機の表示が異なる場合には、以下の原因が考えられます。 【表示そのものが違う場合】 ・<script>タグなどで、HTMLを動的に操作している。 ※動的にHTMLタグを生成したり、HTML要素の属性を変更したりしている場合、正常に表示ができな い場合があります。 【テキストの改行位置やフォントが違う場合】 ・端末毎に利用しているフォントが違う場合、テキストの改行位置やテキストの形状が若干異なる場合 がございます。 ・Windowsをお使いの場合、編集画面やプレビュー画面で、ひらがなや漢字などに斜体がかからない場 合がありますが、スマートフォンでの表示は斜体がかかるため、編集画面とスマートフォン実機での見た 目が若干異なる場合があります。 【画像の切り抜き】 Firefoxを用いて編集を行った場合、画像の切り抜きを行うと、編集画面と実際の画面で切り抜き範囲が 1ピクセルずれる場合がございます。 Google Chromeをお使いいただくと、より実際の切り抜き範囲に近い切り抜きが行えます。
5.
編集画面と実機の表示が異なる場合は？
6.
PCサイトの表示が真っ白になっている場合は？
7.
サイトの一部でBASIC認証をかけていますが、対応していますか？
7-2. テーブルコンテナを選択し、右クリック→「詳細設定」画面を開きます。 7-3. テーブルメニューのセルの分割数から並べたい行数・列数へ変更します。 7-4. 各テーブルセルの中に画像をドラッグ＆ドロップします。
8. 画像やテキストを横並びに配置する場合は？
8-2. 「回り込み」にチェックを入れます。 ※テーブルの中にテキスト・画像を配置することでも横並びに配置することが可能です。 8-1. 画像・テキスト要素を選択肢、右クリック→「詳細設定」画面を開きます。Copyright © 2013 Salespartner Inc, All Rights reserved. 07
7. 画像を横並びに配置したい場合は？
7-1. 画面上部の「テーブル」ボタンを選択してそのままスマホサイトビュー上に ドラッグ&ドロップします。
※背景色設定画面 9-1. スマートフォンサイトビュー上で、変更したいテキスト要素を選択します。 9-2. 右クリック→「親ノードを選択」をクリックして、ボックスコンテナを選択状態にします。 9-3. ボックスコンテナの詳細設定画面で「ボックスの背景色」を変更することで、 テキストに背景色を設定することができます。
9. テキストの背景色を変更する場合は？
10-2. テキスト詳細設定の「HTMLの構造を保持する」にチェックを入れると PCサイトと同じ装飾が利用できます。
Copyright © 2013 Salespartner Inc, All Rights reserved. 09
10. テキストにPCサイトで表示されている修飾を
そのまま反映させたい場合は？
<font>タグや<strong>タグ等のPCサイト上の修飾をそのまま利用したい場合。 10-1. テキスト要素を選択し、右クリック→「詳細設定」画面を開きます。
11-2. 文章編集メニューの「編集を行う」ボタンをクリックするとHTMLエディターが開きます。 HTMLエディター上で、変更したい部分に強調、背景色、文字色等の設定を行った後で 「反映」をクリックすると、テキストの装飾が行えます。 クリックして開く ※HTMLエディターを使って編集を行った場合は、PCサイト上のテキストと連動しなくなります。
11. テキストの一部分のみ強調や文字色の変更をしたい場合は？
11-1. 変更したいテキスト要素を選択し、右クリック→「詳細設定」画面を開きます。12-4. 開いたエディタの左上メニュー「ソース」をクリックしてソースを表示します。 こちらにHTMLタグを直接記述することができます。
Copyright © 2013 Salespartner Inc, All Rights reserved. 11
12. HTMLタグを直接記述したい場合は？
12-1. 編集画面にて、テキストボタンをそのままスマートフォンサイトビュー上に ドラッグ＆ドロップします。 スマートフォンサイトビュー上にテキスト要素が作成されます。 12-2. 作成されたテキスト要素を選択し、右クリック→「詳細設定」画面を開きます。 12-3. エディターを開きます。13-1-1. PCサイトビューでインラインフレームを選択します。 選択時左上にiframeの表示が出ている事を 確認します。 13-1-2. その他メニューから「インラインフレーム」を 選択します。 インラインフレームが選択されると メニューボタンが黒く反転します。 13-1-3. PCサイトビューのインラインフレームを選択し、 そのままスマートフォンサイトビューへ ドラッグ＆ドロップします。 直接他のページを指定する場合。 13-2-1. その他メニューから「インラインフレーム」を 選択します。 インラインフレームが選択されると メニューボタンが黒く反転します。 13-2-2. 黒く反転したメニューボタンを直接 スマートフォンサイトビューへ ドラッグ＆ドロップします。
次ページへ続く
13.
更新情報など、iframe(インラインフレーム)で構成されたページを
表示する場合は？
変換元のPCページにインラインフレームが設置されている場合。前ページの続き
13-2-3. 空のインラインフレームがスマートフォンサイトビューに作成されます。 13-2-4. 作成されたインラインフレームを選択し、右クリック→「詳細設定」画面を開きます。 13-2-6. クリックして表示を切り替え、「リンクURL」 に表示したいページのURLを入力します。 13-2-7. 決定ボタンをクリックします。直接URLを指定する場合。
次ページへ続く
14-2-1. メニューから「テキスト」を選択します。 14-2-2. テキストメニューボタンを直接スマートフォンサイトビューへドラッグ＆ドロップします。 14-2-3. テキスト要素を選択し、右クリック→「詳細設定」画面を開きます。 14-2-4. 文字編集の「編集を行う」をクリックし、 エディターを開きます。 14-1-1. その他メニューから「インラインフレーム」を 選択します。 インラインフレームが選択されると メニューボタンが黒く反転します。 14-1-2. PCサイトビューのGoogle Mapsを選択し、 そのままスマートフォンサイトビューへ ドラッグ＆ドロップします。14.
Google Mapsを利用する場合は？
PCサイトビューにGoogle Mapsがある場合前ページの続き
14-2-5. Google Mapsで表示したい住所を検索します。 14-2-6. Google Mapsにあるリンクボタンをクリックし、 ウェブサイトへの地図埋め込み用コードを表示させます。 クリックして表示 地図埋め込み用コード 14-2-7. 開いたエディタの左上メニュー。 「ソース」をクリックし、HTMLソースを表示します。 14-2-8. 取得した埋め込み用コードをペーストします。 14-2-9. 「反映」ボタンをクリックします。直接URLを指定する場合。
次ページへ続く
14-2-1. メニューから「テキスト」を選択します。 14-2-2. テキストメニューボタンを直接スマートフォンサイトビューへドラッグ＆ドロップします。 14-2-3. テキスト要素を選択し、右クリック→「詳細設定」画面を開きます。 14-2-4. 文字編集の「編集を行う」をクリックし、 エディターを開きます。 14-1-1. その他メニューから「インラインフレーム」を 選択します。 インラインフレームが選択されると メニューボタンが黒く反転します。 14-1-2. PCサイトビューのGoogle Mapsを選択し、 そのままスマートフォンサイトビューへ ドラッグ＆ドロップします。14.
Google Mapsを利用する場合は？
PCサイトビューにGoogle Mapsがある場合15-1-1. PCサイトビューの動画を選択します。選択時左上にiframeの表示が出ていることを確認します。
次ページへ続く
Copyright © 2013 Salespartner Inc, All Rights reserved. 16
15.
YouTubeの動画を利用する場合は？
PCサイトビューにYouTubeがある場合 15-1-2. その他メニューから「インラインフレーム」を 選択します。 インラインフレームが選択されると メニューボタンが黒く反転します。 15-1-3. PCサイトビューのYouTube動画を選択し、 そのままスマートフォンサイトビューへ ドラッグ＆ドロップします。 直接URLを指定する場合。 15-2-1. その他メニューから「インラインフレーム」を 選択します。 インラインフレームが選択されると メニューボタンが黒く反転します。 15-2-2. 黒く反転したメニューボタンを直接 スマートフォンサイトビューへ ドラッグ＆ドロップします。前ページの続き
15-2-3. 空のインラインフレームがスマートフォンサイトビューに作成されます。 15-2-4. 作成されたインラインフレームを選択し、右クリック→「詳細設定」画面を開きます。 15-2-5. クリックして表示を切り替え、「リンクURL」 に表示したい動画のURLを入力します。 15-2-6. 決定ボタンをクリックします。16-1. <font>タグで囲まれたフォームの部品（<input>や<select>）である事。 16-2. DTDでの要素の定義に沿って配置されている事。 ※以下のような場合、利用できません。 A. <form>タグが<table>タグの直下にある (<form>タグは<table>タグの外側か<table>タグの内側に記述して下さい) B. <body>タグ内に存在しない C. <form>タグが入れ子になっている D. そのほか、DTDでの要素の定義に沿って配置されていない 16-3. 入力フォームとして使えるフォーム部品のタグは以下の通りです。 ※随時対応するタグは増える予定です ※ただし、入力できないだけで、送信する情報としては利用できます 例：input type=”hidden” など A. input type=”text” B. input type=”password” C. input type=”radio” D. input type=”checkbox” E. input type=”submit” F. input type=”button” ※buttonタグは現在対応していません G. input type=”image” ※画像は利用できません H. textarea I. select ※multiple(セレクトボックス内の要素を複数選択する機能)には、現在対応しておりません。
Copyright © 2013 Salespartner Inc, All Rights reserved. 18
16.
フォームを利用する場合は？
フォームを使うには、PCサイトのページ構成が以下の条件を満たしている必要があります。 必ずご確認ください。
17-1. 編集画面でフォームボタンをクリックし、 PCサイトビューよりフォーム部品を選択します。 17-2. フォーム部品をそのままスマートフォンサイトビュー上に ドラッグ＆ドロップします。 スマートフォンサイトビュー上にフォーム部品が レイアウトされます。 17-3. フォーム要素を選択し、右クリック→「詳細設定」画面を開きます。 17-4. フォームの「タイトル」を入力して決定ボタンをクリックします。 17-5. それぞれのフォーム部品に対し、必須項目や入力タイプの変更の設定を行います。 17-6. 1〜5までの作業を繰り返し、全ての項目を入力します。 17-7. 編集画面でフォームボタンをクリックし、PCサイトビューより送信ボタンを選択します。 17-8. 送信ボタンをそのままスマートフォンサイトビュー上にドラッグ＆ドロップします。 スマートフォンサイトビュー上に送信ボタンがレイアウトされます。 送信ボタンが画像の場合は、右図のように◯が表示されます。 17-9. フォーム要素を選択肢、右クリック→「詳細設定」画面を開きます。 17-10. フォームの「タイトル」の編集ボタンをクリックします。 17-11. 送信ボタンの「タイトル」を入力して決定ボタンをクリックします。
17.
フォームを利用する手順は？
18-1. 編集画面にて、テキストボタンをそのままスマートフォンサイトビュー上に ドラッグ＆ドロップします。 18-2. スマートフォンサイトビュー上にテキストがレイアウトされます。 18-3. 文字編集の「編集を行う」をクリックすると、HTMLエディターが開きます。 HTMLエディター上の左上メニュー「ソース」をクリックすると、ソースが表示されます。 18-4. HTMLエディター上のソース編集画面にて、<form>……</form>などの フォームを形成するHTMLソースを記述します。
Copyright © 2013 Salespartner Inc, All Rights reserved. 20
19-1. PCサイトで繰り返されているブロック（更新情報など、おなじ構成が連続で利用されている場所） の1つをスマートフォンサイトビュー上にドラッグ＆ドロップします。 19-2. 1つのブロックの変換が完了したら、 スマートフォンサイトビュー上で作成したブロック全体を選択します。 うまく選択できない場合は、右クリック→「親ノード選択」を使います。 19-3. ブロックが選択できたら、右クリック→「同じルールを適用」を選択します。 選択パターンが複数表示されますので、カーソルを当てながら左側のPCサイトビュー上を確認し、 ルールを適用する範囲を決定します。これで、選択したブロックが、 繰り返し表示されるようになります。 19-4. 「同じルールの適用」を変更したい場合は、先ほど作成したブロックを再度選択して、 右クリック→「同じルールを適用」→「解除する」を選択。 再度、別のパターンで「同じルールの適用」を設定することができます。 20-1. 画面上部の「テーブル」ボタンを選択してそのままスマートフォンサイトビュー上に ドラッグ＆ドロップするとスマートフォンサイトビュー上にテーブルが作成されます。 20-2. テーブルの入れ子構造を使って、一つの物件情報をレイアウトします。 20-3. 作成したテーブルコンテナ（青色枠）に対し、「同じルールの適用」を設定すると
19.
新着情報など、内容、個数が動的に変わる要素を変換したい場合は？
20.
不動産物件一覧ページのような「同じルールの適用」要素を
変換する場合は？
21-2. 各要素・コンテナを選択して
右クリック→「詳細設定」画面を開きます。
21-3. 詳細設定から編集します。
Copyright © 2013 Salespartner Inc, All Rights reserved. 22
21-1. 編集画面上部の要素選択メニュー、コンテナ選択メニューの中から追加したいコンテンツを選び、 ボタンをそのままスマートフォンサイトビュー上にドラッグ＆ドロップします。
22-2. Ctrlキーを押しながら、PCサイトビュー内の画像を複数選択します。 22-1. スライドボタンを選択しま す。 22-3. 画像をスマートフォンサイトビューにドラッグ＆ドロップする事で、 一度に複数の画像をスライドに配置できます。
22.
スライドにまとめてPCサイトの画像を配置する場合は？
23-1. 画面上部の「テーブル」ボタンを選択して そのままスマートフォンサイトビュー上に ドラッグ＆ドロップするとテーブルが作成されます。 23-2. 「テーブル」メニューのセル分割数を 4行×2列へ変更します。 23-3. テーブルの8個のセル内にそれぞれ空の「ボタン」を ドラッグ＆ドロップで配置します。 23-4. 「ボタン」コンテナの中に、事前に用意しておいた テキスト・画像をドラッグ＆ドロップします。 23-5. ボタンコンテナの詳細設定メニューから 「幅設定」を80%にします。 23-6. アイコンの色をボックスの背景色で設定します。 23-7. テキスト要素詳細設定メニューの 「上下余白」を12pxにします。 23-8. テーブルコンテナの詳細設定メニュー 「セル内の余白設定」を4pxにします。
Copyright © 2013 Salespartner Inc, All Rights reserved. 24
24-1. 「ページ管理」画面より、作成したページのコピーボタンをクリックします。 24-2. ページタイトルと2ページ目以降のURLを登録します。 24-3. 編集画面より「前のページに戻る」をスマートフォンサイトビューへドラッグ＆ドロップします。 24-4. ページを保存します。 24-5. 「ページ管理」画面へ戻り、コピー元のページを削除します。 この場合、1ページ目を表示したときには、「前のページに戻る」ボタンは表示されませんが、 2ページ目以降を表示した際には、「前のページに戻る」ボタンが表示されます。
24.
変換したスマートフォンサイトの検索一覧ページで
2ページ目以降の「前のページに戻る」ボタンが表示されない場合は？
検索結果の1ページ目をもとに編集しているので、「前のページに戻る」ボタンがレイアウトされていないと 表示されません。作成したページのコピーを作成し、2ページ目以降を登録して編集してください。25-1. 編集画面にて、テキストボタンをそのままスマートフォンサイトビュー上に ドラッグ＆ドロップします。スマートフォンサイトビュー上にテキストがレイアウトされます。 25-3. 編集画面にて、テキストボタンをそのままスマートフォンサイトビュー上に ドラッグ＆ドロップします。スマートフォンサイトビュー上にテキストがレイアウトされます。 25-4. テキスト編集画面のCSS詳細設定タブをクリックします。 例： <li>要素を変換したときに要素の左に付く「・」を消す場合、list-style-type: none;と入力します。 25-2. テキスト要素を選択し、右クリック→「詳細設定」画面を開きます。 25-5. CSS設定より、ここに設定したい スタイルを入力します。
Copyright © 2013 Salespartner Inc, All Rights reserved. 26
25.
詳細画面で設定できない装飾をしたい場合、
プロパティを変更したい場合は？
26-2. ボックスメニュー内「枠」や「影」を 設定します。 CSSを指定して、タップ時に枠線が付くなどの 処理も可能です。 26-1. ボックスコンテナやボタンコンテナを選択し、右クリック→「詳細設定」画面を開きます。
26.
画像にリンクがついている場合、
その画像がボタンだとわかるようにしたい場合は？
Copyright © 2013 Salespartner Inc, All Rights reserved. 28
27.
設定していたテキストが表示されなくなった場合は？
以前の設定時からPCサイトの構造が変わっている可能性があります。 編集画面で確認すると、通知アイコンが表示されますので、確認の上、再度ドラッグ＆ドロップで、 編集し直してください。 例： 表示要素が見つからない場合 → 通知アイコン28.
スマートフォンサイトビューでアイコンがでてきますが、これは何？
テキストや画像が見つからない場合を通知するため、アイコンが表示されています。 アイコンにカーソルをあてると説明文が表示されます。 例1： テキストが見つからない場合 画像の属性が無い状態 例2： 画像が見つからない場合 テキストを画像として表示しようとした場合 → 通知アイコン29-1-1. スマートProの編集画面で、メニューから「ボタン」ボタンをスマートフォンサイトビューまで ドラッグ＆ドロップしてボタンを新規作成します。 29-1-2. 1で作成したボタン内に、メニューから「テキスト」ボタンをドラッグ＆ドロップして テキスト要素を新規作成します。
次ページへ続く
29.
スマートフォン表示とPC表示を切り替えるには？
PCサイト表示機能を用いることで、スマートフォンサイト <=> PCサイトの 表示切り替えができます。 「PCサイトを表示」ボタンの作成方法 スマートフォンサイト内に、「PCサイトを表示」ボタンを作成します。 このボタンを押すと、スマートフォン表示からPC表示に切り替えることができます。前ページの続き
29-1-3. 2で作成したテキスト要素を選択し、「詳細設定」ボタンを押して 詳細設定ダイアログを表示させます。 29-1-4. 作成したボタンのデザインを調整します。 javascipt:feedPrepare._to_pc(); 「PCサイトを表示」に変更します javascipt:feedPrepare._to_pc(); に変更します次ページへ続く
「スマートフォンサイトはこちらから」ボタンの設置方法 PC表示を行った時に、「スマートフォンサイトはこちらから」ボタンを設置する方法をご紹介いたします。
前ページの続き
29-2-1. 「ページ管理」画面の「共通タグ」ボタンをクリックして、 「タグ発行」ダイアログを表示させます。 「タグ発行」ダイアログ内の「スマートフォン表示ボタンを設置しない/する」のトグルボタンの 「設置する」を選択します。 29-2-2. 1で表示されるタグをお客様のPCサイトのHTML内に埋め込んでいただきます。 【「PCサイトを表示」ボタンの作成方法】で作成した「PCサイトを表示」ボタンを押して PCサイト表示を行った場合に、ページの上部に「スマートフォン表示ボタン」が表示されます。 ※「スマートフォンサイトはこちらから」ボタンが表示されるのはスマートフォンでアクセスした場合のみです。 PCでアクセスした場合には「スマートフォンサイトはこちらから」ボタンは表示されません。 ※元々のPCサイトのデザインによっては「スマートフォンサイトはこちらから」ボタン表示が崩れることがございます。 この機能をご利用いただく際は、必ず表示の確認を行っていただきますようお願いいたします。1-1. ページ管理を開きます。
1-2. 削除したいページをページ一覧メニューから選び、左端のチェックボックスにチェックを入れます。
1-3. 実行ボタンを押すとページが削除されます。
※PCサイトにタグが入っていたページを削除した場合は、スマートフォン実機でアクセスしても、PCサイトが表示されます。
Copyright © 2013 Salespartner Inc, All Rights reserved. 32
2-1. ページ管理を開きます。 2-2. コピーしたいページをページ一覧メニューから選びコピーボタンをクリックします。 2-3. 元になるページのタイトルとURLが表示されます。 同様に変換したいページのタイトルとURLを入れ登録することで ページ管理へ新規登録が行われます。 タイトルをクリックして編集画面へ遷移すると元になるページと 同様の変換ルールが適用されたページが表示されます。 3-1. ページ管理を開きます。 3-2. ページ新規作成ボタンをクリックします。 3-3. 「ページの新規作成」ページメニューの 「https://から始まるURLを編集する場合は コチラから作成してください。」をクリックします。 3-4. ページタイトルを入力します。 3-5. 変換元となるURLを登録します。 3-6. 「確定する」ボタンをクリックしてページを登録します。 3-7. ページ管理より登録したページを編集します。 4-1. ページ管理を開きます。 4-2. 「ページ新規作成」ボタンをクリックします。 4-3. ページタイトルを入力します。 4-4. 「ナビから登録」ボタンをクリックします。 4-5. ナビゲーションページよりログインを行います。 4-6. 編集したいページまでナビゲーションページ登録画面内で遷移します。 4-7. 編集したいページまで移動したら、画面右上の「このページを登録する」ボタンをクリックします。 4-8. ページ管理より登録したページを編集します。
2.
ほとんど同じようなページを効率的に作成する場合は？
3.
SSLで保護されたページを変換する場合は？
4.
マイページなどのログイン後のページを変換する場合は？
5-1. ページ管理を開きます。
5-2. 確認したいページをページ一覧メニューから選び、 プレビューURLの「生成」ボタンをクリックします。
5-3. QRコードと確認用URLが表示されます。
5-4. QRコードをスマートフォン実機で読み取り、スマートフォン実機で表示を確認します。
Copyright © 2013 Salespartner Inc, All Rights reserved. 34
6-2. スマートフォン変換するページの「チェックボックス」をチェックします。 6-3. 「本番環境で有効にする」を選択した状態で、「実行」します。
次ページへ続く
6-1. ページ管理を開きます。
前ページの続き
6-4. 「表示設定」に、 がつきました。 6-5. 「共通タグ発行」ボタンをクリックします。 6-6. 「共通タグ発行」ウインドウが開きますので、 「クリップボードへコピー」ボタンをクリックします。 6-7. PCサイトのHTMLソースを開き、<head>タグの中に、 先ほどコピーしたタグを貼り付け(埋め込み)ます。 6-8. タグを埋め込んだHTMLをアップロードします。 6-9. PCサイトへスマートフォンでアクセスすると、スマートフォンサイトへ変換されます。7-1. お客様のPCサイトへ、空白のページを用意していただきます。 7-2. 作成したページのURL新規登録を行います。 7-3. 編集画面を開き、新規コンテナ・要素を追加していきます。
8. 自社のテスト環境で動作確認したい場合は？
オプションでテスト環境の設定が行えます。お問い合わせください。 9-1. ページ管理を開きます。 9-2. 「タグ発行」ボタンをクリックします。 9-3. テスト環境PCページの<head>タグ内にスマートProタグを埋め込みます。 9-4. ページ管理の表示設定にて「テスト環境で有効にする」を選択し、 「実行」ボタンをクリックします。 9-5. テスト環境での実機確認を行うことができます。 テスト環境が登録されている場合、テスト環境内での実機確認を行う事ができます。 リニューアル前のページとリニューアル後のページを複数登録する事ができ、 表示設定もテスト環境と本番環境での表示・非表示が可能です。 http://xxx.com/index.htmlやhttp://xxxx.com/のように 同じTOPページの内容が表示されるがURLが違う場合は、 ページ管理の変換するページの適用範囲設定でそれぞれ登録することできます。7.
PCサイトに無いページを追加する場合は？
9. テスト環境で実機確認を行う場合は？
10. サイトリニューアルなどで
テスト環境と本番環境を使い分ける場合は？
11. TOPページなどURLが違っても
同じページが表示される場合の登録方法は？
12-1. 「ページ管理」画面で「ページの新規作成」をクリックして「ページの新規作成」画面を開きます。 「POSTパラメータによって同じURLでもデザインが大きく異なる場合」など、 1つのURLで複数のデザインを使い分ける方法を説明します。 12-2. 「ページの新規作成」画面で「ナビから登録」をクリックして 「ナビゲーションページ登録」画面を開きます。 12-3. 「ナビゲーションページ登録」下部の画面内で、登録したいページまで遷移します。
次ページへ続く
Copyright © 2013 Salespartner Inc, All Rights reserved. 38
前ページの続き
12-4. 目的のページまで移動したら、「このページを登録する」をクリックします。 12-5. 「ページの新規作成」画面に戻ってきたら、「確定」をクリックしてページを作成します。 12-6. 作成したページのデザインを編集します。 12-7. 1〜6の手順を繰り返して、使い分けたいデザインの数だけページを作成します。 12-8. 「ページ管理」画面に表示されるテーブルの右上にある矢印をクリックし、 「個別タグ」を表示させます。次ページへ続く
前ページの続き
12-9. 「発行」ボタンをクリックして表示される個別タグをPCサイトのページに貼り付けます。 12-10. 9の手順を使い分けたいデザインの数だけ繰り返します。 ※使いたいデザインに合わせて、プログラムを使用してPCサイトのページに埋め込む個別タグを 動的に切り替える必要があります。 ※1つのURLに対して1つのデザインしかない場合は個別タグを使用する必要はありません。 「共通タグ」をご使用ください。 ※1つのページには「個別タグ」か「共通タグ」のどちらかしか使用することはできません （１つのサイト内に「個別タグ」を使用したページと「共通タグ」を使用したページを混在させることは可能です）。例 ① : /products/.*$ ← /products/で始まるURLすべて ② : /products/hosting/.*$ ← /products/hosting/で始まるURLすべて /products/で始まるページのうち、/products/hosting/で始まるものは② それ以外は①を適用させたい。 /products/hosting/ondemand/には、②を適用させたくても優先順位を①、②の順にしてしまうと ①のほうが優先して適用される。 優先順を②、①に入れ換えると②が優先されるので、/products/hosting/ondemand/には②が適用される。 <style>タグやタグはできるだけ<head>タグ内に埋め込んでください。 どうしても<body>タグ内に埋め込む場合は、以下の点に気を付けてください。 <script>タグ読み込み後、HTMLタグをその場に書き込む形式の場合、<script>タグを<div>タグなどで さらに囲ってください。 <style>タグや<script>タグは<head>タグか<body>タグ内に必ず配置してください。 <head>タグや<body>タグの外側に配置した場合、正常に動作しない場合があります。 HTMLの構造が変わると表示されない箇所が出てくる場合があります。編集画面でご確認ください。 複数のサイトを運営している場合で、サイト間で同じテンプレートを共有したい場合はご相談ください。
13.
ページの優先度を設定する場合は？
14.
手作業でHTMLを作っていますが、
スマートProに適した作り方はありますか？
15.
ページを更新して反映したら
実機で表示されない箇所がある場合は？
16.
CMSを使っていて、同じテンプレートを使ったサイトを
複数運営している場合は？
TOPページへのアクセス方法が2通りある可能性があります。 URLの指定で「/index.html>」が設定されている場合、「/」を設定してみてください。 そちらでも解決できない場合は、 「スマートProタグを設置してもスマートフォン用のページが表示されない場合は？」をご参照ください。 元のPCサイトのページに構文エラーなどが存在すると、正しくスマートフォンサイトの表示が行えない 場合があります。 PCサイトの構文チェックを行ってください。 こちらのページよりチェックを行ってページのエラーを修 正してください。 または、以下の原因が考えられます。 ※本番環境もしくは、テスト環境へ変換ルールを利用する設定ができていない場合があります。 「ページ管理」画面で「本番環境で有効にする」を実行してください。 ※複数のサイトを管理している場合や、複数のタグで1つのサイトを利用しようとした場合、埋め込むタ グが間違っていないか確認ください。 ※PCからユーザエージェントを変えてアクセスしている場合、PCからは確認できません(できない場合 があります)。 上記の原因に当てはまらない場合は、お手数ですが弊社までご連絡ください。 ※ご連絡いただいても対応できないケースもございます。あらかじめご了承ください。 スマートフォンで最適に表示されるフォントを設定しているためフォントの変更は行えません。 PCで表示されるフォントとスマートフォン実機で表示されるフォントは異なりますので 必ず実機でご確認ください。 現在、タブレット端末に適した表示機能はございませんが、対応を予定しております。
Copyright © 2013 Salespartner Inc, All Rights reserved. 42
1.
TOPページが変換されない場合は？
2.
スマートProタグを設置しても
スマートフォン用のページが表示されない場合は？
3.
テキストのフォントを変更したい場合は？
4.
タブレット(iPad, Androidタブレットなど）に適したサイトを
作成する場合は？
PCサイトのボリュームによっては、多少表示に時間がかかる場合があります。 PCサイトの情報をすべて読み終える間、画面への描画を行っていないためです。 ※画像は読み込み対象から除いています。 現在は、1サイトにつき1つのみBASIC認証の設定が行えます。 ※1サイトに複数のBASIC認証を設定することは現在行えません。 ※テスト環境をご利用の場合は本番環境とテスト環境で別々のBASIC認証の設定を行えます。 編集画面と実機の表示が異なる場合には、以下の原因が考えられます。 【表示そのものが違う場合】 ・<script>タグなどで、HTMLを動的に操作している。 ※動的にHTMLタグを生成したり、HTML要素の属性を変更したりしている場合、正常に表示ができな い場合があります。 【テキストの改行位置やフォントが違う場合】 ・端末毎に利用しているフォントが違う場合、テキストの改行位置やテキストの形状が若干異なる場合 がございます。 ・Windowsをお使いの場合、編集画面やプレビュー画面で、ひらがなや漢字などに斜体がかからない場 合がありますが、スマートフォンでの表示は斜体がかかるため、編集画面とスマートフォン実機での見た 目が若干異なる場合があります。 【画像の切り抜き】 Firefoxを用いて編集を行った場合、画像の切り抜きを行うと、編集画面と実際の画面で切り抜き範囲が 1ピクセルずれる場合がございます。 Google Chromeをお使いいただくと、より実際の切り抜き範囲に近い切り抜きが行えます。
