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

ホームページビルダー教室の生徒さんからの要望でワードプレス・テンプレートのCSSを改造しました。その記録です。

h1#hpb-page-title {
text-shadow: 2px 1px 1px black;
}

.entry-content h3[class=”myh3″] {
border-radius: 5px;
background-color: #fdfff2;
border: solid 1px #a3bf51;
padding-left:5px;
padding-top:5px;
}

ホームページビルダー21 SP テンプレートの使い方 画像表示の品質

以前のバージョンのホームページビルダーSPでも指摘していたが、SPの画像の縮小表示の品質はホームページビルダー21でも改善されていないようだ。

地図スタジオでホームページビルダー教室の案内図を作成してみた。

それをSPのページへ画像パーツとして配置。

ホームページビルダー SP 編集画面での表示

snapcrab_2016-10-15_16-29-57_no-0000

同じものをプレビューで表示

snapcrab_2016-10-15_16-34-49_no-0000

両方を比べてその差は歴然としている。

ホームページビルダー20の使い方 グーグルマップエラー

ホームページビルダー20(クラシック フルCSSテンプレート)を使って、グーグルマップをページに挿入。

しばらく前よりGoogle Map APIの登録が必要となっているらしい。

SnapCrab_2016-08-18_14-18-51_No-0000

ホームページビルダーで新規にサイトを作成して試してみました。

エラーが発生しました!と表示されます。

このページはGoogleマップを正しく読み込まれませんでした。JavaScriptコンソールで技術情報をご確認ください。

ホームページビルダー教室の生徒さんに聞いた話では、このGoolgeMapの問題をジャストシステム社に問い合わせても、他社(グーグル)のことなので、答えられないとのこと。

ホームページビルダー教室では、代替案を指導しています。

アイテムギャラリーの使い方@ホームページビルダーSP

ホームページビルダー20SPテンプレートで追加された機能にアイテムギャラリーがあります

  • アイテムリストを指定
  • アイテムデータの追加・変更・複製・削除
  • アイテムデータの変更画面では、
  • 画像、小さい画像、アイテム名、アイテム説明、リンク先URL、値段、値段補足(前)、値段補足(後)、カテゴリーの指定が可能

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

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

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

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

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

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

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

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

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

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

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

ページ内容のCSSスタイル(ボーダー編)の使い方 ホームページビルダー20 SPテンプレート

ホームページビルダー20 SPでは、19のときにはできなかったスタイルの詳細設定が可能になりました。

ページ内容のスタイル、リスト、水平線のボーダーを設定してみました。

リストはパーツですが、水平線はパーツではありません。

SnapCrab_No-0017

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

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

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

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

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

コラムパーツの使い方実験 ホームページビルダー20 SP テンプレート

ホームページビルダー20 SPで搭載されたコラムパーツの使い方の実験です。

コラムパーツの中に、6つコラムパーツを配置。それぞれのコラムパーツの中に、画像パーツとテキストボックスを配置しました。

パソコンで表示すると次のようになります。

SnapCrab_No-0012

これをスマホで表示すると次のようになります。

SnapCrab_No-0013