ホームページビルダー教室の生徒さんからの要望でワードプレス・テンプレートの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;
}
以前のバージョンのホームページビルダーSPでも指摘していたが、SPの画像の縮小表示の品質はホームページビルダー21でも改善されていないようだ。
地図スタジオでホームページビルダー教室の案内図を作成してみた。
それをSPのページへ画像パーツとして配置。
ホームページビルダー SP 編集画面での表示
同じものをプレビューで表示
両方を比べてその差は歴然としている。
ホームページビルダー21 SPでは、選択できる業種が増えました。また階層化されました。
ホームページビルダー20(クラシック フルCSSテンプレート)を使って、グーグルマップをページに挿入。
しばらく前よりGoogle Map APIの登録が必要となっているらしい。
ホームページビルダーで新規にサイトを作成して試してみました。
エラーが発生しました!と表示されます。
このページはGoogleマップを正しく読み込まれませんでした。JavaScriptコンソールで技術情報をご確認ください。
ホームページビルダー教室の生徒さんに聞いた話では、このGoolgeMapの問題をジャストシステム社に問い合わせても、他社(グーグル)のことなので、答えられないとのこと。
ホームページビルダー教室では、代替案を指導しています。
ホームページビルダー20SPテンプレートで追加された機能にアイテムギャラリーがあります
- アイテムリストを指定
- アイテムデータの追加・変更・複製・削除
- アイテムデータの変更画面では、
- 画像、小さい画像、アイテム名、アイテム説明、リンク先URL、値段、値段補足(前)、値段補足(後)、カテゴリーの指定が可能
日本IBM時代、ホームページビルダー開発責任者だった頃に、追加した機能に「どこでも配置」があります。
続きを読む →
ホームページビルダー20SPのテンプレートはレスポンシブデザイン。パソコンとスマホ両方にタイプしたページの作成が可能です。パソコン用ページ;
にあるヘッダーメイン画像はスマホでは縮小されて表示されます。
同じものをホームページビルダー20SPでプレビューすると次のように表示されます。
どちらの場合も「私たちは確かな技術で生活に信頼と安心をお届けします。」という文字列は判読不能です。
しかし実際にスマホ(といってもこれは本物のスマホではなく、Google Chromeでのシミュレーション)では、問題の画像はきれいに表示されるようです。↓
(2016.12.23 追記)ホームページビルダー21SPでも同様の結果となりました。改善は見られません。
ホームページビルダー20 SPでは、19のときにはできなかったスタイルの詳細設定が可能になりました。
ページ内容のスタイル、リスト、水平線のボーダーを設定してみました。
リストはパーツですが、水平線はパーツではありません。
ホームページビルダー20 SP テンプレートでは、スタイルの詳細設定が可能になりました。
サイト情報のスタイル
パーツトップ
配置
パーツのサイズ
幅 ピクセル・パーセント・自動
高さ ピクセル・自動
縦横比を固定する
表示形式
通常・左配置・右配置・絶対配置 絶対配置の表示基準
マージン 上・下・左・右
回り込み解除
表示メディア
表示ページ
すべて・個別に指定する
文字
プレビュー
フォント
文字サイズ
文字色
文字飾り
背景
背景色 透明・指定する
背景画像 なし・指定する
繰り返し表示 繰り返す・繰り返す(垂直方向)・繰り返さない
表示位置 左右位置・上下位置
サイズ 自動・含む・覆う
枠
ボーダー すべて固定・上下左右固定・別々に指定
ボーダータイプ
線の太さ
線の色
パディング 上・下・左・右
角丸
はみ出した内容をクリッピングする
などのスタイルが設定できます。CSSをコーディングする必要はありません。
ホームページビルダー20 SPで搭載されたコラムパーツの使い方の実験です。
コラムパーツの中に、6つコラムパーツを配置。それぞれのコラムパーツの中に、画像パーツとテキストボックスを配置しました。
パソコンで表示すると次のようになります。
これをスマホで表示すると次のようになります。