ホームページビルダー編 ホームページビルダー編一覧へ戻る テクニック集トップへ戻る

ホームページ編集に欠かせないホームページビルダーの
ネット不動産運営に必要な基本操作をご紹介しています。

3 　スマートフォンHPひな形「キャンディ」編集時の注意点


スマートフォンHPひな形「キャンディ」をホームページビルダーで編集する際の注意点をまとめています。


・スマートフォンページをビルダーで編集する際の注意点（必ずお読みください）
・ヘッダー画像の入れ替えについての作業手順
・ページ下部のコンテンツ追加の作業手順


編集前には必ずバックアップを取って、元に戻せる状態にしてから行ってください。



3-1 　ビルダーで編集する際の注意点（必ずお読みください）

スマートフォン用HPは、さまざまなタイプのキャリア（画面の大きさ）に合わせられるようPC用ページとは
違った作りになっています。ビルダーで編集する際、横幅などをむやみに変更しないようにしてください。


スマートフォンで見ると画面のサイズに合わせ、以下のように表示されますが・・・






ホームページビルダーで開くと、編集画面では以下のようなサイズで表示されますので編集には注意が必要です。






画像の入れ替え、追加などをする場合は元のサイズやレイアウト幅に合わせて編集してください。




　【Aのヘッダー画像の入れ替えの場合】　※手順はこちら

　差し替えたい画像を同じサイズで用意してください。
　（スマートフォンで見えるようなサイズの小さな画像ではきちんと表示されません）



　【Bへメニューアイコンの差し替えや追加をする場合】

　差し替える場合は同じサイズのアイコンを用意して入れ替えてください。
　アイコンの追加をする場合は、横には追加せず、下に伸ばしていく形になります。
　（横幅を増やすとスマートフォンによって正しく表示されない場合があります）







　【Cにメニューを追加する場合】　※手順はこちら

　通常の「表」で作成されていません。追加する場合は別の作業が必要になります。　





3-2 　ヘッダー画像を入れ替える場合の作業手順　


入れ替える画像を用意します。同じサイズで準備する必要があります。640×278でご用意ください。






ホームページビルダーで「index.htm」ファイルを開きます。ヘッダー画像を選択＞右クリック「削除」します。






削除したところからカーソルは動かさず、「挿入」＞「画像ファイル」＞「ファイルから」　差し替える画像を選択します。






差し替えたい画像が挿入されました。挿入した画像の上で右クリック＞「属性の変更」をクリックします。






サイズを削除します。（この画像はサイズが入っているとスマホで正しく表示されません）
「クリア」して、幅と高さが空欄になったことを確認して、「OK」してください。上書き保存して作業は終了です。アップロードしてください。




アップロード後、スマートフォンで確認してください。


※画像が崩れてしまった場合は、下記手順を確認の上、必要な記述を入れてください。


編集画面を「ページ/ソース」にして、ヘッダー画像をクリックします。





画像をクリックすると、該当箇所のソースが黄色で表示されます。こちらに必要な記述を入れます。






下記の位置にカーソルを置き、半角スペースを入れます。






下記のソースをコピーします。

style="max-width: 640px; max-height: 278px; width: 100%; "




コピーしたソースを貼り付けてください。






記述が入りました。　※「"」や「;」などは消さないよう注意してください。上書きして「index.htm」を再度アップして確認します。








3-3 　ページ下部のメニューを追加する場合


ページ下部のメニューを追加します。下記の手順で行ってください。



追加したいすぐ上のメニューのところで右クリック＞「レイアウトコンテナ」＞「レイアウトコンテナの複製」をクリックします。







メニューが複製されました。編集をしていきます。






表示を新しいメニュー名に変更します。






リンク先を変更します。変更したメニューの上で右クリック＞「リンクの設定」を開きます。






URLを新しいリンク先URLに変更します。「OK」で終了します。





上書き保存してアップロードしてください。スマートフォンでの確認をお願いします。

　　　　　▲上へ　　　　　　   　　
ホームページビルダー編一覧へ戻る