画像パーツ配置 プレビューと編集画面で異なる結果 ホームページビルダー21SPテンプレートの使い方

ホームページビルダー21SPで画像パーツを使って画像をページに配置しています。

編集画面では、画像の位置がおかしいようです。

プレビュー画面での表示は、期待通りとなります。

 

ホームページビルダー21SPテンプレート HTMLソースパーツのスタイルの使い方

ホームページビルダー21SP HTMLソースパーツでYouTubeのテスト。

<div id=”sp-html-src-6″ class=”sp-part-top sp-html-src”><iframe width=”280″ height=”155″ src=”https://www.youtube.com/embed/rWB7LFV_JlM?rel=0″ frameborder=”0″ allowfullscreen=””></iframe></div>

サイトの公開前にブラウザーで確認すると、スタイルは以下の通り

@media not screen, screen and (min-width: 569px)
#sp-html-src-6 {
width: 49%;
float: left;
position: relative;
}
.sp-part-top {
display: block;
position: relative;
box-sizing: border-box;
}

サイトの公開をすると、

.sp-part-top {
display: block;
position: relative;
box-sizing: border-box;
}

と、一部欠如してしまう??

ホームページビルダー21 SP テンプレート無料相談会での実演記録

ホームページビルダーのSPでのホームページ作成を検討されている方と無料相談会を行いました。

生徒さんのご要望をうかがい、その場でSP テンプレートでの実現方法を実演しました。

パーツをタイル状に配置していいます。

WP-Tiles ワードプレス・プラグインの使い方@ホームページビルダー21教室

 [wp-tiles post_type=”item” order=”DESC” orderby=”date”
        padding=”10″ grids=”Plain” posts_per_page=40] 
 
ホームページビルダー クラシックWordPressテンプレートで使用。

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

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

ホームページビルダー21 アップデートモジュールの使い方 SP クラシック

snapcrab_just%e3%82%aa%e3%83%b3%e3%83%a9%e3%82%a4%e3%83%b3%e3%82%a2%e3%83%83%e3%83%97%e3%83%87%e3%83%bc%e3%83%88_2016-10-11_10-30-34_no-00

JUSTオンラインアップデート

新しいアップデートが見つかりました。
ダウンロードして実行したいアップデートを選択してください。

IDが付いた項目は、登録ユーザー様を対象としています。
ダウンロードには、User IDとUser ID用パスワードをご用意ください。

アップデート一覧
・ホームページビルダー21クラシック アップデートモジュール
・ホームページビルダー21 EC アップデートモジュール
・イメージ デザイナー アップデートモジュール
・ホームページビルダー21 SP アップデートモジュール
・JS共通セキュリティ更新モジュール
・地図スタジオ2 アップデートモジュール(2009年12月)

アップデートについて

ホームページビルダー21 クラシックで発生している現象を回避します。
更新日 2016.10.07
サイズ 1552KB

という内容の画面です。

ホームページビルダーSP バージョン21の使い方 NEW!! イメージデザイナー

ホームページビルダーSP バージョン21で新たに搭載されたイメージデザイナーを使ってみました。

ホームページビルダー21 イメージデザイナー

とりいそぎホームページビルダーSPのテンプレートに、あらかじめ組み込まれた画像の編集から挑戦しています。

ホームページビルダー21 SP 見本サイトはこちら

 

 

ホームページビルダー21 SP 外部エディター(イメージデザイナーの使い方)で画像を編集

サイトタイトル画像やヘッダー画像の編集は、ホームページビルダーSPバージョン19、20では、ウェブアートデザイナー形式(MIF)での編集が基本でした。

バージョン21からは、新たに組み込まれた「イメージデザイナー」がその役割になりました。

snapcrab_2016-10-07_19-53-31_no-0000

「外部エディターで画像を編集」画面で、「イメージデザイナー」以外を選択すると

snapcrab_2016-10-07_19-49-43_no-0000

「選択された画像は、「イメージデザイナー」専用の画像ファイル形式です。「イメージデザイナー」以外で、編集、保存すると、データが変換されて画像と文字などを別々に再編集できなくなります。

という注意が表示されます。

 

サイトのクリーンアップ ホームページビルダーSP バージョン21の使い方

ホームページビルダー21 SPでは、不要ファイルの確認、削除が可能になりました。

snapcrab_2016-10-07_14-35-19_no-0000

テンプレートから新規作成したばかりで、既に不要ファイルが存在しているのは、ちょっと不自然に感じましたが。