ホームページ作成

HPB17 外部サイトのテンプレートを活用する

2013年5月3日

ホームページを作成するには、CMSのテンプレートを活用して作成するのが一般的です。

ホームページビルダー17(HPB17)で意外に知られていないのが、外部サイトのテンプレートを活用できる点です。

WordPressでは、テンプレートのことをThemes(テーマ[複数形])といいます。WordPress本家では、なんと1,754のテーマがアップロードされています。

テーマへのリンク

20130503u

高品質なものばかりです。3つばかり紹介しましょう。すべてレスポンシブデザインです。「Demo」をクリックし、ブラウザの横幅を小さくしてください。パソコン用・タブレット用・スマートン用に切り替わります。

20130506

Catch Everest

Demo |?Theme

20130503g

Mantra

Demo?|?Theme

20130503f

Pinboard

20130503h

全て紹介すると大変なため、HPB17からCatch Everestテーマを取り込み、カスタマイズする方法をお伝えします。

既存WordPressサイトにWordPressサイトを追加する

今回は、既存のサイトに既にワードプレスが設置されている。新たに別のワードプレスサイトを設置することを想定して実施してみましょう。

20130504

次のステップで実現します

  1. WordPressサイトを新規に追加する
  2. WordPressサイトを最新版にする
  3. HPB17のサイト情報を転送する

新規に作るだけでも大丈夫です。新規に作るには

XAMPP ユーザー ホームページビルダー17とXAMPPでWordPress
ロリポップユーザー ホームページビルダー17 レビュー
さくらのユーザー さくらのレンタルサーバでhpb17のWorldPressサイトを作成

のいずれかで実施してください。

WordPressサイトを新規に追加する

HPB17を起動します。ガイドメニューから、「かんたんWordPressデビュー」をクリック

20130504a

次へをクリック

20130504c

業種とページ構成だけきちんと選ぶ、あとは適当で大丈夫(結局テーマを変えるので)。今回は初期値のままで説明。

20130504d

サイト名をわかりやすいものに。私の例だと「ロリポップ hpb17a」⇒公開する

20130504e

「その他のプロバイダを使用する」を選択

20130504f

赤線を入力してください。今までと同じです。

次に(a)の参照ボタンをクリック。

20130506c

転送先フォルダを必ず作ってください。「OK」をクリック。

20130506d

(a)(b)(c)を入力後、「完了」をクリック。反映されるまでしばらく待つ。

20130506e

ブラウザが立ち上がり、HPB17側は、以下の画面になる。「閉じる」をクリックし、以降は、ブラウザ側で実施する

20130504h

以下のように入力し、「WordPressをインストール」をクリック

20130506g

「ログイン」をクリック⇒「ログイン」をクリック

20130504m

WordPressサイトを最新版にする

WordPressが古いバージョンの時は、新しくします。「更新してください。」をクリック

20130504

「いますぐ更新」をクリック。誤ってusをクリックしないように注意。

20130504b

HPB17のサイト情報を転送する

「データの反映」をクリック

20130504d

一番下の「データの反映を実行する」をクリック

20130504f

サイトを見るをクリックし確認する

20130506h

実施した状態

20130504g

それでは、上記サイトに「キャッチエレベスト」テンプレートを適用しましょう。HPBダッシュボードに移動するためクリック

20130504h

テンプレートの取り込み

HPB17でメニューバーの「WordPress」からサイトを開き、hpbダッシュボードに移動する。 外観ボタンが表示されていないため、設定変更する。 20130503n

外観ボタンが表示されます。クリックします。

20130503o

以下の順番でクリック。キーワードに「catch」と入力し、「検索」をクリック。「今すぐインストラクター」をクリック20130504i

「有効化」をクリック

20130503p

以上で、テーマの取り込みが終了しました。

20130506i

実行結果

20130504k

カスタマイズする

以下の部分を変更します

20130504m

変更方法

20130504n

Theme Optionについて

20130504p

さっそく「1」の部分を変更

20130504q

変更するための画像が必要です。今回のテーマはサイズが指定されています。1132x447

無料写真素材 東京デート様から画像頂き加工しました。素材がないときは、この写真を活用ください。

「Featured post slider」投稿記事特集スライダーと翻訳させて頂きました。

投稿記事特集スライダーを使うには、投稿する必要があります。

投稿する

20130504t

アイキャッチ画像を設定する

20130504u

必ず公開をクリック

20130504v

POST IDをメモする

20130504w

投稿ポストを登録する

20130504x

以上で完成です。さらに投稿して、#2,#3を登録すると切り替わるようになります。

20130504y

「2」の部分を変更する

20130504z

Homepage Setting(ホームページ設定)でおこないます。

20130505

④をううう⑤をえええにするとこんな感じ

20130505a

今回は、表示しないようにします。

最後に「3」を変更しておしまいにします。画像を準備します。いい写真がない場合は、この写真をご利用ください。

20130505d

画像選択では、「投稿に挿入」を押してください。URLが左側のテキストボックスに入ります。

実行結果

20130505e

予想以上に、時間がかかったため、荒い説明とさせていただきましたが、いかがでしたでしょうか?

ホームページビルダーを使用しても、WordPressテーマを利用できます。また、ビルダーで修正することも可能です。(場所による)

おしゃれなテーマを見つけましたら、どんどん利用しましょう。

-ホームページ作成
-