Ｄｙｎａｔｅｃｈ
Ｄｙｎａｔｅｃｈ
ダイナテック株式会社
Direct In ホームページメーカー
スマートフォンページ
操作マニュアル
目 次
１.管理画面へのログイン
管理画面へのログイン 各メニューのご案内
２.スマートフォンページの作成
３.スマートフォンページの編集
P P 5 P P
P6 P3
P4
１．管理画面へのログイン
①お使いのブラウザを起動しログイン画面にアクセス して下さい。
②別紙「ホームページメーカー」ライセンス確認書に 記載されている「ＩＤ」及び「パスワード」を入力し ます。
（パスワード変更後は新しいものを入力してくださ い。）
③「ログイン」ボタンをクリックします。
ホームページメーカーの管理画面内にスマートフォン ページ用の管理画面がございます。
スマートフォンページの作成と
スマートフォンページの編集を行います。
②
③ ②
①
③
２．スマートフォンページの作成
◆ページ作成／編集-ページレイアウト
≪表示ページ≫の「初期設定」をクリックして、「設定 内容を保存する」をクリックする。
＊これでスマートフォンページの作成（自動生成）
完了です。
（PCページ用に制作した内容をスマートフォン向けに 最適化したページです。）
≪表示の有無≫にチェックを入れると、サイドメニュー にQRコードが表示されます。
＊別途、パーツレイアウト編集の設定が必要です。
≪ページ公開≫
スマートフォンで PCページを閲覧した際に表示される
「スマートフォンサイトはこちら」の表示を制御できま す。
≪リダイレクト設定≫
「リダイレクトしない」「ダイヤログ表示でリダイレ クト」「自動リダイレクト」から選べます。
■ダイヤログ表示でリダイレクトについて
スマートフォンで PCページを閲覧しようとすると、自 動的にスマートフォンページを案内します。
そして、スマートフォンページとPCページどちらかに アクセスすることができます。
■自動リダイレクトについて
スマートフォンで PCページを閲覧しようとすると、自 動的にスマートフォンページにアクセスします。
※リダイレクトされるPCページはTOPページのみ スマートフォンページURL：
http://www.自社ドメイン名/smart/
※「スマートフォン用のページがある場合はそのページ にリダイレクトする」にチェックを入れた場合、
スマートフォン端末で PC の下層ページにアクセスする と、スマートフォン用サイトの下層の同ページにリダイ レクトされます。
（設定がない場合、またはページが存在しない場合はス マートフォン用トップページにリダイレクトします。）
≪TOPページメニュー表示タイプ≫
トップページのメニューの表示を
「アコーディオンタイプ」
「アイコンタイプ」から選べます。
※下層ページのページメニューはすべてアコーディ オン表示となります。
≪記事データ切替≫
「PCの記事をそのまま使う（連動あり）」「新たに作成し た記事を使う（連動なし）」から選べます。
「PC の記事をそのまま使う」にすると、PCサイトの更 新時に自動的にスマートフォンサイトにも反映されます。
「新たに作成したスマートフォンの記事を使う」を選択 するとスマートフォンのページレイアウトにて編集した 記事を反映します。
≪外部サイト≫
外部サイトを利用するにチェックをすると「外部サイト URL」欄が出てきますので、こちらに外部スマートフォン ページのURLを入力します。
≪Direct In宿泊予約、Direct Inレストラン予約≫
「表示する」「表示しない」から選べます。
「表示する」にすると、ページメニューの下に アコーディオンメニューが表示されます。
アコーディオンタイプ アイコンタイプ
ページメニュー
３．スマートフォンページの編集
≪設定・編集≫
ホームページメーカーマニュアルの「設定・編集」P24 を ご参照ください。
≪カテゴリ移動≫
スマートフォンページのナビゲーションの順番を変更いた します。
※≪記事データ切替≫設定欄を「新たに作成したスマートフォンの記 事を使う」に変更が必要です。
≪記事の一覧表示≫
ホームページメーカーマニュアルの「記事の一覧表示」P32 をご参照ください。
≪新しい記事の作成≫
ホームページメーカーマニュアルの「新しい記事の作成」
P32をご参照ください。
≪新しく作成した記事のみ、取込む≫
クリックすると、一度自動生成した後、PC用で新規に作 成した「記事」を取込みます。
≪一括で取込む（全て削除し、上書き）≫
クリックすると、一度自動生成した後、一括でPC の情報を全て上書きします。スマートフォン用のみ修正 した内容は削除されます。
前ページの「初期設定」をクリックすると、以下の画面が表示されます。
この画面でスマートフォンページのみ修正いたします。
スマートフォンページの注意事項
（1）PCページと同様のレイアウト変更はできません。
（2）PCページで設定した「パーツ」は表示しません。
（3）「ソースモード」で画像を設置している場合、スマートフォンでは最適化されません。
解決策 その1：
スマートフォンページの編集ページで画像サイズを変更する。
画像の横幅設定を280ﾋﾟｸｾﾙ以内（推奨）にする または 横幅を100%にします。
解決策 その2：
スマートフォンページの編集ページで特定（class="autoresize"）のタグを追加する。
・100％表示と[class="autoresize"]タグの違い
100%表示を設定すると、元画像のサイズにかかわらずページ幅に合わせて表示します。
よって、元画像が小さい場合も拡大して表示するため、
画像が引き伸ばされて表示が荒くなってしまうことがあります。
・画像の横幅設定方法
①紹介文エリアに入っている画像の上にカーソルを乗せ、右クリ ックをし「画像のプロパティ」を開きます。
②画像情報タブの「幅」の欄に280ﾋﾟｸｾﾙ以下の数値または100%
と入力します。（幅100%表示の際には高さ欄は空欄にしてくださ い）
③OKを押し、保存をします。
正しく保存されていれば、ソースモードで表示した際に
「style="width: 280pxまたは100%;"」が追加されます。
<img src=“画像URL” style="width: 100%;" />
※ソースモードで直接記述を追加することも可能です。
・画像にクラスタグを設置する方法
①紹介文エリアに入っている画像の上にカーソルを乗せ、右 クリックをし「画像のプロパティ」を開きます。
②高度な設定タブの「スタイルシートクラス」欄に
「autoresize」と入力します。
③OKを押し、保存します。
正しく保存されていれば、ソースモードで表示した際に
「class="autoresize"」が追加されます。
<img class="autoresize" src=“画像URL”>
※ソースモードで直接記述を追加することも可能です。
（4）同一サイト内へリンク設置している場合、スマートフォンページではクリック（タップ）できません。
＊外部サイトへのリンクはクリック（タップ）できます。
解決策：
スマートフォンページの編集画面のソースモード画面で特定（_ rel=”external”）のタグを追加する。
ソースモード（html）での設置リンクタグ
【通常のサイト内リンクタグ一例】
<a href=”リンク先URL”>○○</a>
【スマートフォンページ用のサイト内リンクタグ一例】
<a href=”リンク先URL” rel=”external”>○○</a>
ご不明な点などございましたら遠慮なくお問合せくださいませ。
ダイナテック株式会社 Homepage Maker 運営事務局
TEL050-3531-2392 Ver:20161221-2
Ｄｙｎａｔｅｃｈ
Ｄｙｎａｔｅｃｈ
