ホームページビルダー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 テンプレートでの実現方法を実演しました。

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

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

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

ホームページ・ビルダー21 SPの使い方 テンプレート業種を10種類から51種類に増量

snapcrab_2016-10-07_12-34-01_no-0000

snapcrab_2016-10-07_12-34-39_no-0000

ホームページビルダー21 SPでは、選択できる業種が増えました。また階層化されました。

ホームページビルダー21 SP ガイドメニューの使い方

ホームページビルダー21が本日発売になりました。早速、導入してSPを起動してみました。

最初のメニュー(ガイドメニュー)の見た目が少し変わりました。ホームページビルダー・サービス(の宣伝)が、以前より目立ちます。

ホームページビルダー21 SP

ようこそ!hpb SPへ
さあ、はじめよう♪

「次回から表示しない」

STEP1 たくさんのテンプレートの中からあなたのイメージにぴったりなものを選んで はじめましょう!
STEP2 ドラッグ&ドロップで好きな素材を配置してあなた好みのサイトにしましょう!画像やスタイルを変えてテキストを編集すればもう完成です。
STEP3 サイトが完成したら、さっそく公開してみましょう!自動でスマートフォンにも対応したサイトになります。

初期費用0円!最大6ヶ月無料の<公式>レンタルサーバー
ホームページ・ビルダー サービス 「お申し込みはこちら」

「新規作成」 「開く」 PDFマニュアル

という内容です。

 

ホームページビルダー21 SP Twitterタイムライン パーツの使い方

ホームページビルダーSP唯一の解説本の「できるホームページビルダー」にしたがって、Twitterタイムライン・パーツを使ってみました。

本とTwitterの画面が異なっています。(Twitterのほうは、どんどん新しくなっていくでしょうから、本と今日時点の画面が異なるのは、しかたありません。)

適当に、Twitter画面を操作して、HTMLコードを得て、パーツに貼り付けました。

snapcrab_2016-10-06_16-53-37_no-0000

次のエラーとなり、処理が完結しません。

snapcrab_2016-10-06_16-53-48_no-0000 

「Twitterのサイトから取得したウィジェットのコードをテキストエリアに貼り付けてください。」