ホームーページビルダーではできないこと (ワードプレスの使い方) 

ホームページビルダーでワードプレスサイトを作成することが、バージョン17から可能になりました。最新のバージョン19では、SPのサイトタイプ=WordPress、もしくはクラシックのワードプレス・テンプレートどちらでも作成可能です。

ホームページビルダーのページ編集や、ホームページビルダー標準のhpbダッシュボードでは、ワードプレスの機能拡張性を生かすことができません。

実際に、当ホームページビルダー教室で、ワードプレス・サイトを作成している生徒さんに共通している要望がいくつかあります。

  • サイドバーへのバナー設置 (画像+リンク)
  • 営業日を表示するカレンダー
  • 投稿へのコメント禁止
  • 複数ユーザーからの投稿
  • meta descriptionの記述
  • グーグル ウェブマスターツール、アナリティクスへのサイト登録
  • 問い合わせフォーム 自動返信メール
  • システムメニューの英語化
  • アフィリエイト広告、YouTube動画のウィジットへの埋め込み
  • 投稿に表を挿入
  • Facebookとの自動連携
  • ファイルダウンロード数のカウント
  • ページ毎にアンケート設置
  • ファビコンの設置
  • ページ毎に署名挿入
  • マルチドメイン 複数サイトの作成
  • ページ・投稿のパスワード保護
  • データーベース(MySQL)の準備
  • などなど

これらは、ワードプレス本来のダッシュボード、プラグインの追加・使い方、レンタルサーバーの設定などの知識・経験が必要です。

郵便番号住所変換の使い方 ワードプレス お問い合わせフォーム@ホームページビルダー教室

ホームページビルダー教室の生徒さん、ホームページビルダー19クラシックにてワードプレス・サイトを構築中、お問い合わせフォームに関するご要望。 郵便番号の入力から住所を自動変換。他の生徒さんに一度指導していたのですが、私の手元に実装が残っていなかったので、改めてajaxzip3の使い方を調査して、その記録のために本サイト上で実験しておきます。 問い合わせフォームに、Contact Form 7を使っている場合です。 郵便番号住所変換 ワードプレス お問い合わせフォーム

Q2W3 Fixed Widgetプラグインの使い方@ホームページビルダー.net

ホームページビルダー.netに導入しました。Q2W3 Fixed Widget ワードプレス・プラグインを導入、試用中です。 左側にあるバナー画像を、ページをスクロールしても固定するために使っています。 Q2W3 Fixed Widget Q2W3 Fixed Widget   本サイトはホームページビルダー19クラシックWordPressテンプレートで作成・更新しています。  

できるホームページビルダー(インプレス)の変遷 

ホームページビルダーのバージョンアップと同時に出版されている解説本「できるホームページビルダー」 ホームページビルダーの書籍セット、バリューパック、ビジネスパックに同梱もされているので、使い方の参考に、ご覧になっている方もいらっしゃるかと思います。 最近の各バージョンの注意点をまとめます。

できるホームページビルダーの変遷(15~19)
できるホームページビルダー15
 かんたんページ作成ウィザードでホームページを作成していきます。フルCSSテンプレートの前身であるフルCSSプロフェッショナルテンプレートは紹介程度の記述となっています。
 できるホームページビルダー16
 フルCSSテンプレートを中心に解説しています。今でもフルCSSテンプレートの入門書としては最適なものでしょう。(ホームページビルダー19クラシックではスマートフォン対応がレスポンシブ・デザインとなったので作成方法は異なります。)
 できるホームページビルダー17
 バージョン17で新たに搭載されたワードプレス・テンプレートを中心に解説。ホームページビルダーサービスを前提に説明しています。
 できるホームページビルダー18
 ワードプレス・テンプレートを中心に解説。ホームページビルダーサービスを前提に説明しています。バージョン18の新規のJQueryフォトモーションの紹介も含まれています。ホームページビルダー19クラシック ワードプレス・テンプレートの入門書としても使えます。
 できるホームページビルダー19
 ホームページビルダー19の新機能である SP サイトタイプ=通常 (すなわちワードプレスではない) の入門書となっています。

まとめ: 現時点では ホームページビルダー19 SP WordPressの入門書はないようです。

ホームページビルダー19 SP と クラシック の使い方

ホームページビルダー19 SP と クラシック は互換性は一切ありません。

ホームページビルダーに同梱されている黒いテキスト(スターターブック) 2-13に明記されています。

  • ホームページビルダーSPで作成したホームページやサイトをホームページビルダー クラシックで編集することはできません。
  • ホームページビルダークラシックで作成したホームページやサイトをホームページビルダー SPで編集することはできません。

すなわち作成開始前に、どちらの方法かを選択する必要があります。

先ほどYahoo!知恵袋で同様の回答をしたので、こちらにもメモしておきます。

 

 

ホームページビルダー・ワードプレス・テンプレート サイドバーの使い方

ホームページビルダー.net では、日々、使い方の研究を続けています。 サイドバーの内容は、ダッシュボード(hpbダッシュボードではサイドバー設定、ワードプレス・ダッシュボードでは外観・ウィジット)でのみ編集可能と思いこんでいました。サイドバーの一番上は、ホームページビルダーのページ編集で入力することを今朝ほど発見しました。本サイトでは、以下の内容を入れてみました。

ホームページビルダー教室 おかげさまで開校5周年

レスポンシブ・デザイン スマホ・ページ対応@ホームページビルダーの使い方

ホームページビルダー19では、ホームページビルダーSPのテンプレート(サイトタイプ、ホームページビルダー・クラシックのWordPressテンプレート、フルCSSテンプレートのすべてがスマホ・ページ対応のレスポンシブ・デザインになりました。 スマホの対応には、いくつかの方法があります。 1.パソコン版のみ用意してパソコン版を見てもらう。パソコンの画面用に設計されたページが縮小されて表示される。字を読むには拡大が必要。拡大してスクロールしていくようになります。 2.パソコン版、スマホ版を別々の設計・用意しておく。相手の端末の応じたページに切り替える。(サーバー側の設定や、ページに埋め込むJavascriptを使用) どちらに対してもデザインの最適化が可能。同じような内容のページを2つ作成・更新している手間が必要。 3.レスポンシブ・デザイン パソコン・スマホ共通のページをひとつ作成。それを端末の画面のサイズごとに(スタイルシートの設定を切り替えて)並び替え・サイズ調整をする方法です。 次の画面例は、ホームページビルダーSPテンプレート(サイトタイプ=通常)のものです。

ホームページビルダーSP レスポンシブ・デザイン

ホームページビルダー19クラシックの使い方 ホームページビルダー18からの強化点・変更点

ホームページ・ビルダー19 スターターブックからの情報です。

ホームページビルダー18からの強化点・変更点

  • フルCSSテンプレートのレスポンシブ対応(スマホ対応)
  • ソーシャルネットワーク連携 LINEで送る ボタンの追加
  • フォトモーション スライドショー・カルーセルで画像にリンク設定が可能

削除機能

  • Evernoteサイトメモリー ボタン挿入
  • PDFマニュアル スマートフォン編

 

 

ホームページビルダー フルCSSテンプレートの使い方 バナーの追加

ホームページビルダー18 フルCSSテンプレートにはバナー画像があらかじめ用意されています。その使い方は簡単な面と、難しい面があります。

ホームページビルダー フルCSSテンプレートの使い方

  バナーの数を減らすことは簡単です。リスト項目の編集から削除することができます。画像の編集は背景画像の編集で可能です。 バナーの数を増やすことは簡単ではないようです。(以下にテンプレートのHMTL,CSSコードの抜粋を載せています。) バナーはリストで構成されています。バナー画像は各リスト項目の背景として、id ごとに指定されています。 任意の画像を持つバナーを増やすには、リスト項目を別のIDで増やして、そのIDに対するスタイルをCSSに追加する必要がありそうです。 ページ(HTML)

 <div id="banner">
 <h3 class="hpb-c-index">バナースペース</h3>
 <ul>
 <li><a href="access.html" id="banner-access">アクセス</a>
 <li><a href="#" id="banner-netshop">ネットショップ</a>
 <li><a href="itemlist.html" id="banner-category1">商品カテゴリ1</a>
 <li><a href="itemlist.html" id="banner-category2">商品カテゴリ2</a>
 <li><a href="itemlist.html" id="banner-category3">商品カテゴリ3</a>
 </ul>
 </div>

スタイル(CSS)
#banner a#banner-access{
 /* アクセスバナー */
 background-image : url(banner_2G_01.png);
}
#banner a#banner-netshop{
 /* ネットショップ */
 background-image : url(banner_2G_02.png);
}
#banner a#banner-category1{
 /* 商品カテゴリ1 */
 background-image : url(banner_2G_03.png);
}
#banner a#banner-category2{
 /* 商品カテゴリ2 */
 background-image : url(banner_2G_04.png);
}
#banner a#banner-category3{
 /* 商品カテゴリ3 */
 background-image : url(banner_2G_05.png);
}