賢威7の固定ページをランディングページにして、セールスレター風にカスタマイズする方法イメージ画像

ガイド案内アフィリ王子

以前、賢威7のランディングページ(フォルダ『 lp 』の中にある index.html ファイル)を
縦長のセールスレターページ風にカスタマイズする方法をご案内させていただきました。

⇒ 賢威7【html版】のlpを縦長セールスレターページ風にカスタマイズする方法

今回はそれの【WP】版です。
賢威7とワードプレスでのカスタマイズの話です。

【html】のランディングページ 【WP】のランディングページ
前回はここの話。
html ファイルをカスタマイズして
セールスレターページ風にするもの
でした。
今回は『ここ』の話です

ガイド案内ネット王女

ただしワードプレスでは、賢威7で用意されている『ランディングページ』を
トップページにもってくることはできませんでした。

WPでトップページをセールスレターページ風にして商品・商材アフィリエイトをしたり、
ランディングページにしてメールアドレスを取得(メルマガ登録してもらってのリスト取り)
するためには、固定ページをカスタマイズするしかなかったのです。

※賢威7で作成できるLP(ランディングページ)⇒ フルスクリーン表示ができるが・・・⇒ トップページにもってこれない
賢威7の固定ページ ⇒ 改造することで・・・⇒
(ランディングページ風にして)

以前の記事 ⇒ LP風へのカスタマイズ
(5分でできる)
トップページにもってこれる

矢印イメージ画像

秋田秀一秋田秀一

今回は、さらに縦長のセールスレターページ風にカスタマイズします。

そのカスタマイズで、今回、私が作成したセールスレターページがこちらです。
⇒ 副業プログラムマスターコース

もちろん、当ブログのトップページにもってくることが可能です。
(固定ページで作成しましたから)

【※重要・注意点】
※WP+賢威で用意されているランディングページは、別にテンプレートが用意されているので
そのテンプレートは『触らない』ということ。

※WPのcssファイルをカスタマイズするとブログ全体が変わってくるので
別にcssファイルを用意して、それを【html版】のようにサーバーの別フォルダに入れて
それを読み込んでくる形にしました。



まずはやってみた方がはやいかも知れませんね。
その前に・・・

秋田秀一秋田秀一

【復習というわけではありませんが】
⇒ 固定ページをランディングページにする方法 をやり方・流れを頭にもう一度入れておいてください。

これの応用になります。


WPの管理画面から『 page.php 』をダウンロードして、リネームして再度アップロード!

【1】番目です。

固定ページのテンプレートである『 page.php 』をダウンロードします。

それを(デスクトップ上でも、どこでも)コピーして、そのファイルを自分のお気に入りの名前に変えて
(たとえば lp-page.php という感じで)
再度、アップロードします。

すると・・・WPの管理画面『外観』『テーマの編集』からそのファイルをカスタマイズできるようになります。

※ここまでのやり方でわからない時は、⇒ 固定ページをランディングページにする方法 をもう一度チェックしておいてください。

そのカスタマイズ方法の段階において少し工夫します。【 hmtl 】版のソースを参考に(コピペ)してWPとは別のCSSファイルを読み込むようにカスタマイズする

【2】番目です。

ガイド案内アフィリ王子

【ポイント】
ここで、(次にリンクしてあるページの)html版のヘッダー部分をチェックしてみてください。

ちなみに、できあがりのイメージとしてのソースは・・・このページです。

⇒ html版をセールスレター風にカスタマイズ

矢印イメージ画像

html版のソースコードをコピペして、WPの『テーマの編集』からテンプレートにコピーしてやる!

実際にhtml版を右クリックで『ページのソースを表示』すると下図のようになります。


固定ページをランディングページにしてセールスレター風にカスタマイズする方法のイメージ画像

作成するページや画像ファイルなどのフォルダによっては、(相対)パスが上手くいかない場合もあります。その時は、絶対パスで指示してください!

秋田秀一秋田秀一

画像ファイルのサーバー内での位置というか、パスの指定はFTPソフトがアップロードした場所を
きっちりと指示してください。

アップロードする前に、タイトル・キーワード、あるいは『ここに文章を入れることができます』などは
適宜、加筆・修正・補正してください。

実際に上書きするコード(ファイル)は本記事の末尾にご用意しました。
ご安心ください。

矢印イメージ画像

『外観』⇒『テーマの編集』から先ほど好きな名前で作成したテンプレートファイルを開きます。
そして、左側のソース部分に上で用意したソースを上書きコピーします。


賢威7の固定ページをセールスレターページにカスタマイズするイメージ画像

【注意点】
ガイド案内ネット王女

上の画像上は・・・

賢威カスタマイズイメージ画像

までを上書きで貼り付けるという形で説明いたしておりますが・・・
本記事末尾にダウンロードできるようにしたファイルはテンプレート全体(1行目から最終行まで)
のコードを、そのまま上書きできるようになっています。

どうぞご注意ください。

ヘッダー画像を用意して、cssファイルをカスタマイズして、セールスレター風ページが完成!

【3】番目のステップです。(これで終わりになります。簡単3ステップ)

ヘッダー画像は、⇒ htmlサンプルページ にもご案内していますが・・・

横925×高さ700ピクセルで作成されることをお薦めいたします。
もちろん、それ以外の大きさでも構いませんが・・・

末尾にてダウンロードしていただくコピペ用のファイルはセールスレターページの横幅を
925pxで設定しているためからのご提案でした。

コピペ用のcssファイルで上書きされたあと、デザインの設定でお好きなページ幅に変更して、同時に
画像サイズもいっしょに変更されることでも構わないかと思います。

秋田秀一秋田秀一

私が作成したセールスレターページは、背景画像+トップイメージ画像の組み合わせになっています。

情報商材を販売する側でもある私の作成するヘッダー画像は、結構
『煽り(あおり)』というか『導火線に火をつけるような』キャッチコピーになっているかと思います。

日々、進化できたらと思っております。⇒ 作成したセールスレターページ

cssファイルは、私のカスタマイズをそのままテキストファイルにしてご用意しました

単純にコピペして、実際にどんなイメージにサイト・ブログが変化するのか、みていただいた方がいいかと思います。

もちろん私のカスタマイズのやり方には、デザイン的なものを含めて好き・嫌いがあるはずです。
どうぞ、自分流でさらにカスタマイズしていただけましたらありがたいです。

賢威7の固定ページを、ランディングページにして、セールスレター風にカスタマイズする方法のまとめ

今回のご案内は、説明不足で少し複雑だったかも知れません。
ポイントとしては・・・

  • ランディングページ(セールスレター風)のテンプレートを一つ用意する
  • そのテンプレートにhtmlのヘッダー部分を上書きコピペする
  • ヘッダ部分で指定する画像を用意、cssをカスタマイズする

の3ステップでできる、ということです。

ごちゃごちゃ説明させていただくよりも、コピペしてアップロードして試してみていただいた方が
ずっとはやい話かも知れませんね。

コピペ用ファイルのダウンロード

すべてテキストファイルです。

秋田秀一秋田秀一

Ctrl+Aで、全範囲指定して
Ctrl+Cで、コピーして
Ctrl+Vで、そのままペーストするだけです。

念のために、元々のファイルはバックアップ(コピー)されておくことを強くお薦めいたします。

矢印イメージ画像



最終的にカスタマイズして作成したセールスレターページ ⇒ 副業プログラムマスターコース

矢印イメージ画像


2つのファイルをコピペ(上書き)するだけで簡単に同じようなセールスレターが作成できます。


秋田秀一秋田秀一

固定ページのphp をコピーしてリネームしたテンプレート用のファイル
⇒ セールスレターページ用(そのまま上書きコピペします)

※WPの管理画面から『外観』『テーマの編集』からカスタマイズしてください。


秋田秀一秋田秀一

固定ページをセールスレターページ風にカスタマイズするbase.css用ファイル
⇒ base.css用(そのまま上書きコピペします)

※【1】html用のテンプレートをサーバーにアップする要領でルートディレクトリに
cssフォルダをアップロードします。
※その際に、base.cssファイルを、上のリンクからコピペして上書きしたものを
アップロードしてください。

または・・・
【2】サーバーのルートディレクトリに『css』フォルダを作成して
その中に上記ファイルを『 base.css 』にリネームしたものをアップロードしてください。