ホームページを作成するには、CMSのテンプレートを活用して作成するのが一般的です。
ホームページビルダー17(HPB17)で意外に知られていないのが、外部サイトのテンプレートを活用できる点です。
WordPressでは、テンプレートのことをThemes(テーマ[複数形])といいます。WordPress本家では、なんと1,754のテーマがアップロードされています。
高品質なものばかりです。3つばかり紹介しましょう。すべてレスポンシブデザインです。「Demo」をクリックし、ブラウザの横幅を小さくしてください。パソコン用・タブレット用・スマートン用に切り替わります。
Catch Everest
Mantra
Pinboard
全て紹介すると大変なため、HPB17からCatch Everestテーマを取り込み、カスタマイズする方法をお伝えします。
既存WordPressサイトにWordPressサイトを追加する
今回は、既存のサイトに既にワードプレスが設置されている。新たに別のワードプレスサイトを設置することを想定して実施してみましょう。
次のステップで実現します
- WordPressサイトを新規に追加する
- WordPressサイトを最新版にする
- HPB17のサイト情報を転送する
新規に作るだけでも大丈夫です。新規に作るには
XAMPP ユーザー ホームページビルダー17とXAMPPでWordPress
ロリポップユーザー ホームページビルダー17 レビュー
さくらのユーザー さくらのレンタルサーバでhpb17のWorldPressサイトを作成
のいずれかで実施してください。
WordPressサイトを新規に追加する
HPB17を起動します。ガイドメニューから、「かんたんWordPressデビュー」をクリック
次へをクリック
業種とページ構成だけきちんと選ぶ、あとは適当で大丈夫(結局テーマを変えるので)。今回は初期値のままで説明。
サイト名をわかりやすいものに。私の例だと「ロリポップ hpb17a」⇒公開する
「その他のプロバイダを使用する」を選択
赤線を入力してください。今までと同じです。
次に(a)の参照ボタンをクリック。
転送先フォルダを必ず作ってください。「OK」をクリック。
(a)(b)(c)を入力後、「完了」をクリック。反映されるまでしばらく待つ。
ブラウザが立ち上がり、HPB17側は、以下の画面になる。「閉じる」をクリックし、以降は、ブラウザ側で実施する
以下のように入力し、「WordPressをインストール」をクリック
「ログイン」をクリック⇒「ログイン」をクリック
WordPressサイトを最新版にする
WordPressが古いバージョンの時は、新しくします。「更新してください。」をクリック
「いますぐ更新」をクリック。誤ってusをクリックしないように注意。
HPB17のサイト情報を転送する
「データの反映」をクリック
一番下の「データの反映を実行する」をクリック
サイトを見るをクリックし確認する
実施した状態
それでは、上記サイトに「キャッチエレベスト」テンプレートを適用しましょう。HPBダッシュボードに移動するためクリック
テンプレートの取り込み
HPB17でメニューバーの「WordPress」からサイトを開き、hpbダッシュボードに移動する。 外観ボタンが表示されていないため、設定変更する。
外観ボタンが表示されます。クリックします。
以下の順番でクリック。キーワードに「catch」と入力し、「検索」をクリック。「今すぐインストラクター」をクリック」
「有効化」をクリック
以上で、テーマの取り込みが終了しました。
実行結果
カスタマイズする
以下の部分を変更します
変更方法
Theme Optionについて
さっそく「1」の部分を変更
変更するための画像が必要です。今回のテーマはサイズが指定されています。1132x447
無料写真素材 東京デート様から画像頂き加工しました。素材がないときは、この写真を活用ください。
「Featured post slider」投稿記事特集スライダーと翻訳させて頂きました。
投稿記事特集スライダーを使うには、投稿する必要があります。
投稿する
アイキャッチ画像を設定する
必ず公開をクリック
POST IDをメモする
投稿ポストを登録する
以上で完成です。さらに投稿して、#2,#3を登録すると切り替わるようになります。
「2」の部分を変更する
Homepage Setting(ホームページ設定)でおこないます。
④をううう⑤をえええにするとこんな感じ
今回は、表示しないようにします。
最後に「3」を変更しておしまいにします。画像を準備します。いい写真がない場合は、この写真をご利用ください。
画像選択では、「投稿に挿入」を押してください。URLが左側のテキストボックスに入ります。
実行結果
予想以上に、時間がかかったため、荒い説明とさせていただきましたが、いかがでしたでしょうか?
ホームページビルダーを使用しても、WordPressテーマを利用できます。また、ビルダーで修正することも可能です。(場所による)
おしゃれなテーマを見つけましたら、どんどん利用しましょう。

マイクロソフト認定トレーナー。専業ブロガーになり1年経過(別名:ひきごもり)。ブロガーなのに誤字脱字王。滑舌が悪いのにYouTuber。『自己紹介』