ランディングページ作成機能の使い方

Mediaxには１カラムのランディングページを作成できる機能が始めからビルトインされています。

メルマガ読者を集めるためのスクイーズページや商品販売ページなどの作成に活用することができます。（実は、Mediaxの販売ページもこの機能を利用して作成しています　Mediax販売ページ）

ここでは、そのランディングページ作成機能の使い方について解説していきます。

※ランディングページ作成機能を有効化するために、事前に推奨プラグインの「Add Quicktag」と「Advanced Custom Fields」のインストールと有効化が必要です。

「Add Quicktag」に「addquicktag.json」をインポート

「Add Quicktag」プラグインは文字装飾をエディタ上で容易に行うことができるプラグインです。

「Add Quicktag」プラグインには、テーマに同梱されている「addquicktag.json」ファイルをインポートしておく必要がありますので、まずそちらから説明しておきます。

「Add Quicktag」プラグインをインストールして有効化すると、管理画面の左メニューの「設定」に「AddQuicktag」の項目が追加されるので、そちらをクリックします。

表示された設定画面を一番下までスクロールすると、「インポート」の項目がありますので、「ファイルを選択」ボタンをクリックして、同梱されていた「addquicktag.json」ファイルを選択し、「ファイルのアップロード・インポート」ボタンをクリックしてください。

これで、クイックタグが自動でインポートされ、エディタ上で容易に文字装飾が可能になります。

ランディングページ作成

それでは、実際のランディングページ作成手順を説明していきます。

まず、管理画面の左メニューから「固定」ページ→「新規追加」をクリックします。

通常、上の画像のようにビジュアルエディタでも編集は可能ですが、クイックタグを使用して文字装飾を使用する場合はテキストエディタのほうが便利です。

上の画像の例で「プレビュー」ボタンをクリックすると、下の画像のような表示になります。

このように、テキストエディタで編集し、プレビューで実際の表示を確認しながら作業をすると確実です。

オプション機能

ランディングページ作成機能には各種オプションがあり、この機能を使いこなすことで、初心者の方でもセンスの良いランディングページを作成することができます。

ここでは「1カラムLP」での設定方法（LP Plus Normal）を説明します。ヘッダー画像がワイド幅の場合は「LP Plus Wide」で設定してください。（ヘッダー画像以外の設定項目は同じです）

サイト幅の設定

ランディンページの幅を設定する項目です。

単位は、px（ピクセル）だけでなく%（パーセント）も使用できます。ブラウザの幅いっぱいに表示したい場合は「100%」にします。

コンテンツ幅の設定

コンテンツの表示幅を設定する項目です。

単位は、px（ピクセル）だけでなく%（パーセント）も使用できます。ブラウザの幅いっぱいに表示したい場合は「100%」にします。

コンテンツ 両サイドマージン

見出しや画像を「サイト幅」いっぱいに表示させたい場合に使用します。単位は、px（ピクセル）だけでなく%（パーセント）も使用できます。

たとえばサイト幅900px、コンテンツ幅900pxとした場合、見出しや画像がページの幅いっぱいに表示されます。

ただし、このままだと記事テキストもコンテンツ幅いっぱいに表示されるため、コンテンツ 両サイドマージンを40pxなどと指定して＜div class=”side_m”＞テキスト＜/div＞　のようにタグで囲むことで、テキストの両サイドには40pxの間隔が空くということです。

タイトルバーカラーの設定

H2、H3などのタイトルバーの背景やラインのカラーを設定できます。

ヘッダー画像の設定

ヘッダー画像をアップロードするだけでページに表示させることができます。

標準画像の場合

画像サイズがサイト幅よりも大きい場合は、自動でサイト幅に縮小され表示します。小さい場合は、そのままのサイズでセンター配置されて表示します。（サイト幅で設定したサイズと同サイズが推奨です）

ワイド画像の場合

画像サイズがブラウザ幅より大きい場合は、自動でブラウザ幅に縮小され表示します。小さい場合は、そのままのサイズでセンター配置されて表示します。

サイト枠装飾

サイト枠の装飾を設定できます。サイト枠の装飾は「シャドウ」「ライン」「なし」の3種類です。

サイト内背景 画像

サイト内の背景に画像を設定することができます。背景に設定した画像は縦にリピートされます。

サイト内背景

サイト内の背景に色を設定することができます。カラーパレットを使用しますので、お好きな色に設定することができます。

背景

ページの背景に色を設定することができます。カラーパレットを使用しますので、お好きな色に設定することができます。

背景 画像

ページの背景に画像を設定することができます。背景に設定した画像は縦横にリピートされます。

YouTube（レスポンシブ対応）

YouTube動画をレスポンシブ化する方法を解説します。

テキストエディタ上部の「YouTube」ボタンをクリックします。

挿入されたタグの後に動画の埋め込みコードを貼り付けます。　再度テキストエディタ上部の「YouTube」ボタンをクリックすると、閉じタグが挿入されます。

ブラウザで表示してみます。（フルサイズ）

ブラウザの幅を狭くした状態

このように、ブラウザの幅に応じて動画プレイヤーの幅と高さも適正なサイズに自動調整されます。