ホームページビルダー20・21 SPの文字属性の使い方

ホームページビルダー20 SPの文字属性の使い方

属性名
なし
強調
重要
コメント
タイトル
引用
言葉の定義
省略
サンプル
キーボード
コード
変数
下付き
上付き

文字段落属性の管理

属性名  識別子
強調 em
重要 strong
コメント small
タイトル cite
引用 q
言葉の定義 dfn
省略 abbr
サンプル samp
キーボード kbd
コード code
変数 var
下付き sub
上付き sup

文字段落属性の追加

対象 文字・段落
属性名
識別子

縮小画像の表示品質が悪い ホームページビルダー20・21SPテンプレート レスポンシブデザイン

ホームページビルダー20SPのテンプレートはレスポンシブデザイン。パソコンとスマホ両方にタイプしたページの作成が可能です。パソコン用ページ;

ホームページビルダー20SP 新しいサイト

にあるヘッダーメイン画像はスマホでは縮小されて表示されます。

ホームページビルダー20SP スマホ表示

同じものをホームページビルダー20SPでプレビューすると次のように表示されます。

ホームページビルダー20SP プレビュー

どちらの場合も「私たちは確かな技術で生活に信頼と安心をお届けします。」という文字列は判読不能です。

しかし実際にスマホ(といってもこれは本物のスマホではなく、Google Chromeでのシミュレーション)では、問題の画像はきれいに表示されるようです。↓

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

(2016.12.23 追記)ホームページビルダー21SPでも同様の結果となりました。改善は見られません。

ホームページビルダー20・21 SP テンプレート スタイル設定の使い方

ホームページビルダー20 SP テンプレートでは、スタイルの詳細設定が可能になりました。

サイト情報のスタイル
パーツトップ
配置
パーツのサイズ
幅 ピクセル・パーセント・自動
高さ ピクセル・自動
縦横比を固定する
表示形式
通常・左配置・右配置・絶対配置 絶対配置の表示基準
マージン 上・下・左・右
回り込み解除
表示メディア
表示ページ
すべて・個別に指定する
文字
プレビュー
フォント
文字サイズ
文字色
文字飾り
背景
背景色 透明・指定する
背景画像 なし・指定する
繰り返し表示 繰り返す・繰り返す(垂直方向)・繰り返さない
表示位置 左右位置・上下位置
サイズ 自動・含む・覆う

ボーダー すべて固定・上下左右固定・別々に指定
ボーダータイプ
線の太さ
線の色
パディング 上・下・左・右
角丸
はみ出した内容をクリッピングする

などのスタイルが設定できます。CSSをコーディングする必要はありません。

ホームページビルダー20・21 フォトモーションの使い方 複数挿入

ホームページビルダー教室の生徒さんの作成されているWordPressテンプレートのサイトにフォトモーションを追加しました。標準機能では、同一タイプのフォトモーションはページに一つしか挿入することができません。フォトモーションを改造して、同一固定ページに複数埋め込んでみました。

http://artista-neo.com/

以下改造の備忘録です。

  • HTMLとしてフォトモーションをコピー
  • div idを変更
  • 変更したdiv idに対応するJQueryの呼び出しをコピー・変更
  • 変更したJavaScriptをAdd code to head ワードプレス・プラグインで埋め込み

ホームページビルダーの標準機能ではありませんので、上級者限定のヒントです。

ホームページビルダー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・21 SP テンプレート 表の使い方 セルの結合

ホームページビルダー19でSPが新登場したさいに気になった点です。表のセルの結合ができないことです。

ホームページビルダー20 SPテンプレートでは、どうなるのか気になっていました。自分で調べた範囲では、セルの結合には対応してないようです。また、「できるホームページビルダー20(インプレス)」では、「セルの結合はできない」と明記されていました。

 

ホームページビルダー20 SP 表 セルの結合

複数バージョンの共存 ホームページビルダー15・16・17・18・19・20・21

ホームページビルダー教室の主力作業用パソコン(ThinkPad)では、生徒さんの幅広いご要望にいつでもお応えできるように、複数のバージョンのホームページビルダーを用意しています。(ホームページ作成代行したもののメンテのために18以降は使いわけています。)

ホームページビルダーなら複数のバージョンが共存できます。ホームページビルダー15から、16、17、18、19.そして今月に発売されたhpb20をインストールしてあります。

ホームページビルダー バージョン共存

ホームページビルダー22 21 20 19 SP 保存先

ホームページビルダー19 SP サイトの基本情報

ホームページビルダー19・20・21 SP サイトの基本情報では、作成するホームページを保存場所(パソコン上のフォルダー、保存先)を指定しません。ホームページビルダーが管理しています。もちろんパソコン上のどこかにはあります。その場所を開いても直接いじることには意味がありません。 ちなみに、ホームページビルダーSPの保存先と思われるフォルダーを開くと以下のようのものがありました。

ホームページビルダーSP保存先

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