ホームページビルダーSPの使い方 サイト作成練習 サイトタイプ=通常




ホームページビルダー19の新機能、ホームページビルダーSPに慣れるために、まずは「できるホームページ・ビルダー 19」の本の流れにそって、内容は適宜アレンジしながら、練習用のサイトを作成してみました。この本では、ワードプレスではなく、通常サイトを作成しています。赤字は私のコメントです。

  1.  ガイドメニューを消す
  2. 新規作成 テンプレートのデザインを選択 フェミニン0005
  3. サイトタイプ=通常 (サイトタイプは後々の変更はできないと予想しています。)
  4. サイト名を入力
  5. 業種を選択 (店舗) (プレビューすると全ページを見ることができます。)
  6. タイトル・キャッチフレーズ入力
  7. 修正したい部分を選択 フォーカス枠に書式のツールバーが表示される
  8. 文字編集・書式・保存
  9. パーツの使い方(サイトナビゲーション、ページタイトル、テキストボックス、リスト・定義リスト、表、ボタンなどが用意されている) (パーツの追加はSPの特徴) 
  10. パーツ一覧ビューからボタンパーツを実際に追加。
  11. 追加したパーツの編集(プロパティボタン) 外部リンクの追加 (ターゲット指定はできるのか?)
  12. パーツの移動 (ドラッグ&ドロップ) 
  13. パーツのサイズ変更
  14. パーツの削除
  15. 画像の編集 (ウェブアートデザイナーWAD健在! 誰が作ったか知ってるだけに、嬉しいやら、進化のなさを不思議に感じたり・・・)
  16. テンプレートの背景画像の変更(ウェブアートデザイナーの使い方)
  17. ブラウザー(Internet Explorer)確認
  18. スマートフォン用のデザイン表示(レスポンシブデザイン)
  19. ページの名前の変更 (ページの変更ダイアログ 本と同じものが表示されない??)
  20. サイトナビゲーション順番の入れ替え
  21. 下部のサイトナビゲーションのメニューを追加する・上部のサイトナビゲーションのメニュー削除
  22. ページの追加  (新規ページのサイトナビへの追加は自動?)
  23. 画像の挿入 (画像の解像度の変更はこの時点でできないみたい・・・) (画像の選択で表示されるフォルダ サイト、素材集、ピクチャ、コンピュータ ドキュメントも表示して欲しいな)
  24. Googleマップの挿入 (+-によるスケールより ズームレベルの数値設定が優先される) (複数マーカー設置、情報表示などホームページビルダー18より機能が少ない)
  25. ホームページの公開 (今回の練習ではホームページビルダー・サービスのサブドメインを使用 URLはこちら⇒http://hpb19-sp-html.hpb18.org/    サーバーにバックアップファイルの転送をすること。たとえ一部の変更でもサイト全体を転送するのはホームページビルダー18のワードプレス・テンプレートに似てます。)
  26. スマートフォンからレスポンシブデザインの確認
  27. リスト パーツの挿入
  28. 表パーツの挿入 列の削除 幅の調整 (幅の調整が本のようにいかなかった)
  29. SNSボタンの挿入 (デフォルトでは はてな!ブックマーク、いいね!(フェイスブック)、ツイートボタン、Google+)
  30. お問い合わせフォームの設定 (本ではmailto:を使うようになっています。こちらではホームページビルダーサービス簡易CGIを設定しました)
  31. YouTube動画の貼り付け HTMLソースパーツ

メニューの構成などの操作感は、ホームページビルダー18のワードプレス・テンプレートの編集に似ている面があります。

今回作成したサイトは以下のURLに公開してあります。

http://hpb19-sp-html.hpb18.org/

ホームページビルダー18では可能だった「デザインの変更」はできないみたい・・・

先に挿入した画像はデジカメ解像度のまま挿入、そのままのサイズで公開されます。解像度に要注意。以下ページ参照

http://hpb19-sp-html.hpb18.org/custom.html