ホームページビルダー21の使い方 SP・クラシック・WordPressテンプレート

ホームページビルダー21を使うに際にはまず、まずクラシックとSPのどちらかを選択します。WordPressにするかどうかも重要な点です。

  • クラシック
    • HTML編集 既存のサイトの更新
    • WordPressテンプレート ワードプレス・サイトの作成
    • フルCSSテンプレート
  • SP
    ホームページビルダーは元来はHTMLを編集する道具でした。その流れはクラシックとして残っています。SPはバージョン19で導入されたまったく新しいプログラムであり、作成方法です。HTMLを編集するのではなく、HTMLを生成する道具です。

    • 通常 
      ホームページビルダーがすべてのHTMLを生成する。サイト公開時に生成され、サーバーにファイル転送される。HTMLファイルへの書き出し機能が追加されたもよう。
    • WordPress
      WordPressが最終的にHTMLを生成する。ホームページビルダーでは、ワードプレス・テーマの作成と固定ページを作成する。テンプレート部分のHTMLはすべてが編集できるわけではない。

ホームページビルダー教室では、既に生徒さんがhpb21 spでのサイト作成に挑戦されています。ホームページビルダー教室無料体験・相談会へお越しにいただければ、作成方式の選択に関してのご相談もしていただけます。また、ホームページビルダーを使わずにワードプレスでのホームページ作成にも対応しております(横浜WordPressスクール

ホームページビルダーに同梱されている「できるホームページ・ビルダー」は、SPでの通常サイトの作成のみを解説しています。

ホームページビルダー20スターターブック

ホームページビルダー20に同梱されているマニュアル「ホームページビルダー20スターターブック」です。

ホームページビルダー20スターターブック

表紙には、「ホームページビルダーにはホームページビルダーSPとホームページビルダー・クラシックという2つのホームページ作成アプリケーションを搭載しています。ホームページビルダーをインストールすると、それぞれを起動するアイコンがデスクトップ画面に表示されます。

  • ホームページビルダーSP(エスピー)
    ドラッグ&ドロップの直感的な操作でホームページを作成できる新しいアプリケーションです。ホームページを新しく作成したい方、ホームページを作成しなおしたい方にお勧めです。
  • ホームページビルダー・クラシック
    ホームページビルダー18をそのまま継承したホームページ作成アプリケーションです。従来のホームページビルダーで作成したホームページやサイトを引き継いで編集できます。

ホームページビルダー20スターターブック 目次

  • 機能紹介
    • ホームページビルダーSPとクラシック
    • ホームページビルダーSPの特長
  • インストールする
    • ホームページビルダーをインストールする
      • インストール前に確認してください
      • 動作環境
      • シリアルナンバー・オンライン登録キー・User IDを準備する
      • 旧バージョンのホームページビルダーをお持ちの場合
      • インストールを始める
      • ホームページビルダーのユーザー登録をする
      • ホームページビルダーを起動する
    • インストールした内容を変更する
      • ホームページビルダーを削除(アンインストール)する
  • ホームページを作成・公開する ホームページビルダーSP
    • ホームページ作成前の準備
      • サイトタイプを決める
      • ホームページの作成・公開手順を確認する
      • ホームページの公開場所を(サーバー)を準備する
    • サイトを作成する
    • ページを編集する
      • パーツ編集の基本操作
      • 文字を編集する
      • 画像を差し替える
      • ページの見え方を確認する
      • 編集したページを保存する
    • サイトを公開する 通常サイト
      • 情報を準備する
      • 転送の設定をする
      • サイトを転送・公開する
    • サイトを公開する WordPressサイト
      • 情報を準備する
      • 転送の設定をする
      • サイトを転送する
      • 転送したデータを反映する
    • Q&A集 ホームページビルダーSP
      • 転送のトラブルQ&A集
        • 転送の確認事項
      • データの移行・バックアップなどのQ&A集
      • そのほかのQ&A集
    • 付録:ホームページビルダー・クラシック
      • ホームページビルダー・クラシックでのホームページ作成
        • フルCSSテンプレートを利用したホームページ作成
        • WordPressテンプレートを利用したホームページ作成
      • ホームページビルダー・クラシックのQ&A集

 

表の挿入の使い方 ホームページビルダー19 SP VS クラシック

ホームページビルダーSPでの表の作成は、必ず4x4の表から始まないといけないようです。パーツ一覧から表パーツを追加すると以下のような状態になります。ここから希望の行列になるよう、行、列を追加、削除します。

ホームページビルダーSP 表パーツ

 

一方、クラシックでは、表の挿入は、行数、列数それぞれを指定して行うことができます。

ホームページビルダークラシック表の挿入

ホームページビルダー・フルCSSテンプレート スマホ対応ページ メニュートグルの使い方

バージョン19からは、スマホ対応がレスポンシブデザインになった、ホームページビルダー フルCSSテンプレート。

スマホ対応ページには、メニュートグルがあります。

編集中は、「ここにメインメニューが表示されます」と表示されています。

プレビュー画面で表示すると、上の部分がメニューの画像に置き換わります。

プレビュー画面でその画像をクリックすると、メニューが展開されます。

先日、このメニューの展開が動作しなくなってしまった例を扱いました。最悪はホームページの作り直しとなる場合がありますが、原因と思われることがあったので試すことにしました。

技術調査の結果、テンプレートが用意しているJavascriptのコードが欠如、おそらくページ編集中に意識しないで削除してしまった思われれます。

よくわかるホームページ・ビルダー19 FOM出版

(追記)2016年3月現在、ホームページビルダー20版の「よくわかるホームページ・ビルダー」は出版されていないようです。2018年現在、ホームページビルダー21版は出版されていないようです。

待望の「よくわかるホームページ・ビルダー19 FOM出版」 (FOM出版のみどりの本)が出版されました。ホームページビルダー教室でも、バージョン13から毎回(ただし18は出版されなかったのでありませんが)出るたびに購入しています。

内容は以前のバージョンのものを踏襲しています。この本独自の方法で、HTML/CSSを使ってのサイト作成が主な内容です。フルCSSテンプレート、WordPressテンプレートに関してはごく簡単な記述があるだけです。SPに関しては、「※本書では、ホームページ・ビルダー19クラシックを使ってWebサイトを作成する方法を紹介しています。」という注意書きで済ましているようです。SPを勉強したい方には、まったく必要のない書籍のようです。

FOM出版よくわかるホームページビルダー19

 

ワードプレス・テンプレートの使い方@ホームページビルダー教室

ホームページビルダー19クラシック ワードプレス・テンプレート CSS(スタイルシート)の知識があれば、改造が可能です。

ホームページビルダー教室での改造例を紹介します。

テンプレート(ミニマル0027)原型はこちら

ホームページビルダー ワードプレス・テンプレート

改造後(PC表示)はこちら・・・

ホームページビルダー ワードプレス・テンプレート

サイドバー、ナビゲーションメニューなどを取り去っています。PC版はとてもシンプルなものにしました。その理由は、このサイトはスマホ(スマートフォン)表示を優先して設計したからです。スマホ表示はこちら・・・

ホームページビルダー ワードプレス・テンプレート

実際のサイトはこちら⇒ 天然石・パワーストーン卸リアルアートコーポレーション

WordPress簡単インストールの使い方@ロリポップ@ホームページビルダー教室

ホームページビルダー教室 本日は定休日で授業はありませんでした。休日出勤して、ホームページ作成代行作業をしていました。 お客様から預かっているロリポップのレンタルサーバーへWordPressのサイトを作成します。 WordPress簡単インストールホームページビルダー19クラシックを使用して作成を開始しました。 WordPress自体のインストールは、ホームページビルダーからも可能ですが、サーバー側のインストールのほうが楽なので、そちらで行いました。 次の情報を入力して、インストールします。

  • インストール先 データーベース
  • サイトのタイトル
  • ユーザー名
  • パスワード
  • パスワード(確認)
  • メールアドレス
  • プライバシー設定      

ワードプレス アクセス制限の解除 @ ロリポップの使い方 @ホームページビルダー教室

ホームページビルダー教室での作成代行作業のため、お客様からお預かりしているロリポップのレンタルサーバー。以前は試作の段階までで一旦作業が停止していました。支店の開店に合わせて、ホームページを完成させるために、本日よりホームページ作成作業を再開しました。ホームページビルダー19クラシックのワードプレス・テンプレートを使って、以前の試作とはまったく別のサイトを新規作成します。 試作サイトはワードプレスサイトで、久しぶりに使おうとしたら、「ワードプレス アクセス制限」がかかっていました。 ロリポップのコントロールパネルにログインして、ロリポップFTPを使って .htaccess を編集することにより制限を解除しました。 WordPressログイン画面へのアクセス制限

Limit Login Attemptsワードプレス・プラグインの使い方@ホームページビルダー教室

本サイトは、ホームページビルダー19クラシックのワードプレス・テンプレートで作成しています。 WordPressダッシュボードへの不正なログインを防ぐために、Limit Login Attemptsワードプレス・プラグインを導入しました。不正なログインの試行回数を制限することができます。 Limit Login Attempts ワードプレス・プラグイン  

ホームページビルダーSPテンプレート 使い方の疑問点

サイトナビゲーション メニュー項目の数、文字数によって、自動で2行以上になります。。

メニュー項目の余白を詰めて、1行にすることができるでしょうか?

(ホームページビルダー クラシックのテンプレートなら、スタイルシートを編集すれば可能ですが・・・)

ホームページビルダーSP