＠dream編
＠dream編一覧へ戻る
テクニック集トップへ戻る
＠dreamの基本機能や便利な機能をご紹介しています。
12
「お勧め一覧」を利用しよう
ホームページに物件写真が掲載されていると、閲覧者の興味を引きやすくなります。
＠dreamでは登録された写真を使って、かんたんにトップページに写真を掲載することが出来ます。
写真をクリックすると詳細ページが開きます。写真も簡単に入れ替えることが出来ます。
※＠dreamの物件マスタで「写真1」に画像が登録されていることが設定の条件です。
2013年1月以降リリースのProgreV6～複数のお勧め一覧設定が出力できるようになりました。
設定時には表示するページへの初期設定が作成したお勧め一覧ごとに必要になります。
また定期的なメンテナンスが不可欠ですので、管理が行き届く範囲でご利用いただくことをお勧めします。
12-1 お勧め一覧を設定する
12-2 トップページにお勧め一覧を反映させる設定をする
12-3 お勧め一覧に設定する画像を選ぶ
（2015年以前にリリースされたProgre）
12-4 トップページでお勧め一覧を確認する
12-5 複数のお勧め一覧を作成する
※ProgreV6から対応
・お勧め一覧削除される場合の注意事項
・2021年2月以降のProgre最新版 削除注意ポップアップ表示
12-6 2016年以降のProgre最新版での画像選択
12-1
「お勧め一覧」を設定する
メインメニュー＞HPアップロードをクリックします。
「HP編集」＞「お勧め一覧設定」をクリックします。
画面が開いたら「お勧め一覧設定変更」のボタンをクリックします。
表示する枚数や画像のサイズを設定します。（この作業は初回のみ必要です）
１、表示するマスの数を設定をします。縦、横、お好みの表示数を選択してください。
２、縦幅、横幅を決めます。上記の場合、縦に1マスなので縦幅は100pxに設定しました。
横幅に4マスなので400pxにしています。トップページに表示させることを考えると、
横幅はある程度の限界が出てきます。枚数と幅のバランスを考えて設定してください。
３、設定が終わったら「保存」ボタンを押します。
４、「以下のタグをクリップボードにコピー」ボタンをクリックします。
（この時点ではクリックしても見た目には何も起こりません）
12-2
トップページに「お勧め一覧」を反映させる設定をする
ホームページビルダーを起動します。トップページ「index」を開いてください。
「お勧め一覧」を入れたい場所をクリックし、入れたい場所にカーソルが点滅した状態にします。
その状態のまま、「ページ/ソース」の部分をクリックします。
カーソルが置かれた状態のまま、再度「Enter」を押して改行しておきます。
ソース側で、カーソルが置かれた位置にあたる記述部分が黄色くなります。
ソース側の黄色くなった部分をクリックして、カーソルが点滅した状態にします。
カーソルを置いた状態で「右クリック」、「貼り付け」を選択します。
＠dreamで設定した際、「以下のタグをクリップボードにコピー」ボタンでコピーしたタグが挿入されました。
以下のようなタグが記述されていればOKです。（数字や冒頭は同じとは限りません）
売買版が例になっています。「baibai」と書かれた部分は、賃貸「bukken」店舗「tempo」となっています。
<iframe src="baibai/option/picturetable.htm" align="center" width="400"
height="100 "name="uri" frameborder="0" scrolling="no"></iframe>
「プレビュー」をクリックしてプレビュー画面に移動します。
「このプログラムではこのWebページを表示できません」の文字が入っていれば成功です。
この時点で「お勧め一覧」の写真は見えてないのが普通です。確認出来たら「上書き保存」してください。
ここまでの作業は初めてお勧め一覧の設定をする今回限りです。
次回からは以下、掲載する写真を＠dream内で選択する作業のみになります。
12-3
「お勧め一覧」に掲載する画像を選ぼう
掲載する物件写真を選択します。メインメニュー＞HPアップロード＞HP編集＞お勧め一覧設定
「お勧め一覧作成画面」が開いたら「検索」ボタンを押します。
物件を選びやすくするために、「写真」が登録されている「HP公開」の「一般公開」物件を検索します。
●売買版および賃貸版dream-Progreの場合
HP公開、一般公開（物件、画像ともに）、画像あり、写真１が登録されている物件を探します。
検索条件を入力したら「検索」ボタンを押します。検索結果が出たら「戻る」で設定画面に戻ります。
※会員専用の物件を選択すると「会員専用」のアイコンで表示され写真は出ません。
目を引くための写真掲載が目的なので、基本的には一般公開の物件を設定することをお勧めします。
一覧に出ている検索結果から、掲載する物件を選択します。青枠で囲まれた部分が登録される場所です。
掲載したい物件をダブルクリックすると、青枠のマスで囲まれた部分に選んだ物件の写真が登録されます。
１つのマスに物件が入ると、青い枠は隣のマスに移ります。次々に物件を選んでください。
※ここでは写真と枠のバランスは悪くても問題ありません。掲載したい写真が入ったかどうかだけ確認してください。
設定したすべてのマスに写真が入ったら「プレビュー」ボタンをクリックして確認します。
写真を変えたい場合はプレビュー画面の「物件選択画面へ戻る」ボタンで設定画面に戻ります。
写真を変えたいマスをクリックして青枠で囲まれたら、新しい物件をダブルクリックして写真を登録しなおしてください。
確認出来たら「保存」ボタンをクリックします。「設定保存完了」の確認が出ますので「OK」をクリックします。
「戻る」ボタンでHPアップロードの画面に戻ります。
１番上の「物件情報を更新して、ホームページを更新する」にチェックを入れて、
「HP出力」のボタンを押してアップロードしてください。
※次回、掲載写真を変更する場合、12-3の作業を行ってください。
12-4
トップページで「お勧め一覧」を確認する
12-2で上書き保存しておいたトップページ「index」をアップロードします。
インターネットでトップページを開き、まずは「お勧め一覧」が表示されているか、確認してください。
全ての作業が正しく終了しても表示されない場合、アップロードしきれていない可能性があります。
初回アップロード時は、下図のように画像が途中で切れた状態に表示される場合がほとんどです。
（お勧め一覧設定で設定した幅とトップページの幅、枠線の幅などの関係で多少の誤差が出るため）
ホームページビルダーでトップページ「index」を開き、お勧め一覧の表示部分を微調整します。
（初回のみの作業です）
「お勧め一覧」の上でクリックし、「お勧め一覧」の部分がピンクで囲まれた状態にします。
ピンクで囲まれた状態のまま、囲まれた中央下にある「■」周辺にカーソルを当てると上下の矢印に変わります。
カーソルが上下の矢印に変わったら左クリックし、左クリックした状態でマウスを下に動かします。
※下図は分かりやすいように、上下矢印はかなり大きく編集した画像でご覧頂いています。
左クリックしながらマウスを下に動かすと、「お勧め一覧」の枠が下に伸びて広がります。
「上書き保存」→アップロード→インターネットで確認（更新ボタンを押す）しながら調整してください。
※表示されていない範囲にもよりますが、数ミリ程度伸ばしただけでは、インターネット上ではあまり変わりません。
ピンクで囲まれた部分の1/3程度を伸ばしてみるなど、ある程度広げたところを基準に微調整してみてください。
微調整の結果、「お勧め一覧」がトップページにきれいに表示されるようになりました。
今後は「12-3 お勧め一覧に掲載する画像を選ぼう」の手順で、定期的に写真を変更するのが効果的です。
12-5
複数のお勧め一覧を作成する
2013年1月以降のProgreV6 から対応
お勧め一覧の複数作成に対応しているバージョンの＠dreamをご利用の場合、
作成画面左上に設定選択欄が表示されます。
新規登録・・・・お勧め一覧を新規で作成する際に選択します。
Ver5設定・・・・＠dreamV5でお勧め一覧をご利用中の方がバージョンアップでV6にした場合、
元からあるお勧め一覧は便宜的に「Ver5設定」という名前で保持されています。
Ver5設定を変更する場合は設定を選択して、設定名を変更、「保存」してください。
2つ目のお勧め一覧を作成してみます。
今回は新築物件をアピールするお勧め一覧を作ることにして説明します。
「新規登録」で、お勧め一覧の設定名を入力します。
「保存」をクリックします。
「OK」を押すと作成が完了します。
新しく作成した「新築物件特集用」のお勧め一覧設定を行います。
12-1設定
を参考にサイズやマス数、色などを設定し「保存」します。
新しく作成した「新築物件特集用」のお勧め一覧の表示用タグをコピーし、
12-2の手順
で表示したいページへタグを設定してください。
アップロードを行うと表示用タグを貼ったページで確認することができます。
物件の入れ替えを行う際は「検索」などから物件を選択して「保存」し、アップロード。
「コメント編集」する場合はボタンから行ってください。
複数のお勧め一覧を作成したい場合、上記作業を繰り返してください。
【ご注意】
定期的なメンテナンスが不可欠ですので、物件の入れ替え、確認などの
管理が行き届く範囲でご利用いただくことをお勧めします。
お勧め一覧を削除される場合の注意事項
お勧め一覧は作成した順番にテーブル番号が付与されますが、
利用されないお勧め一覧を削除されると、テーブル番号が繰り上がり
表示用タグ・WordPress用ショートコードが変更されます。
削除される場合には、HPに埋め込みされた表示用タグ・WordPress用ショートコードを
必要に応じて変更してください。
※ここでは設定名「おすすめ」「①picturetable3.htm」を例にご案内いたします。
作成したお勧め一覧は、上から順に番号が付与されていきます。
２番目の設定名「おすすめ」のお勧め一覧設定は
表示用タグ・WordPress用ショートコード共に「picturetable2」になっています。
設定名「①picturetable3.htm」は上から３つ目になるので、
表示用タグ・WordPress用ショートコード共にpicturetableは「3」となっています。
２番目の設定名「おすすめ」を削除します。
（表示用タグ・WordPress用ショートコード共に「picturetable2」になっています。）
※削除を実行してしまうとバックアップがない限り、元に戻すことはできません。
削除される場合は、慎重に作業を行ってください。
設定名「おすすめ」が削除されました。
設定名「①picturetable3.htm」が上から２つ目に繰り上がったので、
表示用タグ・WordPress用ショートコード共にpicturetableは「2」に繰り上がりました。
削除した設定以下の物は全て繰り上がりになるので、
HPに挿入設定をしている場合には、修正が必要となります。
2021年2月 賃貸Progre8.21～ 売買Progre9.21～
HP上に埋め込んだ表示用タグ・WordPress用ショートコードの修正を忘れないように
挿入したURL見直しを促すポップアップメッセージがでるようになりました。
12-6
2016年以降のProgre最新版での画像選択
2016年以降のProgre最新版では、画像選択や順番の入替が可能になりました。
【順番の入替】
順番を入れ替えたい画像を選択します。
方向キーで好きな場所に順番を入替てください。
【画像の選択】
お勧め一覧に載せる画像を選択することができるようになりました。
変更したい画像を右クリック＞「画像選択」します。
画像選択画面が表示されます。選択した物件に登録された「公開」状態の画像が表示されます。
ダブルクリックでお勧め一覧に出す画像を選択してください。 （赤枠は会員公開の画像）
▲上へ
＠dream編一覧へ戻る
