パララックスプレートは、

1.タイトル、スラッグ欄を記入したら、テンプレートを選択、ページの基本設定をしたら

2.パララックス部品の部品呼び出しメニューを開き、まずは、ヘッダーをエディター最上部に配置

3.後は必要な分だけ、エリア部品を付け足して並べていくという進め方になります。(最後にエディター最下部にフッターリンクの設置をします)

ここでは、最初に配置する2種類のヘッダーブロックの解説をします。

サイト(ページ)最上部配置する画像ヘッダーブロックです。
6

右メニューの「パララックスプレート作成部品」を押すと他の配置部品同様に、テキストエディター上部に配置ボタンが表示されます。

一番左にピンク色のボタンで「画像ヘッダーを配置」が画像で作られたヘッダーを配置する部品ボタンです。


まずは作られたヘッダー画像をサーバーにアップします

「wp-content」フィルダーの中の「themes」フィルダーの中の「wordpress-landingpage」フィルダーの中の「image」フィルダーの中の「user-header」フィルダーの中へアップしてください。

画像は、自動でブラウザーの横幅いっぱいまで表示されますので、大きめのヘッダー画像をお作りください。


つぎはヘッダーエリアを配置します。

テキストエディター最上部にカーソルを入れた状態で上記の「画像ヘッダーを配置」ボタンを押します。

<!-- ■■■■■■■■■■ヘッダーここから■■■■■■■■■■ -->
<div class="headset">
<div class="headset02">
<img src="/wp-content/themes/wordpress-landingpage/image/user-header/header-wide.jpg" width="100%" height="auto" alt="6">
</div></div>
<!-- ■■■■■■■■■■ヘッダーここまで■■■■■■■■■■ -->

こんな記述がセットされますので、上記のピンクの部分をアップした画像の名前に拡張子ごと書き換えてください。

できたら「更新」ボタンで保存します。

サイト(ページ)最上部配置する動画ヘッダーブロックです。
6
os
がここに入ります
1
1
あああああああああああああす
classああああああああああああああああああああああああああああああああああああああああああます
がここに入ります
1
1
あああああああああああああす
classああああああああああああああああああああああああああああああああああああああああああます
がここに入ります
1
1
あああああああああああああす
classああああああああああああああああああああああああああああああああああああああああああます
がここに入ります
1
1
あああああああああああああす
classああああああああああああああああああああああああああああああああああああああああああます
がここに入ります
1
1
あああああああああああああす
classああああああああああああああああああああああああああああああああああああああああああます
os

右メニューの「パララックスプレート作成部品」を押すと他の配置部品同様に、テキストエディター上部に配置ボタンが表示されます。

ピンク色のボタンで「MP4動画ヘッダーを配置」がMP4動画を背景にしたヘッダーを配置する部品ボタンです。

ヘッダーには動画が配置されてその動画はリピート再生されます。(動画に音声は販売ページの場合は入れないでください)その動画の上に文字や部品などを配置する部品エリアが重なっているという(部品エリアは削除も可能です)動画ヘッダーになります。


まずは動画を作りサーバーにアップします

MP4形式でヘッダーの背景にする動画を作ります。自動調整でブラウザーの画面横幅いっぱいに拡大表示されますのでかなり大きめに作ります。

注意点としはあまり長い動画はかなり重たくなるので短めに、それと重要なのは、音を入れないということ。音を入れるともうお客様は見てはくれませんので動く背景という感じで作ってみてください。

このヘッダーは動画の上に文字等を重ねるブロックもありますので、文字ごと動画に組み込んで動画だけを配置するのもいいし、背景としての動画を作り文字や配置部品は別に組んでいくのでもOKです。動画はループして連続再生されます。

「wp-content」フィルダーの中の「themes」フィルダーの中の「wordpress-landingpage」フィルダーの中の「image」フィルダーの中の「user-mp4」フィルダーの中へアップしてください。


つぎはヘッダーエリアを編集します。

まずはMP4動画をセットします。

ボタンを押して部品を配置すると部品の中に

<!-- 動画セットここから -->
<video width="100%" height="auto" autoplay loop>
<source src="/wp-content/themes/wordpress-landingpage/image/user-mp4/sample-hd-pala.mp4">
</video>
<!-- 動画セットここまで -->

ボタンを押すとこんな記述が見つかると思います。上記のピンクの部分が動画の名前です。アップしたファイル名に差し替えてください。


つぎはヘッダーエリア部品配置ブロックを編集します。

<!-- ■■■■■■■■■■ヘッダーここから■■■■■■■■■■ -->
<div class="headset">
<div class="headset02">
<!-- 動画セットここから -->
<video width="100%" height="auto" autoplay loop>
<source src="/wp-content/themes/wordpress-landingpage/image/user-mp4/sample-hd-pala.mp4">
</video>
<!-- 動画セットここまで -->
<div class="headset03">
<table width="0" border="0" cellspacing="0" cellpadding="0" class="headset-tb">
<tr>
<td valign="middle">
<div class="free-box" style="background: rgba(255, 255, 255, 0); width: 65%;">
<!-- 部品の配置ここから -->
ああああああああああああああああああああああ
<!-- 部品の配置ここまで -->
</div>
</td>
</tr>
</table>

</div>
</div></div>
<!-- ■■■■■■■■■■ヘッダーここまで■■■■■■■■■■ -->

まずは、動画だけ配置する場合は、上記のピンクの部分を削除すれば動画だけになります。

つぎは部品配置ブロックを編集します。

<!-- 部品の配置ここから -->
ああああああああああああああああああああああ
<!-- 部品の配置ここまで -->

部品や文字打ちは 上記のピンクの注釈の間に配置してください。

配置部品週の部品が使えます。文字は文字を配置後にエディターで編集して行ってください。

このブロックは、部品の高さが動画の高さに届かない場合は上下の中央に配置される仕組みです。

部品を配置するエリアの横幅を変えるには

<div class="free-box" style="background: rgba(255, 255, 255, 0); width: 65%;">

上記ピンクの部分のパーセントを変えていきます。画面全体を使うなら 100% でという感じです。

エリアの背景色を変えるには

<div class="free-box" style="background: rgba(255, 255, 255, 0); width: 65%;">

まず濃度です。上記ピンクの部分が今は 0 になっています。 0 だと完全透明です。部品エリアの背景色はなしということになります。ここを0.5とすると半透明になります。0.3 や 0.8 などの数字に変えて濃度を調整します。 ちなみに 1 にすると透けないその色になります。

つぎはです。上記緑の部分が部品エリアの背景色になります。いままでの#から始まるカラーコードではなく、ここではRGB似寄る色の表記となります。今は255 255 255 なので白となっています。 0 0 0 なら黒です。


動画が表示されなかった時用に背景に色をいれておきます。

<div class="headset" style="background-color: #6a0c0a;">

上記の記述が1行目にあると思います。ピンクの部分が動画が表示されなかった時用のヘッダー全面に入る色です。

ここは通常の#から始まる6桁の色のコードで色を差し替えてください。


これでヘッダー部分の設定は終わりです。

動画のダウンロード

MP4動画は、商品にあわせてお作りいただくことになりますが。動画を作るのはかなり専門的になるので、初めての方には難しいです。

例えば、無料の動画の配布サイトなどを利用するのも手です。ただ商品とマッチする動画はなかなかないので商品に合わせて短いストーリー仕立てにしてみるとかの動画が作れればベストです。

キットには上記の海の動画が1本付いていますが、他にも簡単なものですが動画をダウンロードできます。

キットのダウンロードページの下部分に動画のダウンロードがありますので、もし使いたいならご自由にダウンロードしてみてください。

ああああああああああああああ
ああああああああああああああ
ああああああああああああああ