先日リリースした新テーマ「One Page」は、1ページ完結でありながら複数の画像を画面スクロールにより背景画像として見せる事ができます。
今回は、この特徴を生かして、画像でイメージを伝えたい新商品のキャンペーンサイトを作成する方法をご案内します。
まずは、ブログの [デザイン] - [テーマ] ページで「One Page」項目の [適用] ボタンをクリックし、ブログにテーマを設定しましょう。
実行確認ページで [適用] をクリックし、テーマの変更を実行します。
キャンペーンサイトに必要なメニュー（「キャンペーン概要」、「会社情報」、「会場アクセス」、「お問い合わせ」）を作成します。
ウェブページを作成する事で、サイトの右上にウェブページのタイトルがメニューとして表示されるので、必要なメニュー名をタイトルにしてウェブページを作成しましょう。
「会場アクセス」ページを作成するための Google マップの活用方法は以下の記事が参考になるかと思います。
「お問い合わせ」ページを作成するためのフォームの設置方法は以下を参照してください。
ウェブページを作成したら、各ページの内容が表示される部分の背景になる画像を設定します。
ウェブページ（今回は「キャンペーン概要」）の編集画面を開き、「メインイメージ」項目の [画像を選択] リンクで画像を設定し、「メインイメージの配置」項目で設定した画像をどのように見せるか指定します。
（「キャンペーン概要」のページでは [下に配置] を選択します）
上記の設定でウェブページを保存すると、公開しているブログの「キャンペーン概要」の内容を表示する領域の下に指定した画像が表示されるようになります。
この調子で各ウェブページに画像を設定すると、該当のウェブページ表示領域の上、下、背景部分のいずれかに任意の画像を表示することができるので、スクロールによりブログの背景画像が入れ替わって見えるようになります。
次に、トップページのメイン背景画像を変更します。
トップページのメイン背景は、アイテムにアップロードされている画像から選択します。そのため、まずはアイテムとしてメイン背景にしたい画像をアップロードし、[アイテム] - [一覧] から設定したい画像の編集画面を開いて「メイン背景イメージに設定」にチェックを入れます。
[変更を保存] ボタンをクリックすることで、サイトのメイン背景が変更されました。
続いて、ロゴ画像を変更します。
ロゴ画像は、すでに保存されている画像を差し替える形で変更できるので、まずは差し替え用のロゴ画像を作成し、「main-img.png」という名称で保存してください。
画像を差し替えるには、[デザイン] - [ファイルマネージャ] ページを開き、「images」フォルダを開きます。
「images」フォルダ名の右側にある「＋」をクリックし、[参照] ボタンから作成した「main-img.png」を選択して [アップロード] ボタンをクリックします。
これでロゴ画像が差し替わります。
ロゴ画像の下のサイトの説明文も変更しておきましょう。
テキスト部分は [デザイン] - [テンプレート] - [インデックス・テンプレート] の「インデックスページ」内にあります。
テキストを直接編集してください。
ソーシャルボタンのリンク先なども設定しましょう。
[デザイン] - [テンプレート] - [テンプレート・モジュール] の「config」モジュールで Facebook、Twitter、Google+ の設定を行えます。利用していないサービスは削除すると非表示になります。
「config」モジュールでは、サイトの色合いも調整できます。
「メインカラー」、「トップページヘッダー背景カラー」、「トップページヘッダーテキストカラー」の項目にある「rgba(**,***,***,**)」といった部分の数値を変更、またはカラーコードで色を指定してください。
以上で、キャンペーンサイトを作成、公開するための作業は完了です。
もちろん、テーマ「One Page」はキャンペーンサイト以外でも活用できるテーマですので、マニュアルを参考にイメージしてみてください。
