[br num="1"]
アフィリ王子以前、賢威７のランディングページ（フォルダ『 lp 』の中にある index.html ファイル）を
縦長のセールスレターページ風にカスタマイズする方法をご案内させていただきました。
今回はそれの【ＷＰ】版です。
賢威７とワードプレスでのカスタマイズの話です。
[br num="1"]
| 【ｈｔｍｌ】のランディングページ | 【ＷＰ】のランディングページ |
|---|---|
| 前回はここの話。 html ファイルをカスタマイズして セールスレターページ風にするものでした。 |
今回は『ここ』の話です |
[br num="1"]
ネット王女ただしワードプレスでは、賢威７で用意されている『ランディングページ』を
トップページにもってくることはできませんでした。
ＷＰでトップページをセールスレターページ風にして商品・商材アフィリエイトをしたり、
ランディングページにしてメールアドレスを取得（メルマガ登録してもらってのリスト取り）
するためには、固定ページをカスタマイズするしかなかったのです。
| ※賢威７で作成できるＬＰ（ランディングページ）⇒ | フルスクリーン表示ができるが・・・⇒ | トップページにもってこれない |
| 賢威７の固定ページ ⇒ | 改造することで・・・⇒ （ランディングページ風にして） 以前の記事 ⇒ ＬＰ風へのカスタマイズ （５分でできる） |
トップページにもってこれる |
|---|
秋田秀一今回は、さらに縦長のセールスレターページ風にカスタマイズします。
そのカスタマイズで、今回、私が作成したセールスレターページがこちらです。
⇒ 副業プログラムマスターコース
もちろん、当ブログのトップページにもってくることが可能です。
（固定ページで作成しましたから）
【※重要・注意点】
※ＷＰ＋賢威で用意されているランディングページは、別にテンプレートが用意されているので
そのテンプレートは『触らない』ということ。
※ＷＰのｃｓｓファイルをカスタマイズするとブログ全体が変わってくるので
別にｃｓｓファイルを用意して、それを【ｈｔｍｌ版】のようにサーバーの別フォルダに入れて
それを読み込んでくる形にしました。
[br num="1"]
まずはやってみた方がはやいかも知れませんね。
その前に・・・
[br num="1"]
秋田秀一【復習というわけではありませんが】
⇒ 固定ページをランディングページにする方法 をやり方・流れを頭にもう一度入れておいてください。
これの応用になります。
[br num="1"]
ＷＰの管理画面から『 page.php 』をダウンロードして、リネームして再度アップロード！
【１】番目です。
固定ページのテンプレートである『 page.php 』をダウンロードします。
それを（デスクトップ上でも、どこでも）コピーして、そのファイルを自分のお気に入りの名前に変えて
（たとえば lp-page.php という感じで）
再度、アップロードします。
すると・・・ＷＰの管理画面『外観』『テーマの編集』からそのファイルをカスタマイズできるようになります。
※ここまでのやり方でわからない時は、⇒ 固定ページをランディングページにする方法 をもう一度チェックしておいてください。
そのカスタマイズ方法の段階において少し工夫します。【 hmtl 】版のソースを参考に（コピペ）してＷＰとは別のＣＳＳファイルを読み込むようにカスタマイズする
【２】番目です。
[br num="1"]
アフィリ王子【ポイント】
ここで、（次にリンクしてあるページの）ｈｔｍｌ版のヘッダー部分をチェックしてみてください。
ちなみに、できあがりのイメージとしてのソースは・・・このページです。
ｈｔｍｌ版のソースコードをコピペして、ＷＰの『テーマの編集』からテンプレートにコピーしてやる！
実際にｈｔｍｌ版を右クリックで『ページのソースを表示』すると下図のようになります。
[br num="1"]
作成するページや画像ファイルなどのフォルダによっては、（相対）パスが上手くいかない場合もあります。その時は、絶対パスで指示してください！
秋田秀一画像ファイルのサーバー内での位置というか、パスの指定はＦＴＰソフトがアップロードした場所を
きっちりと指示してください。
アップロードする前に、タイトル・キーワード、あるいは『ここに文章を入れることができます』などは
適宜、加筆・修正・補正してください。
実際に上書きするコード（ファイル）は本記事の末尾にご用意しました。
ご安心ください。
『外観』⇒『テーマの編集』から先ほど好きな名前で作成したテンプレートファイルを開きます。
そして、左側のソース部分に上で用意したソースを上書きコピーします。
[br num="1"]
[br num="1"]
ネット王女上の画像上は・・・
までを上書きで貼り付けるという形で説明いたしておりますが・・・
本記事末尾にダウンロードできるようにしたファイルはテンプレート全体（１行目から最終行まで）
のコードを、そのまま上書きできるようになっています。
どうぞご注意ください。
ヘッダー画像を用意して、ｃｓｓファイルをカスタマイズして、セールスレター風ページが完成！
【３】番目のステップです。（これで終わりになります。簡単３ステップ）
ヘッダー画像は、⇒ ｈｔｍｌサンプルページ にもご案内していますが・・・
横９２５×高さ７００ピクセルで作成されることをお薦めいたします。
もちろん、それ以外の大きさでも構いませんが・・・
末尾にてダウンロードしていただくコピペ用のファイルはセールスレターページの横幅を
９２５ｐｘで設定しているためからのご提案でした。
コピペ用のｃｓｓファイルで上書きされたあと、デザインの設定でお好きなページ幅に変更して、同時に
画像サイズもいっしょに変更されることでも構わないかと思います。
[br num="1"]
秋田秀一私が作成したセールスレターページは、背景画像＋トップイメージ画像の組み合わせになっています。
情報商材を販売する側でもある私の作成するヘッダー画像は、結構
『煽り（あおり）』というか『導火線に火をつけるような』キャッチコピーになっているかと思います。
日々、進化できたらと思っております。⇒ 作成したセールスレターページ
ｃｓｓファイルは、私のカスタマイズをそのままテキストファイルにしてご用意しました
単純にコピペして、実際にどんなイメージにサイト・ブログが変化するのか、みていただいた方がいいかと思います。
もちろん私のカスタマイズのやり方には、デザイン的なものを含めて好き・嫌いがあるはずです。
どうぞ、自分流でさらにカスタマイズしていただけましたらありがたいです。
賢威７の固定ページを、ランディングページにして、セールスレター風にカスタマイズする方法のまとめ
今回のご案内は、説明不足で少し複雑だったかも知れません。
ポイントとしては・・・
- ランディングページ（セールスレター風）のテンプレートを一つ用意する
- そのテンプレートにｈｔｍｌのヘッダー部分を上書きコピペする
- ヘッダ部分で指定する画像を用意、ｃｓｓをカスタマイズする
の３ステップでできる、ということです。
ごちゃごちゃ説明させていただくよりも、コピペしてアップロードして試してみていただいた方が
ずっとはやい話かも知れませんね。
コピペ用ファイルのダウンロード
すべてテキストファイルです。
[br num="1"]
秋田秀一Ｃｔｒｌ＋Ａで、全範囲指定して
Ｃｔｒｌ＋Ｃで、コピーして
Ｃｔｒｌ＋Ｖで、そのままペーストするだけです。
念のために、元々のファイルはバックアップ（コピー）されておくことを強くお薦めいたします。
[br num="1"]
最終的にカスタマイズして作成したセールスレターページ ⇒ 副業プログラムマスターコース
[br num="1"]
[br num="1"]
２つのファイルをコピペ（上書き）するだけで簡単に同じようなセールスレターが作成できます。
[br num="1"]
秋田秀一固定ページのphp をコピーしてリネームしたテンプレート用のファイル
⇒ セールスレターページ用（そのまま上書きコピペします）
※ＷＰの管理画面から『外観』『テーマの編集』からカスタマイズしてください。
[br num="1"]
秋田秀一固定ページをセールスレターページ風にカスタマイズするｂａｓｅ.ｃｓｓ用ファイル
⇒ ｂａｓｅ.ｃｓｓ用（そのまま上書きコピペします）
※【１】ｈｔｍｌ用のテンプレートをサーバーにアップする要領でルートディレクトリに
ｃｓｓフォルダをアップロードします。
※その際に、ｂａｓｅ.ｃｓｓファイルを、上のリンクからコピペして上書きしたものを
アップロードしてください。
または・・・
【２】サーバーのルートディレクトリに『css』フォルダを作成して
その中に上記ファイルを『 base.css 』にリネームしたものをアップロードしてください。