固定ページ・投稿記事のヘッダーを一瞬でプロ品質に変えてLP化する方法

プロ級ヘッダーデザイン

一瞬でプロ品質に

任意のページヘッダー変身術

WING（AFFINGER5/5EX)専用

フルスクリーンLP化

任意ページを完全LP化する

WINGご購入者向け特典

WING設定と追加用CSSでOK

画像・動画・アニメ活用

画像・動画・アニメで魅せる

WING x Smart Slider 3

PRODUCED by KENBO

 

固定ページ・投稿記事のヘッダーを一瞬でプロ品質に変えてLP化する方法（WING専用）

この記事は、ワードプレステーマWING（AFFINGER5/5EX)を利用した
任意のページ（トップページ、固定ページ、投稿記事）の
ヘッダーデザインをプロ並みの品質に変える手法について述べています。

この手法によって、簡単且つ一瞬で
あなたの表現したいページから素人臭さが失せ、
魅力的なLP（Landing Page)に変身することができます。

因みにご覧になっているこのページも
通常の投稿記事にヘッダーレイアウトだけ
修正していますが、作成時間は約5分です。
（ヘッダーレイアウトに何を書くかのキャッチフレーズを
　考える時間のほうが長く、それが決まれば2分程度の作業で終了します。）

WING標準仕様のLP化とその限界

WINGは非常に高機能でカスタマイズ範囲も大きい
ワードプレステーマです。

固定ページや投稿記事については、
1カラム、LP化する、LP化（ワイド）する
の3パターンが選択可能です。

1カラムおよびLP化する設定では
概ね下図のようなレイアウトとなります。

上図において、スクリーンの横幅に対して
本文を表示する横幅指定が可能ですが、WING仕様では
固定ページ、投稿記事にアイキャッチ画像を利用すると
表示サイズがぴったりと本文表示範囲に収まるようになっています。

これはこれで良しとして、私も当ブログ内では
ほとんどの記事にこのアプローチを採用しています。

ただ、アイキャッチ画像をスクリーン一杯に広げ
活用したい場合、例えばLPでもよく見かけるタイプの
縦横ともスクリーンいっぱいに広がった
フルスクリーンタイプはサポートされておりません。

またアイキャッチ画像はあくまで静止画であって、
ここにアニメーション含めた表現、或いは動画などを
配置することは標準仕様では不可能です。

このカスタマイズを行うためには
相応のプログラミングスキルが必要ですが、
一般のアフィリエイターや販売者はこのことに
通じている人は非常に稀です。

なお、WINGで「LP化（ワイド）する」設定はベータ版として
環境により動作保証がなく、用途も限定されています。

もともと私が販売者へリクエストして実装してもらったのですが、
ベータ版であるだけに実際に使うことをお勧めできません。

Smart Slider 3 プラグインという救世主

私が実現したかったフルスクリーンでのLPデザインを
魔法のように叶えてくれる強力な助っ人を見つけました。

Smart Slider 3というプラグインです。

Smart Slider 3は、名称から連想して単なるスライダー機能
だけだと思うと大間違いです。

ページ全体、或いはその一部を自在に
（＝アニメーションやパララックスやさまざまなイフェクトを活用して）
演出できる道具だとご理解ください。

またSliderという名称から、よくある
カルーセルスライダー（横に移動するスライダー）
をイメージされるかもしれません。

もちろんカルーセルスライダー機能もありつつ、
スライダーを停止して単なる画像、或いは動画（YouTube、VIMEO、自前の動画）
をそこで使うことも、スライドしながら使う方法もたくさんあります。
（そのようなテンプレートが揃っています。）

Smart Slider 3を本気で利用される場合は
特にこの有料版を強くおススメしています。
(無料版と比べて機能やサポート面でも圧倒的な差があるからです)

詳しくはこちらをご覧ください。
このページ投稿時点では35ドルですが、これらすべてが利用可能です。

このSmart Slider 3（PRO=有料版）を強くおススメする理由を言っておきますと；

Smart Slider PROで用意されているテンプレート群は
どれひとつとっても、外部に作成を依頼すると
そこそこの出費を伴い、35ドルどころではありません。

WINGに使う場合、ちょっとした問題が・・・

さて、このSmart Slider PROのテンプレートを
なんとか使えないか。。。

WINGの固定ページ、にそのままSmart Slider 3(無料版、有料版とも)を
貼り付けると見栄え的にどうしても気になる現象が発生します。
（アイキャッチ画像を使用しない設定となります）

どうなるかというと、下図のように横幅／縦幅とも自在なのはGood！
ただどうしても上部にすき間（空白）が生じるのです。
（WINGの仕様上、これは正常な動きなのですが・・・）

このすき間を埋めたい。。。

Slider部分をぴったりスクリーンサイズに合わせたい。。。

このためにはWINGの必要な各種設定とともに
CSSの追加が必要です。

しかしWING上の設定＆CSS追加だけでクリアできる問題なので
ワードプレスやテーマのバージョンアップがあっても
リスクの高いPHPファイルなどを編集せずそのまま踏襲できます。

ならばと、自力でいろいろと模索しましたが
どうしてもすき間がキレイに掃除できないままとなり
結局はワードプレステーマを自作できるプログラマーに
頼ることとなりました。

そのプログラマーでさえ、一発ではうまくいかず
何度かコードを書き換えながら完成した一例が
本記事でのヘッダー部分です。

要するにこんなレイアウトを目指したのです。

この結果どのブラウザで見ても、ぴったりすき間なく
レイアウトされているはずですが、ここまでに
CSS修正を繰り返し、私としては結構な出費となりました。

WINGの設定情報およびCSSを特典でプレゼント

それなりに投資してやっと編み出すことのできた
WINGヘッダーの完全LP化に必要なWING設定情報とCSSコードを
私からWINGをご購入した方へ追加特典としてプレゼントします。

この説明をPDF(下図は表紙）にして、特典請求されたメールアドレスへお送りします。
また過去にWINGをご購入された方も当然含まれますのでご安心ください。

また、WINGとはなにか？
WINGについてのレビューと特典付き紹介ページがこちらです。