ホームページ・ビルダー19パーフェクトマスター

先日アマゾンに注文した「ホームページ・ビルダー19パーフェクトマスター」が本日到着しました。

ホームページビルダーSPの説明は、サイトタイプ=通常版のみと限定的。クラシックのフルCSSテンプレートは紹介程度の記述。大半は、独自の方法のHTML/CSSサイト作成の解説のようです。

SPであれクラシックあれ、ワードプレス・サイトを作成されたい方には、無用の解説本だと思います。

ホームページビルダー・ビルダー19パーフェクトマスター

ホームページビルダー スタイルシート マネージャ 使い方の例

ホームページビルダー ワードプレスでもフルCSSテンプレートでもデフォルトの文字サイズが小さいという感想は、ホームページビルダー教室の生徒さんンからよくいわれることです。ホームページビルダー.net でも、もう少し文字サイズが大きい方が読みやすいかなと思い、少し大きくしてみました。 文字サイズなど、テンプレートの書式を変更するためには スタイルシート マネージャ を使います。どこを、どう直せばよいのかを判断するには、テンプレートの構造を読み解くHTML/CSSの知識が必要です。

ホームページビルダー スタイルシート マネージャ

グーグル・アナリティクス リアルタイム サマリーの使い方@ホームページビルダー教室

グーグル・アナリティクスを使えば、サイト訪問者数をリアルタイムに把握することが可能です。 グーグル・アナリティクス リアルタイム サマリー

アナリティクスを利用するには、サイトの登録作業が必要です。ホームページビルダーのフルCSSテンプレート、ワードプレスでは方法がその方法が異なります。

ホームページビルダー クラシック フルCSSテンプレート スマホ対応の使い方

ホームページビルダー19クラシック フルCSSテンプレートは、19からはレスポンシブ・デザインになり、パソコン版、スマホ版が自動表示切替となりました。以前のように、パソコン版とスマホ版を別々に作る必要はありません。

しかし、別のものにしたいとの要望がなりわけではありません。スマホ版はスマホの事だけを考えて最適化するという選択肢も有効です。
以前のように、別にスマホ版のサイトを作成して、リダイレクトすることはホームページビルダー19になっても可能なようです。

ホームページビルダー19クラシックの使い方

ホームページビルダー SP クラシック 使い方

ホームページビルダー19が10月に発売開始されたました。SPというまったく新しいエディタが搭載されました。従来のホームページビルダーの機能強化版はクラシックという名前で引き続き搭載されています。

ホームページ作成の方式として

  • ホームページビルダーSP サイトタイプ=通常版 HTMLファイルが生成される。通常のウェブサーバー上にホームページを公開できる
  • ホームページビルダーSP サイトタイプ=WordPress ワードプレス・サイトを作成する。サーバー上にWordPressのインストールが必要
  • ホームページビルダー クラシック フルCSSテンプレート 通常のウェブサーバー上にホームページを公開できる。バージョン19からはスマホ対応が従来の別ページへのリダイレクトではなく、レスポンシブデザインでの対応
  • ホームページビルダー クラシック ワードプレス・テンプレート ワードプレス・サイトを作成する。サーバー上にWordPressのインストールが必要
  • ホームページビルダー 独自にHTML/CSSコーディングする・従来のサイトの編集

ホームページビルダー教室の生徒さんや、HPB19入門セミナー参加者、無料体験参加者から話をうかがうと

  • 従来のサイトの編集が、ホームページビルダーSPにより、簡単になると思った
  • 従来のサイトの更新をスマホから行える(=WordPress)と思った

と、サイトを新規作成しないと利用できない機能を、従来のサイトに使えるいう勘違いが少なからずあるようです。

では、ホームページビルダーで新規作成するとして SP にするのか クラシックにするのか、どちらがいいのでしょうか?

ホームページビルダー教室では、まず、ワードプレスにするか・しないかを考えてもらいます。

ワードプレスの長所・短所を実例を通して、実際にご覧いただいて検討していただければと思っています。

ホームページビルダー教室無料体験と教室へのご入会、ホームページビルダー19入門セミナー、時間外マンツーマン個別指導など、いくつかの場をご用意しております。私自身のホームページ作成経験に限らず、生徒さんの実例(作品集)を説明いたします。

ホームページビルダー クラシック フルCSSテンプレートの使い方

ホームページビルダー19クラシック フルCSSテンプレートは、レスポンシブ・デザインになり、パソコン版のサイトをつくれば、それをスマホで表示するとスマートフォン向けのレイアウトで自動的に表示されます。テンプレート選択の画面でもレスポンシブ・デザインの印がついています。16,17,18と従来のホームページビルダーでは、自動変換もしくは自分でスマホ版のサイトを別につくり、パソコン版ページに表示切替のコード(Javascript)を埋め込むという方式でした。

ホームページビルダー19クラシック フルCSSテンプレート

 

ホームページビルダー19クラシック フルCSSテンプレートホームページビルダー19クラシック フルCSSテンプレート

レスポンシブ・デザイン スマホ・ページ対応@ホームページビルダーの使い方

ホームページビルダー19では、ホームページビルダーSPのテンプレート(サイトタイプ、ホームページビルダー・クラシックのWordPressテンプレート、フルCSSテンプレートのすべてがスマホ・ページ対応のレスポンシブ・デザインになりました。 スマホの対応には、いくつかの方法があります。 1.パソコン版のみ用意してパソコン版を見てもらう。パソコンの画面用に設計されたページが縮小されて表示される。字を読むには拡大が必要。拡大してスクロールしていくようになります。 2.パソコン版、スマホ版を別々の設計・用意しておく。相手の端末の応じたページに切り替える。(サーバー側の設定や、ページに埋め込むJavascriptを使用) どちらに対してもデザインの最適化が可能。同じような内容のページを2つ作成・更新している手間が必要。 3.レスポンシブ・デザイン パソコン・スマホ共通のページをひとつ作成。それを端末の画面のサイズごとに(スタイルシートの設定を切り替えて)並び替え・サイズ調整をする方法です。 次の画面例は、ホームページビルダーSPテンプレート(サイトタイプ=通常)のものです。

ホームページビルダーSP レスポンシブ・デザイン

ホームページビルダー ワードプレス・テンプレート+フルCSSスマートフォン・テンプレートの使い方

ホームページビルダーに搭載されているワードプレス・テンプレートはレスポンシブ・デザインとなっており、パソコン表示すれば、パソコン用のレイアウト、スマホで表示するばスマホに適したレイアウトになります。それぞれ別にページを用意しなくていいことが利点です。一方、スマホ・ページのデザインに満足されない方も少なからずいらっしゃいました。PC版はワードプレスで作成して、スマホ版はフルCSSスマートフォン・テンプレートで作成された生徒さんがいらっしゃいます。表示の切り替えは、.htaccessで行うようにしました。

当ホームページビルダー教室の ホームページビルダー作品集 でも紹介しています。

ホームページビルダー スマホ対応ページの使い方

元々は他の方が作成した独自デザイン(HTML/CSS)でのサイト(パソコン版のみ)の更新をホームページビルダー18で始められた生徒さんの例です。更新方法、SEO対策、アクセス解析(グーグル・ウェブマスターツール)などが一通りできるようになり、今度はスマートフォン対応ページ(フルCSSスマートフォンテンプレート)の追加の作業を始めました。 サイトの確認画面からスマホ追加/同期、テンプレートを選択して、スマホのページを作成することができます。パソコン版のindex.htmlにスマホページへの切り替えコード(Javascript)が自動挿入され、同じURLでパソコン版、スマホ版の切り替え表示となります。

 スマホ

ホームページビルダー フルCSSテンプレート の使い方 更新方法の事例

私自身、現在いつかのホームページの更新を担当しています。もちろんホームページビルダー18を使っています。

参考までに、その作業の流れを紹介します。(NPO法人アースエコの場合 http://www.npo-earth-eco.com/

この団体では、毎月数回の活動をしています。その活動報告の掲載が主な更新作業です。

私自身は現在は、その団体の活動現場に参加する余裕がありません。活動報告は他のメンバーの方が、ホームページビルダーを使って作成。活動ごとに、フォルダをつくりそこへHTML、画像をまとめてメールで(zipファイル)送っていただいています。

  1. メールからzipファイルを、ホームページ編集用のフォルダへ保存、解凍
  2. ホームページビルダー起動、サイトを開き、トップページを編集
  3. 最後の活動(リスト)の前に項目追加。そこへ新たな活動報告ページへのリンクを挿入。右クリックして「リンク先ページを開く」
  4. 活動報告を作成される方の環境の違いにより、スタイルシート(CSS)の相対パスの変更(ソース編集で置換)
  5. 活動名をコピーして、トップページのリンク文字の変更
  6. 活動予定はメールから全コピーして置き換え。

ちなみに特定非営利活動法人アースエコのホームページはフルCSSテンプレートで作成しています。