ホームページビルダー21を使うに際にはまず、まずクラシックとSPのどちらかを選択します。WordPressにするかどうかも重要な点です。
- クラシック
- HTML編集 既存のサイトの更新
- WordPressテンプレート ワードプレス・サイトの作成
- フルCSSテンプレート
- SP
ホームページビルダーは元来はHTMLを編集する道具でした。その流れはクラシックとして残っています。SPはバージョン19で導入されたまったく新しいプログラムであり、作成方法です。HTMLを編集するのではなく、HTMLを生成する道具です。- 通常
ホームページビルダーがすべてのHTMLを生成する。サイト公開時に生成され、サーバーにファイル転送される。HTMLファイルへの書き出し機能が追加されたもよう。 - WordPress
WordPressが最終的にHTMLを生成する。ホームページビルダーでは、ワードプレス・テーマの作成と固定ページを作成する。テンプレート部分のHTMLはすべてが編集できるわけではない。
ホームページビルダー教室では、既に生徒さんがhpb21 spでのサイト作成に挑戦されています。ホームページビルダー教室無料体験・相談会へお越しにいただければ、作成方式の選択に関してのご相談もしていただけます。また、ホームページビルダーを使わずにワードプレスでのホームページ作成にも対応しております（横浜WordPressスクール）
ホームページビルダーに同梱されている「できるホームページ・ビルダー」は、SPでの通常サイトの作成のみを解説しています。
ホームページビルダー20に同梱されているマニュアル「ホームページビルダー20スターターブック」です。
表紙には、「ホームページビルダーにはホームページビルダーSPとホームページビルダー・クラシックという２つのホームページ作成アプリケーションを搭載しています。ホームページビルダーをインストールすると、それぞれを起動するアイコンがデスクトップ画面に表示されます。
- ホームページビルダーSP（エスピー）
ドラッグ＆ドロップの直感的な操作でホームページを作成できる新しいアプリケーションです。ホームページを新しく作成したい方、ホームページを作成しなおしたい方にお勧めです。 - ホームページビルダー・クラシック
ホームページビルダー18をそのまま継承したホームページ作成アプリケーションです。従来のホームページビルダーで作成したホームページやサイトを引き継いで編集できます。
ホームページビルダー20スターターブック 目次
- 機能紹介
- ホームページビルダーSPとクラシック
- ホームページビルダーSPの特長
- インストールする
- ホームページビルダーをインストールする
- インストール前に確認してください
- 動作環境
- シリアルナンバー・オンライン登録キー・User IDを準備する
- 旧バージョンのホームページビルダーをお持ちの場合
- インストールを始める
- ホームページビルダーのユーザー登録をする
- ホームページビルダーを起動する
- インストールした内容を変更する
- ホームページビルダーを削除（アンインストール）する
- ホームページを作成・公開する ホームページビルダーSP
- ホームページ作成前の準備
- サイトタイプを決める
- ホームページの作成・公開手順を確認する
- ホームページの公開場所を（サーバー）を準備する
- サイトを作成する
- ページを編集する
- パーツ編集の基本操作
- 文字を編集する
- 画像を差し替える
- ページの見え方を確認する
- 編集したページを保存する
- サイトを公開する 通常サイト
- 情報を準備する
- 転送の設定をする
- サイトを転送・公開する
- サイトを公開する WordPressサイト
- 情報を準備する
- 転送の設定をする
- サイトを転送する
- 転送したデータを反映する
- Q&A集 ホームページビルダーSP
- 転送のトラブルQ&A集
- データの移行・バックアップなどのQ&A集
- そのほかのQ&A集
- 付録：ホームページビルダー・クラシック
- ホームページビルダー・クラシックでのホームページ作成
- フルCSSテンプレートを利用したホームページ作成
- WordPressテンプレートを利用したホームページ作成
- ホームページビルダー・クラシックのQ&A集
ホームページビルダーSPでの表の作成は、必ず４ｘ４の表から始まないといけないようです。パーツ一覧から表パーツを追加すると以下のような状態になります。ここから希望の行列になるよう、行、列を追加、削除します。
一方、クラシックでは、表の挿入は、行数、列数それぞれを指定して行うことができます。
バージョン19からは、スマホ対応がレスポンシブデザインになった、ホームページビルダー フルCSSテンプレート。
スマホ対応ページには、メニュートグルがあります。
編集中は、「ここにメインメニューが表示されます」と表示されています。
プレビュー画面で表示すると、上の部分がメニューの画像に置き換わります。
プレビュー画面でその画像をクリックすると、メニューが展開されます。
先日、このメニューの展開が動作しなくなってしまった例を扱いました。最悪はホームページの作り直しとなる場合がありますが、原因と思われることがあったので試すことにしました。
技術調査の結果、テンプレートが用意しているJavascriptのコードが欠如、おそらくページ編集中に意識しないで削除してしまった思われれます。
（追記）2016年3月現在、ホームページビルダー20版の「よくわかるホームページ・ビルダー」は出版されていないようです。2018年現在、ホームページビルダー21版は出版されていないようです。
待望の「よくわかるホームページ・ビルダー19 FOM出版」 (FOM出版のみどりの本)が出版されました。ホームページビルダー教室でも、バージョン13から毎回（ただし18は出版されなかったのでありませんが）出るたびに購入しています。
内容は以前のバージョンのものを踏襲しています。この本独自の方法で、HTML/CSSを使ってのサイト作成が主な内容です。フルCSSテンプレート、WordPressテンプレートに関してはごく簡単な記述があるだけです。SPに関しては、「※本書では、ホームページ・ビルダー19クラシックを使ってWebサイトを作成する方法を紹介しています。」という注意書きで済ましているようです。SPを勉強したい方には、まったく必要のない書籍のようです。
ホームページビルダー19クラシック ワードプレス・テンプレート ＣＳＳ（スタイルシート）の知識があれば、改造が可能です。
ホームページビルダー教室での改造例を紹介します。
テンプレート（ミニマル0027）原型はこちら
改造後（ＰＣ表示）はこちら・・・
サイドバー、ナビゲーションメニューなどを取り去っています。ＰＣ版はとてもシンプルなものにしました。その理由は、このサイトはスマホ（スマートフォン）表示を優先して設計したからです。スマホ表示はこちら・・・
実際のサイトはこちら⇒ 天然石・パワーストーン卸リアルアートコーポレーション
ホームページビルダー教室 本日は定休日で授業はありませんでした。休日出勤して、ホームページ作成代行作業をしていました。 お客様から預かっているロリポップのレンタルサーバーへWordPressのサイトを作成します。 
ホームページビルダー19クラシックを使用して作成を開始しました。 WordPress自体のインストールは、ホームページビルダーからも可能ですが、サーバー側のインストールのほうが楽なので、そちらで行いました。 次の情報を入力して、インストールします。
- インストール先 データーベース
- サイトのタイトル
- ユーザー名
- パスワード
- パスワード（確認）
- メールアドレス
- プライバシー設定
ホームページビルダー教室での作成代行作業のため、お客様からお預かりしているロリポップのレンタルサーバー。以前は試作の段階までで一旦作業が停止していました。支店の開店に合わせて、ホームページを完成させるために、本日よりホームページ作成作業を再開しました。ホームページビルダー19クラシックのワードプレス・テンプレートを使って、以前の試作とはまったく別のサイトを新規作成します。 試作サイトはワードプレスサイトで、久しぶりに使おうとしたら、「ワードプレス アクセス制限」がかかっていました。 ロリポップのコントロールパネルにログインして、ロリポップFTPを使って .htaccess を編集することにより制限を解除しました。 
本サイトは、ホームページビルダー19クラシックのワードプレス・テンプレートで作成しています。 WordPressダッシュボードへの不正なログインを防ぐために、Limit Login Attemptsワードプレス・プラグインを導入しました。不正なログインの試行回数を制限することができます。 
サイトナビゲーション メニュー項目の数、文字数によって、自動で２行以上になります。。
メニュー項目の余白を詰めて、１行にすることができるでしょうか？
（ホームページビルダー クラシックのテンプレートなら、スタイルシートを編集すれば可能ですが・・・）
