＠dream編HPアップロード　42、静的ページ　レスポンシブHPを出力

1	静的ページ　レスポンシブHPを出力　　2017年6月　＠draem-Progre賃貸・売買　最新版～

静的アップロードが2017年6月＠draem-Progre賃貸・売買（賃貸8.17.1～、売買9.17.1～）　
最新版よりレスポンシブデザインにできるようになりました。

サンプルページ

※「レスポンシブデザイン」とは、PC、タブレット、スマートフォンなど、　複数の異なる画面サイズを
　　Webサイト表示の判断基準にし、　ページのレイアウト・デザインを柔軟に調整することを指します。
　　複数の異なる画像サイズ対応となるため、表示内容は限られてきます。

※レスポンシブデザインについてのカスタマイズにつきましては
　　　　　弊社サポートではご案内いたしかねます。ご了承ください。

１．レスポンシブデザインの概要
２．静的ページのレスポンシブデザインの出力設定
３．レスポンシブページで作られなくなるページ
４．Google関連の設定（Google Analytics/GoogleMapAPIキー）　　
　　　（GoogleMapAPIキー取得方法と設定につきましてはこちらをご確認ください。）
５．自分のHPでレスポンシブページの確認方法

42-1	レスポンシブデザインの概要

レスポンシブデザインは、複数の異なるデバイス表示に対応させるため、
表示項目や画像などが可変、移動されるような作りになっています。
そのため、レスポンシブデザインでは、
厳選された内容を表示できるようにしているので、一部の項目などが表示されなくなります。

【物件一覧】
　　基本は既存と変わらずデザインがレスポンシブになります。
　　物件一覧のURLが変更になります。
　　例）賃貸居住用：bukken/r/category-k.html　賃貸事業用：bukken/r/category-j.html　
　　　　賃貸駐車場：bukken/r/category-p.html
　　　　売買居住用：baibai/r/category-k.html　　売買事業用：baibai/r/category-j.html

既存URLとレスポンシブURLの違い
■賃貸
＜居住用＞
既存URL	ドメイン/bukken/bukken.html
レスポンシブURL	ドメイン/bukken/r/category-k.html
＜事業用＞
既存URL	ドメイン/bukken/t_bukken.html
レスポンシブURL	ドメイン/bukken/r/category-j.html
＜駐車場＞
レスポンシブURL	ドメイン/bukken/p_bukken.html
	ドメイン/bukken/r/category-p.html

■売買
＜居住用＞
既存URL	ドメイン/baibai/b_bukken.html
レスポンシブURL	ドメイン/baibai/r/category-k.html
＜事業用＞
既存URL	ドメイン/baibai/b_bukken3.html
レスポンシブURL	ドメイン/baibai/r/category-j.html

【駅別一覧(特選別一覧、検索条件一覧)】
　　表示する駅(特選、検索条件)は既存の設定引き継ぎとなります。
　　物件の並び順は既存の設定引き継ぎとなります。
　　駅（地区）別一覧のURLが変更になります。

　例）賃貸：bukken/r/0-0-s.html（シングルの場合）　　　売買：baibai/r/0-0-k.html（戸建ての場合）

既存URLとレスポンシブURLの違い
■賃貸
＜シングル＞
既存URL	ドメイン/bukken/0-0s.html
レスポンシブURL	ドメイン/bukken/r/0-0-s.html
＜ファミリー＞
既存URL	ドメイン/bukken/0-0f.html
レスポンシブURL	ドメイン/bukken/r/0-0-ｆ.html

■売買
＜戸建て＞
既存URL	ドメイン/baibai/baibai/0-0k.html
レスポンシブURL	ドメイン/baibai/r/0-0-k.html
＜マンション＞
既存URL	ドメイン/baibai/baibai/0-0m.html
レスポンシブURL	ドメイン/baibai/r/0-0-m.html
＜土地＞
既存URL	ドメイン/baibai/baibai/0-0m.html
レスポンシブURL	ドメイン/baibai/r/0-0-m.html

【詳細ページ】
　　物件一覧、駅別一覧、特選別一覧などへのカテゴリリンクはなくなります。
　　　フリーテキスト・フリー項目は表示されません。
　　※売買フリー項目1「他法条例」は入力がある場合は規約で必須になるため表示されます。

　　物件詳細のURLが変更になります。
　例）賃貸：/bukken/r/s/物件番号.html　　　　売買：/baibai/r/s/物件番号.html

既存URLとレスポンシブURLの違い
■賃貸
既存URL	ドメイン/bukken/syousai/数字/物件番号ssi.html
レスポンシブURL	ドメイン/bukken/r/s/物件番号.html

■売買
既存URL	ドメイン/baibai/syousai/数字/物件番号dat.html
レスポンシブURL	ドメイン/baibai/r/s/物件番号.html

※静的　レスポンシブページ出力後に自分のHPでレスポンシブページの確認方法はこちらから

　※Webコメントはユーザ様によりタグ等のカスタマイズされていらっしゃいますので、
　　必要に応じて調整をお願いいたします。

コメントが長くなるとどんどん下にずれていきます。
長文や画像タグ、他サービスの埋め込みタグなどを入れている場合は
レイアウトが著しく崩れる可能性があります。
スマートフォンで表示されることも考慮し、調整をしてください。

※レスポンシブに切替えされる前に、一度サポーターまでご相談ください。

42-2	静的ページのレスポンシブデザインの出力設定

静的ページのレスポンシブデザイン出力設定

HPアップロード＞HP編集＞HP基本設定＞「全般」タブ＞作成対象

【既存のみ】
従来の静的ページのみ
作成されます。

【レスポンシブのみ】
レスポンシブデザインのみ
作成されます。

【両方】
従来の静的ページと
レスポンシブデザインの両方が
作成されます。

従来のアップロード機能を利用します。
既存のHTMLフォルダ内にフォルダ(rフォルダ)を作成し、その中にレスポンシブページを生成します。
画像ファイルは既存の物を流用するので再度UPする必要はありません。

※静的　レスポンシブに変更しアップロードをした場合、
　　レスポンシブのファイルは「Htmlフォルダ」の中に「rフォルダ」が作られアップロードされます。

既存URLとレスポンシブURLの違い（賃貸の場合の例）
既存URL	ドメイン/bukken/0-0s.html
レスポンシブURL	ドメイン/bukken/r/0-0-s.html
「ｒフォルダ」の中にレスポンシブ用のURLでファイルが作られるためリンク先URLが変わります。レスポンシブページをご利用の場合、必要に応じて貼替えをしてください。その他のページに関してのURLは下記をご確認ください。既存ページとの違いについてはこちらをご確認ください。

■（例）賃貸レスポンシブURL
シングル	ドメイン/bukken/r/0-0-s.html
ファミリー	ドメイン/bukken/r/0-0-f.html

物件詳細	ドメイン/bukken/r/s/物件番号.html

■（例）売買レスポンシブURL
戸建て	ドメイン/baibai/r/0-0-k.html
マンション	ドメイン/baibai/r/0-0-m.html
土地	ドメイン/baibai/r/0-0-t.html

物件詳細	ドメイン/baibai/r/s/物件番号.html

※静的　レスポンシブページ出力後に自分のHPでレスポンシブページの確認方法はこちらから

42-3	レスポンシブページで作られなくなるページ

レスポンシブ出力に切り替えた場合、下記ページはレスポンシブページとしては出力されなくなります。
下記ページを運用ご利用の方は、既存のページもアップロードできる「両方」にチェックを入れてアップロードをしてください。

※下記ページは既存の静的ページとしてアップロードされますのでレスポンシブにはなりません。

会員全般/エリア全/棟全般/新着一覧/価格変更一覧/間取一覧/写真一覧/地図一覧/地域一覧
おすすめ一覧/携帯全般/メール公開物件の詳細/商談中・成約済物件の詳細

42-4	Google関連の設定（Google Analytics/GoogleMapAPIキー）

静的　レスポンシブデザインの出力は、別のファイルを生成しアップロードをするのでGoogle関連の再設定が必要となります。

■Google Analyticsについて

　【Google Analyticsをこれからご利用される場合】
　　その他編11番　アクセス解析(GoogleAnalytics)の設置をご確認の上、準備を進めてください。

　【Google Analyticsをすでにご利用でトラッキングコードの再表示をさせたい場合】
　 Google Analyticｓにログインの上、トラッキングコードの再表示で手順をご確認ください。

※今回は売買最新版にてご案内いたします。（作業は賃貸版も同様です）

１、トラッキングコードを＠dreamソフトで設定がされているか確認をする

HPアップロード＞HP編集＞HP基本設定＞全般

※自由編集テンプレートをご利用の場合には、【既存の設定を使用して出力をする】に
　　チェックを切り替えてください。

＞【各種設定】タブを開く

２、アナリティクストラッキングコードを貼り付ける

　※正しいトラッキングコードが貼られている場合には、【閉じる】をクリックして確認は終了です。
　※トラッキングコードが新しいか古いか　見分ける方法はこちらから

　※自由編集テンプレートををご利用の方は、トラッキングコードを貼り終わりましたら、
　　　一度【全般】タブに戻り【自由編集テンプレートを使用する】にチェックを切り替えてから
　　　【保存】をしてください。

■GoogleMapAPIキーについて

静的レスポンシブデザインは、新しいページを作成しアップロードをします。
また、複数のデバイスで同じページをデバイスによって見やすいように可変され表示させることから
GoogleMapAPIキーの取得と設定が必要となります。

取得方法と設定につきましてはこちらをご確認ください。

42-5	自分のHPでレスポンシブページの確認方法

静的　レスポンシブページのURLには決まりがあります。
URLを貼替される際には、レスポンシブページの物件一覧をインターネットで表示し
各沿線（地域）一覧や詳細画面をたどってURLを取得し　リンクの貼替をしていきましょう。

※ユーザー様ごとにドメインURLは違います。
　　下記URLをコピーし、ご利用のブラウザにHPを表示し、ドメインの後ろに張り付けてご確認ください。

１、下記タグ＞左クリック＞右クリック「コピー」する

■賃貸　レスポンシブ　URL

居住用		事業用		駐車場
bukken/r/category-k.html		bukken/r/category-j.html		bukken/r/category-p.html

■売買　レスポンシブ　URL

居住用		事業用
baibai/r/category-k.html		baibai/r/category-j.html

※2018年2月棟一覧、棟詳細ページがレスポンシブデザインで出力できるようになりました。

■賃貸　棟レスポンシブ　URL

居住用	事業用	駐車場
bukken/r/g/glist0.html	bukken/r/g/glist1.html	bukken/r/g/glist2.html

■売買　棟レスポンシブ　URL

戸建	マンション	土地
baibai/r/g/glist0.html	baibai/r/g/glist1.html	baibai/r/g/glist2.html

建物全部	建物一部
baibai/r/g/glist3.html	baibai/r/g/glist4.html

２、ブラウザのアドレスバー＞カーソルを点滅させる＞右クリック＞貼付け

３、貼付け後、キーボードの【Enter】で確定すると、
　　　レスポンシブページのカテゴリ一覧（物件一覧）が表示されます。