新着記事
ランディングページ作成機能の使い方       ·       バージョンアップ情報(ver.1.2)       ·       Mingle Forumでフォーラムを作成する       ·       バージョンアップ情報(ver.1.1)       ·       「Shortcodes Ultimate」プラグインの設定と使い方       ·       ヘッダー上部のログインフォームを非表示にする方法       ·       投稿記事トップのアイキャッチ画像をセンター寄せにする方法       ·       リンクにマウスオーバーでツールチップを表示させる方法       ·       投稿記事のアイキャッチ画像を動画に置き換える方法       ·       ヘッダー上のログインフォームを有効化する方法       ·       フォーラムの最新情報をサイドバーに表示する方法       ·       ピックアップ記事をアイキャッチつきでサイドバーに表示       ·       サムネイル画像つきの投稿記事一覧をサイドバーに設置       ·       サイドバーにYouTube動画を設置       ·       サイドバーに広告を設置       ·       ウィジェットの使い方       ·       フッターテキスト設定       ·       メタタグ設定       ·       ソーシャルボタン設定       ·       広告ボックスの設定       ·       コメント表示設定       ·       グローバル設定       ·       ナビゲーションメニューの設定       ·       ロゴ画像の設定       ·       テーマのインストール       ·       YouTube動画投稿のデモ       ·      

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

2015年 4月13日  by 
2015年 4月13日  by 
2015年 4月13日  by 
2015年 4月13日  by 
2015年 4月13日  by 

 

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

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

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

 

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


 

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

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

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

addquick

 

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

 

 

 

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

bandicam 2015-04-13 20-59-50-918

 

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

 

ランディングページ作成

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

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

 

bandicam 2015-04-13 22-04-32-304

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

bandicam 2015-04-13 22-48-08-139

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

bandicam 2015-04-13 22-52-15-893

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

 

オプション機能

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

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

 

 

サイト幅の設定

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

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

bandicam 2015-04-11 23-30-30-597_1

コンテンツ幅の設定

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

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

bandicam 2015-04-11 23-30-30-597_2

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

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

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

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

bandicam 2015-04-11 23-30-30-597_3

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

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

bandicam 2015-04-11 23-30-50-163_1

ヘッダー画像の設定

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

標準画像の場合

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

bandicam 2015-04-11 23-30-50-163_2

ワイド画像の場合

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

bandicam 2015-04-14 00-18-52-981

サイト枠装飾

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

bandicam 2015-04-11 23-30-50-163_3

サイト内背景 画像

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

bandicam 2015-04-11 23-31-08-507_1

サイト内背景

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

bandicam 2015-04-14 00-31-08-277

背景

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

bandicam 2015-04-11 23-31-08-507_3

背景 画像

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

bandicam 2015-04-11 23-31-08-507_4

YouTube(レスポンシブ対応)

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

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

bandicam 2015-04-14 00-43-27-749

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

bandicam 2015-04-14 00-46-45-162

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

bandicam 2015-04-14 00-47-07-811

 

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

bandicam 2015-04-14 00-47-34-849

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

 

 

Socialise With Us

backtotop