• 2014年12月17日

ホームページビルダー18 スマートフォンページの作成

ホームページビルダー18 スマートフォンページの作成

ホームページビルダー18 スマートフォンページの作成 640 430 パソコン生活サポート Pasonal

今回はホームページビルダー18(以下、hpb18)でスマートフォンのページを楽々作成しちゃいましょう。手順もさほど複雑ではなく、簡単な流れで作ることができます。

スマートフォンページの作成

hpb18のいいところは、スマートフォンのような複雑なページでも簡単に作成できることです。

テンプレートのデザインも色々あるので、好きなものを選べます。「もう少し凝った作りにしたい」とか、「動的な要素を追加したい」などの場合は、別途知識が必要になります。

まずは、Step1~6までを実践してみましょう!

 

Step1:上部メニューから「スマホ追加 / 同期」をクリック

スマホ追加 / 同期 をクリック
hpb18を起動して、上部メニューを見てください。

 

Step2:PCページを変換して作成

「PCページを変換して作成」をクリック
新しく作成することも出来ますが、今回は、デフォルトのデザインを使用します。

 

Step3:「詳細設定」をクリック

デザインを選び、「詳細設定」をクリックする
デザインを選択し、詳細設定で調整していきます。

デザインによっては上手く表示されない、デザインが崩れる等があります。その場合は、別のデザインを選択してみましょう。

 

Step4:下の項目2つにチェックをつける

下の項目2つにチェックを付ける
チェックボックスにチェックを入れます。

スマートフォン用の画面は小さいため、サイドバーが入れてしまうと、ごちゃこちゃになります。

必ずサイドバーは表示しないにチェックしましょう。

 

Step5:作成をクリック

「作成」をクリック
そのまま作成ボタンを押せば、スマートフォン用のページが自動的に作成されます。

 

Step6:プレビューで確認してみよう!

プレビューで確認
プレビューでデザインのズレや崩れがないか確認しましょう。

実際にボタンをクリックできるので、試しに動かしてみるのもいいでしょう。

このプレビューで崩れが起きるようなら、再度最初からトライし、別のデザインを選択してください。

 

スマートフォンページの削除

フォルダに切り替えて、対象フォルダを削除
ページを削除する場合は、簡単です。

画像のようにタブを「フォルダ」に切り替えて、対象のフォルダを選択します。フォルダ名は変更していなければ、「sp(Smart Phoneの略)」となっています。

右クリックをして、「削除」を選択するだけでOKです。

 

 

PCとスマートフォンの同期

PC側のページを編集したら、スマートフォンのページと同期しなければ、編集は反映されません。

編集したら忘れずに同期させましょう。ただし、同期させるには注意が必要です。

スマートフォンのページを編集しても、「スマートフォンと同期」のボタンを押してしまうと、スマートフォン側の編集内容が全てクリアされてしまいます。

この点だけは注意しましょう。

 

Step.1 PC側のページを編集する

ページを編集し、上書き保存する 「 Ctrl + S 」
PC側で、グローバルメニューの入れ替えやなど、任意の箇所を修正します。

 

Step.2 「スマートフォンページの同期」を選ぶ

スマートフォンページとの同期
上部メニュー「スマホ追加 / 同期」を選択し、「スマートフォンページの同期」をクリックします。

 

Step.3 全てのページを選択しましょう

「全てを選択」にチェックを入れる
ウィンドウ下部にある、「すべて選択」をクリックして、全ページにチェックを付けます。

OKなら、「同期」のボタンをクリックして確定させます。あとは自動的に同期が反映されます。

最後は、プレビューで反映されたかを確認しましょう。

 

 

動画でらくらく講座はこちら

こちらでは動画で操作を学ぶことができます。なるべく分かりやすく解説しているので、初心者の方でも安心してご覧になれます。

 

スマートフォンページの作成と削除の動画講座

 

PCページとスマートフォンフォンのページを同期させるの動画講座

 

ホームページビルダー18の関連記事