ホームページビルダー20 SP テンプレートの使い方 サイトの新規作成

ホームページビルダー20SPでは、テンプレートからのみサイトの作成が可能です。

サイトの新規作成(テンプレートの選択)

「テンプレートを選択してください」
テンプレートの種類
ベーシック
ミニマル
ポップ
フェミニン
ナチュラル
和風
立体
ラグジュアリー
アクティブ

サイトの新規作成(基本情報の入力)

「基本情報を入力してください。」
サイト情報
サイト情報を設定してください。
サイト名
業種 プレビュー
サイトタイプ
サイトタイプを選択してください。
通常
WordPress
基本情報の入力
作成するサイトのタイトルと簡単な説明を入力してください。これらの情報は、Webサイトに表示されます。
タイトル
キャッチフレーズ
検索エンジンの表示例

サイトの新規作成(完了)

「テンプレートを保存しました。」
この後の文書や画像などの編集は、編集画面で直接行ってください。
編集後、サイトを公開するには
ナビバーのサイトの公開を選択します。
「閉じる」

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

ホームページビルダー20 SPではパーツのスタイルの詳細設定ができるようになりました。

  • サイト情報のスタイル
    • パーツトップ
    • サイトタイトル
    • タイトルリンク
    • キャッチフレーズ
    • サイト情報拡張
  • サイトナビゲーションのスタイル
    • パーツトップ
    • メニュー
    • メニュー項目(第一階層)
    • マウスホバー時のメニュー項目(第一階層)
    • カレントページメニュー項目(第一階層)
    • メニュー項目(第二階層)
    • マウスホバー時のメニュー項目(第二階層)
    • カレントページメニュー項目(第二階層)
  • 画像のスタイル
    • パーツトップ
  • ページタイトルのスタイル
    • パーツトップ
    • 見出し
  • ページ内容のスタイル
    • パーツトップ
    • [段落]標準
    • [段落]見出し1
    • [段落]見出し2
    • [段落]見出し3
    • [段落]見出し4
    • [段落]見出し5
    • [段落]見出し6
    • [段落]引用
    • [段落]コピーライト
    • [段落]大きい文字
    • [段落]インデント
    • [段落]値段
    • [段落]アイコン
    • [段落]都筑
    • リンク
    • マウスホバー時のリンク
    • 訪問済みリンク
    • [文字]強調
    • [文字]重要
    • [文字]コメント
    • [文字]タイトル
    • [文字]引用
    • [文字]言葉の定義
    • [文字]省略
    • [文字]サンプル
    • [文字]キーボード
    • [文字]コード
    • [文字]変数
    • [文字]下付き
    • [文字]上付き
    • 太字
    • 斜体
    • 下線
    • 取り消し線
    • 水平線
  • 投稿一覧のスタイル
    • 一覧タイトル
    • 一覧タイトルリンク
    • 投稿リスト
    • 投稿タイトル
    • 投稿タイトルリンク
    • 続き
    • 続きリンク

ホームページビルダー20 SP テンプレート 地図パーツのプロパティの使い方

パーツのプロパティ 地図

地図の設定

地図の設定(Googleマップ)
地図の種類
 地図
 地図+地形
 航空写真
 航空写真+ラベル
縮尺
ズームレベル

マーカー
名前
追加
編集削除
オプション
表示するコントロールの指定
 自動設定
 手動設定
  移動・ズーム
   ズーム・ボタンのみ
   ズーム・ボタンと移動カーソル
   ズーム・ボタン、スライダ、移動カーソル
  地図タイプ切り替えボタン
  地図の縮尺
  地図の概要
 基本設定
  マウスでのドラッグを禁止

地図検索
地名

ホームページビルダー20SPテンプレートの使い方 パーツのプロパティが消えた!

Yahoo!知恵袋にあった質問の現象をホームページビルダー教室で再現してみました。

ホームページビルダー20SPを使っての再現試験です。

パーツのプロパティビューはオンになっています。しかし画面上パーツのプロパティが見当たりません。

良く見てみると、画面一番下、Windowsタスクバーの右側の裏にパーツのプロパティがいます。

タスクバーを動かさないとパーツのプロパティへの操作ができない状況です。

SnapCrab_No-0005

ホームページビルダー20SPテンプレート 投稿一覧 パーツプロパティの使い方

投稿一覧パーツのプロパティ

投稿タイプ
管理
一覧タイトル
表示形式(すべて、タイトル+要約+日付、タイトル+アイキャッチ画像+要約、日付+タイトル、タイトル+要約、タイトル)
表示する投稿記事の分類
分類
表示する最大投稿数
記事の並び替え(指定なし・日付・タイトル・コメント数)
ページ送り

アイテムギャラリーの使い方 パーツのプロパティ ホームページビルダー20SPテンプレート

ホームページビルダー20SPテンプレート、新たに搭載されたアイテムギャラリーです。
・アイテムリスト 管理
・カテゴリーで絞り込む
・表示設定
グリッド・メーソンリー
アイテムのサイズを指定する
・アイテム名
・説明
・価格
・アイコン
・詳細設定
画像クリック時の動作(拡大表示・ページジャンプ・拡大表示画像のグループ化)
並び替え効果の設定

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

ホームページビルダー20SPのテンプレートにあるお問合せフォーム。

お問合せ内容の項目はtextarea(複数行テキスト)となっています。

テンプレートにあるものを使っている分には問題はありませんが、同様の複数行の入力項目を追加しても、テンプレートのスタイルが効かずに同じように表示(幅)することができません。

そして、SPではCSSをいじること(HTMLを書き出してソース編集すればいいのかもしれませんが、それではSPを使っている意味がまったくありませんね。)

テンプレートのもともとある複数行テキスト項目のスタイルは

.sp-form textarea[name=”message”] {
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
width: 90%;
height: 150px;
}

となります。name=”message”がキモです。複数行テキスト項目を追加すると別のnameを指定する必要があります。すると上のスタイルは効きませんので、表示が異なることになります。

解決方法

HTMLソースパーツにCSSをインライン記述すればなんとかなりそうです。。。

ここで試してみました

http://hpb20sp.com/contact1.html

ファビコン設置 ホームページビルダー20 SPテンプレートの使い方

ホームページビルダー20 SPを使ってファビコンの設置は可能でしょうか?

ファビコンとは、当サイト(ホームページビルダー.net)でいえば、ブラウザーのページタイトルの左側に表示されるアイコンのことです。

ホームページビルダー.netファビコン

1.サイトタイプ=通常

SPでは<head></head>間に<link>を挿入することができない。HTMLソースパーツを試してみましたが、bodyの中に埋め込まれる。ファビコンの設置は不可能だと思われます。

2015/01/15追記:Javascriptを使ってfaviconの設置に成功しました。 http://hpb20sp.com/ をご覧ください。

2.サイトタイプ=WordPress

ワードプレスならば、ホームページビルダーではなくワードプレス・ダッシュボード上で、プラグイン(例 Favicon Rotator)を用いれば設置が可能と思われます。

ホームページビルダーSPには、できること、できないことがあるようです。

スマホ対応ページの開発@ホームページビルダー教室

ホームページビルダーのテンプレートを使えば簡単にスマホ対応のホームページが作成できます。

ホームページビルダー教室ならホームページビルダーの基本機能に加えて、作業の効率化のためのブラウザーの使い方、機能の追加などを学習しながら実際のホームページの作成を進めることができます。

SnapCrab_No-0007

ホームページビルダー20 SPテンプレートの使い方 パーツの不具合?

ホームページビルダー20 SPで、パーツ一覧からサイト情報パーツをページに配置。

次のようになりました。

ホームページビルダーSP サイト情報 パーツ

一つ目と二つ目のサイト情報パーツが何も表示されません?最初はバグ(不具合)かと思いました。ちょっと調べてみると、背景が透明で、文字が白かったようです。パーツのスタイルを調整して、次のように変更しました。

ホームページビルダー20 SP サイト情報パーツ