かんたん・ホームページ・デビューの使い方 ホームページビルダー21 クラシック

ジャストシステム社が「ホームページ・ビルダー クラシック」のこんなサイトを提供しているのですね。

かんたんホームページ・デビュー 使い方ガイド
http://www.justsystems.com/jp/users/hpb/web/index.html

<meta name=”GENERATORcontent=”JustSystems Homepage Builder Version 21.0.1.0 BETA (160830_1) for Windows“>

バージョン21のベータ版のテンプレートで作成しているようです。

PC、スマホ対応のレスポンシブデザインとなっています。

 

 

ホームページビルダー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の使い方

ホームページビルダー19(ホームページビルダー20も同様)ではフルCSSテンプレートもレスポンシブデザインによるスマホ対応となりました。(WordPressテンプレートはバージョン17から対応)

しかし、自分で作成される部分がパソコン、スマホそれぞれでどう見えるかをよく考えないと、全体としては読みづらいサイトになってしまいます。

典型的な例に「表」があります。

パソコン画面では

ホームページビルダーの表

問題のない形で表示されています。スマホで表示すると

ホームページビルダーの表

各セルが縦長に表示されてしまい、なかの文章はとても読みづらいものになってしまいます。

 

 

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

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

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

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

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

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

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

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

テーマ=趣味 ホームページビルダー教室 フルCSSテンプレートの使い方

ホームページビルダーに搭載されているフルCSSテンプレートにはいくつかのテーマがあります。その中の「趣味」というテーマは1ページのみから構成されるテンプレートです。

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

このテーマからサイトを作成して、ページをテンプレートから追加しようとすると、index.htmlという名前がぶつかります。

フルCSSテンプレート趣味

「自動的に別の名前に変更」すれば追加することはできます。

トップページと同様のページになります。

他のテーマと比較して、テンプレートとしては未熟な印象を持ちました。

.htaccessの使い方 スマホページへのリダイレクト@ホームページビルダー教室

ホームページビルダー教室でフルCSSテンプレートで作成したホームページのスマホ対応を指導した際に、見本として作成した .htaccess です。

記録のために投稿します。

RewriteEngine on
RewriteCond %{REQUEST_URI} !/sp/
RewriteCond %{HTTP_USER_AGENT} (iPod|iPhone|iPad|Android|Windows\ Phone)
RewriteCond %{REQUEST_FILENAME} !^(.*)\.(gif|png|jpg|jpeg|css)$ [NC]
RewriteCond %{REQUEST_FILENAME} !^(.*)profile\.html$
RewriteCond %{REQUEST_FILENAME} !^(.*)otoiawase\.htm$
RewriteCond %{QUERY_STRING} !mode=pc
RewriteRule ^(.*)$ sp/$1 [R]
RewriteBase /

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

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

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

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

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

 

ソフト ホームページビルダー フルCSSテンプレート リンクの削除の使い方

ホームページビルダー フルCSSテンプレート 不要なページの削除は、ビジュアルサイトビューからリンクの削除を使います。オプションで

このページへのリンクをすべて解除
このページのファイルを削除

が指定可能です。

ホームページビルダー フルCSSテンプレート リンクの削除

 

フルCSSテンプレートの使い方@ホームページビルダー教室

ホームページビルダー16から搭載されたフルCSSテンプレート。ジャストシステムのサポートFAQに「フルCSSテンプレートを編集したい」という記事があります。http://support.justsystems.com/faq/1032/app/servlet/qadoc?QID=050896 そこには「ホームページ・ビルダーではCSS(スタイルシート)の編集についてはサポートしておりません。お客様の責任で行っていただくようお願いいたします。」とあります。 実際に、ホームページビルダー教室で生徒さんがホームページを作成する際に、共通する要望があります。

  • 背景画像のサイズを変更したい
  • バナーを増やしたい

などです。このためにはCSS(スタイルシート)の編集が必要になります。

スマホページの解析 Chromeデベロッパー・ツール(デバイスモード)の使い方@ホームページビルダー教室

フルCSSテンプレートが、ホームページビルダー19クラシックではレスポンシブ・デザインとなり、スマホに自動対応となっています。その改造の要望をいただき、そのHTML/CSSの内部構造を調べました。その際に便利な道具があります。Chromeデベロッパー・ツールを使えば、スマホのシミュレーション表示をすることができます。 Chromeデベロッパー・ツール