ホームページビルダー20・21 ヒント集 フルCSSテンプレート

本邦唯一日本IBM出身ホームページビルダー元開発責任者 鎌田裕二の
ホームページビルダー21教室・無料体験受付中(こちらをクリック!!)
TEL 045-567-8393
 (平日11~20時 土11~17時 日祝休 留守電不可)
生徒さんホームページビルダー作成事例はこちら

ホームページビルダー 20ヒント集 フルCSSテンプレート

このカテゴリーでは、ホームページビルダー20・19クラシックのフルCSSテンプレートの話題を取り扱います。バージョン15で、フルCSSプロフェッショナル・テンプレートとして導入され、16ではメインのホームページ作成方法です。19でレスポンシブデザイン対応になりました。ホームページビルダー20では、特に目立つ変更はないようです。

ホームページビルダー21ではどう進化するのでしょうか。今から楽しみです。


ホームページビルダー ヒント集

かんたん・ホームページ・デビュー ホームページビルダー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 20 19 18 使い方 SP・クラシック

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

  • クラシック
    • HTML編集 既存のサイトの更新
    • WordPressテンプレート ワードプレス・サイトの作成
    • フルCSSテンプレート
  • SP
    ホームページビルダーは元来はHTMLを編集する道具でした。その流れはクラシックとして残っています。SPはバージョン19で導入されたまったく新しいプログラムであり、作成方法です。HTMLを編集するのではなく、HTMLを生成する道具です。
    • 通常 
      ホームページビルダーがすべてのHTMLを生成する。サイト公開時に生成され、サーバーにファイル転送される。HTMLファイルへの書き出し機能が追加されたもよう。
    • WordPress
      WordPressが最終的にHTMLを生成する。ホームページビルダーでは、ワードプレス・テーマの作成と固定ページを作成する。テンプレート部分のHTMLはすべてが編集できるわけではない。

ホームページビルダー教室では、既に生徒さんがhpb20 spでのサイト作成に挑戦されています。ホームページビルダー教室無料体験・相談会へお越しにいただければ、作成方式の選択に関してのご相談もしていただけます。

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

レスポンシブデザインと表 ホームページビルダー20

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

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

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

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

パソコン画面では

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

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

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

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

 

 

ホームページビルダー・フルCSSテンプレート スマホ対応ページ メニュートグルが動作しない例

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

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

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

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

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

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

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

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

フル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出版

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

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

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

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

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

 

フルCSSテンプレートを編集したい@ホームページビルダー教室

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

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

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

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

Chromeデベロッパー・ツール

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

› 続きを読む