【ホームページビルダー SP版】ページの追加・階層化とメニュー編集を画像付きで解説

記事内に商品プロモーションが含まれる場合があります。
ホームページビルダーSP

この記事では、ホームページビルダー SP版を使ったページの作り替え方法を画像付きで解説します。

画像はバージョン19のものですが、他のバージョンをお使いの方も基本操作は同じですのでそのままお読みください。

ページを作り替えてみましょう

まずは必要なページを追加し、不要なページを削除することから始めます。

ホームページビルダー19 ページ管理画面

① ページを追加してみましょう

ページ追加画面

ページのタイトルを入力します。タイトルは後からでも変更できるので、まず仮の名前でもOKです。

ここでは例として「お菓子の部屋」と入力して「OK」をクリックします。

ページタイトル入力画面

これでページが追加されました。

💡 ページ名の変更や削除をしたいときは、「ページ名」を右クリックするとメニューが表示されます。

ページ追加完了

② ページを複製して階層化してみましょう

サブページ(子ページ)を作りたいときは、既存のページを複製して階層化する方法が便利です。

ページ複製画面

ページを複製してコピーを作ります。次に、そのコピーページをクリックして「変更」を選択します。
階層化するには「親ページ」を選択し、タイトルを入力して「OK」をクリックします。

ホームページビルダー19 階層化設定

操作後、一見すると階層が表示されないため「うまくできていないのかな?」と思いがちです。
また「そのタイトルはすでに使われているので、別のタイトルにしてください」というメッセージが出ることがありますが、これは正常な動作です。あわてず別のタイトルを入力してください。

ホームページビルダー19 タイトル重複エラー

階層を確認したいときは、親ページのタイトルをダブルクリックしてください。子ページの一覧が表示されます。

ホームページビルダー19 子ページ階層表示

③ メニューを編集しましょう

サイトのページ構成ができたら、ナビゲーションメニューの内容も合わせて編集します。
ページで階層化した内容は、メニュー側にも同じく階層化の設定が必要です。

サイトナビゲーション編集

「ナビゲーション」をクリックすると、右側にサイトナビゲーションパネルが表示されます。こちらからメニューの編集を行います。

サイトナビゲーションパネル
メニュー編集手順1
メニュー編集手順2

新しいページやリンクをメニューに追加したい場合は、「メニュー項目の追加」をクリックします。

メニュー項目の追加
メニュー項目追加完了

プレビューで確認してみましょう

プレビュー確認

リンクが追加され、階層メニューもきちんと表示されていますね!

ところで、プレビューから編集画面に戻る方法がわからなくて困ったことはありませんか?
実はこれ、ちょっとわかりにくい仕様なんです。

解決策はシンプル!
プレビューボタンをもう一度クリックするだけで、サブナビゲーションバーが再表示され、編集画面に戻ることができます。

プレビューから編集画面に戻る方法
参考本のご紹介

「ホームページ・ビルダー19」に対応した、こだわりのサイト制作テクニック集です。バージョン23をお使いの方にも参考になる内容です。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次