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

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

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

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

 

ホームページ・ビルダー21 SPの使い方 機能一覧(新機能・機能強化のみ)

ホームページビルダー21 新機能

ホームページビルダーSP(hpbsp)

  • ネットショップ・カート連携パーツ
    ネットショップ運営サービスで販売している商品の〔カートに追加する〕ボタンのホームページへの設置
  • イメージデザイナー
    ホームページ全体の画像作成、編集、[メイン画像]、[イラスト]、[ネットショップ用バナー]、[写真フレーム]のテンプレートを搭載。文字加工や画像加工(背景/縁取り、絵や写真の貼り付け、いろがみ/ライン、文字/文字スタンプ/枠飾り、スタンプ飾り/イメージ飾り/枠飾り)
  • 地図スタジオ
    案内地図や略図、施設案内、間取りなどわかりやすい地図作成。ホームページ用の地図サンプルやイラスト、マークを搭載。地図検索サイトのトレース機能

ホームページビルダーEC ※ビジネスパック同梱

  • ページ(HTML)作成
    Yahoo!ショッピング、楽天市場の店舗用パーツ(HTML)作成、画像のFTP 転送に対応
  • ページ、バナーの管理
    作成したページ、バナーの複製

ホームページビルダー21 機能強化

ホームページビルダーSP(hpbsp)

  • hpbspテンプレートによるページ作成支援
    hpbsp専用として設計されたテンプレートを選択してページを作成(デザイン26種類51業種のページ構成/バリューパックではデザイン52種類、ビジネスパックでは80種類となる/全種類がレスポンシブデザインに対応、通常サイト・WordPressサイトが選択可能
  • パーツ(部品)
    ネットショップ・カート連携
  • パーツのスタイル
    ブックマーク
    のスタイル設定が可能
  • テキスト書式
    ブックマーク設定
  • ページのスタイル
    ブックマークのスタイル設定が可能
  • 素材集
    バリューパックでは700点、ビジネスパックでは1,300点
  • フォント
    和文30書体以上/欧文80書体以上

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

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

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

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

サイトの公開改善点? ホームページビルダーSP バージョン21の使い方

snapcrab_2016-10-07_13-51-54_no-0000

ホームページビルダーSPがバージョン21で改善されているようです。サイトの公開画面で
「前回の公開以降に更新されたファイルのみ転送する」というオプションが追加されました。

これで差分アップができて作業効率が改善されると期待。

今日の実験の範囲では、期待どうりに動作していることは確認できませんでした。

ページを「保存」すると、すべてのページの更新日時がその時点のものになり、結局すべてのページを公開しなおすことになります。

ブックマーク ホームページビルダー21 SP 新機能の使い方

ホームページビルダーSPがバージョン21となり、売りの機能強化に隠れて?機能改善がされているようです。

ブックマーク(ページ内部の設定箇所へのリンク)の機能が追加されました。

逆説的にいうと、バージョン19、20と、その機能が無いままに販売していたようです。
(ホームページビルダー教室では、HTMLソースパーツにHTMLを書きこんで、似たような効果を出していました。)

snapcrab_2016-10-07_13-23-05_no-0000

リンクの設定画面からブックマークの指定ができるようになりました。

Advanced Recent Posts Shortcode Builderワードプレス・プラグインの使い方@ホームページビルダー教室

ホームページビルダー教室の本日午前中の授業からの宿題です。ホームページビルダー20SPでWordPressサイトを作成されている生徒さんからのご要望です。「投稿(施工事例)の一覧を目立つインパクトのあるものにしたいとのことでプラグインを探しての試験中です。」 来週の授業では生徒さんのサイトに組み込むことができそうです。

[lptw_recentposts layout=”thumbnail” post_type=”hints” link_target=”new” space_hor=”10″ space_ver=”10″ columns=”3″ order=”DESC” orderby=”date” posts_per_page=”19″ post_offset=”0″ reverse_post_order=”false” exclude_current_post=”false” override_colors=”false” background_color=”#4CAF50″ text_color=”#ffffff” show_date_before_title=”true” show_date=”true” show_time=”true” show_time_before=”true” show_subtitle=”true” date_format=”d.m.Y” time_format=”H:i” no_thumbnails=”show”]