Webdesign

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

Image is not available
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available

一瞬でプロ品質に

任意のページヘッダー変身術
WING(AFFINGER5/5EX)専用
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available
任意ページを完全LP化する
WINGご購入者向け特典
WING設定と追加用CSSでOK
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available
画像・動画・アニメで魅せる
WING x Smart Slider 3
PRODUCED by KENBO
previous arrow
previous arrow
next arrow
next arrow
Slider

 

 

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

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

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

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

 

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

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

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

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

WING 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 テンプレート
あなたのWordPressサイトが劇的に生まれ変わる(その2)│Smart Slider 3 PROプラグインのテンプレート一気公開!

  この記事は、NEXTEND社の有料ワードプレスプラグインである Smart Slider 3 PROで提供されているテンプレート紹介と KENBOの特典について解説しています。 Smar ...

続きを見る

 

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

Smart Slider 3 PRO版のメリット

  • 素人臭いLPヘッダーデザインから脱皮し、一気に高品質、あか抜けたプロ級デザインに変身できる。
  • サイズや配置、各種イフェクトなど自在に設定できる。(レスポンシブ対応は当たり前で、PC・タブレット・スマホでの見え方も確認しながら設定できる)
  • 画像だけではなく動画(YouTube・VIMEO・ローカルなファイル)、音声などをアニメーションと組み合わせて演出できる。1枚画像のみでも全く問題ありません。
  • テンプレートが100個以上提供されており(しかも逐次追加されている)、多様なニーズに対応でき、しかもカスタマイズが超簡単!
  • 記事内はショートコード1行挿入で済み、入れ替えも一瞬で終了、動作も非常に軽快。

 

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

 

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

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

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

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

WING SmartSlider3適用

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

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

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

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

 

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

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

 

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

WIING LPフルスクリーン

 

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

 

 

 

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

 

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

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

WING CSS追加

 

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

下矢印

「稼ぐ」に特化し「最適化」を革新したWING(AFFINGER5/5EX)とWING専用KENBO特典のご紹介 2020年9月 - インフォレビュー(INFOREVIEW)
「稼ぐ」に特化し「最適化」を革新したWING(AFFINGER5/5EX)とWING専用KENBO特典のご紹介 2020年9月 - インフォレビュー(INFOREVIEW)

WING(AFFINGER5/AFFINGER5EX)レビューと超強力に支援するKENBOオリジナル専用特典を紹介しています。

続きを見る

 

 

 

 

 

© 2020 インフォレビュー(INFOREVIEW)