賢威のＬＰ（ランディングページ）を、縦長のセールスレターページ風にカスタマイズする方法です。
賢威自体は素晴らしいテンプレートです。
ＳＥＯやバージョンアップにおいて非常にメリットのあるテンプレートです。
この記事の投稿時点（２０１８年８月）での最新バージョンは賢威７（７．１）です。
前段階として次の話を頭の中に入れておいてください。
実は・・・
アフィリ王子素晴らしいテンプレート・賢威７なのですが・・・そして
ヘッダー画像がフルスクリーンになるＬＰ（ランディングページ）をつくる機能がありますが・・・
ワードプレス（ＷＰ）で作成したブログのトップページにはもってこれないのです。
ただ、固定ページ（普通の記事投稿ページと同じスタイル）は、ＷＰの設定からトップページに
設定することができます。
ネット王女つまり、ランディングページはつくれるけど、それをトップページには設定できない。
そこで・・・以前、ランディングページをトップページに設定するカスタマイズの方法を
記事として取り上げました。
ぜひ、思い出しておいてください。
よく情報商材の販売ページやネット通販などのセールスレターページで縦長のページがありますが・・・
今回は、その縦長のセールスレターページを賢威７のＬＰ（ランディングページ）で作成しよう、
という試みです。
| 【ｈｔｍｌ】のランディングページ | 【ＷＰ】のランディングページ |
|---|---|
| 今回はここの話です。 | 次回 |
※ＷＰ版でのランディングページをセールスレターページ風にカスタマイズする方法は、次回の記事でチャレンジしたいと思います。
【目次】
セールスレターページ風とは？ 縦長のセールスセター。縦にずっとスクロールしながら見ていく、お客さまを説得するメインのセールスページです。
メルマガやローンチは、（イメージとして）縦長のセールスセターを細かく分割して、
その分割した少しずつのセールスレターを使って、読者（お客さま）を『教育』というか、
お客さまと信頼関係を築いて、そして商品内容を理解してもらって、それから購入につなげる、
という時間をかけてセールスする仕組みのことです。
もちろん、セールスレターは今でもその重要な役割は変わっていません。
セールスレターは、その場で判断・購入してもらう、というイメージになります。
（セールスにおいて重要な役割を果たすものです。
ですから、セールスレターが書ける人はひっぱりだこになっているようですね）
秋田秀一具体的には下図のようなイメージです。
※ 実際のサンプルはこちらから
⇒ 賢威７ｈｔｍｌセールスレターページのサンプル
何となくイメージできましたか？
それでは具体的にカスタマイズしていきたいと思います。
賢威７のランディングページを情報商材の販売ページ風にカスタマイズする方法【ｈｔｍｌ】
秋田秀一実際には、ワードプレスを使って賢威を利用している人も、
ｈｔｍｌバージョンをのやり方を頭に入れておくといいかと思います。
というのは・・・
ＷＰ版でのカスタマイズでは、素人の私では（コードを理解してカスタマイズするのに）限界が
あったからです。
私は、賢威を作成した側の人間ではありませんから、ｈｔｍｌ版のｂａｓｅ.ｃｓｓをＷＰ版に流用する、
という荒業でワードプレス版のカスタマイズをやりました。
（次回参照ください）
【ｈｔｍｌ】版ランディングページカスタマイズのポイント
サンプルのページはこちらです。（再掲）
⇒ 賢威７【ｈｔｍｌ】版ランディングページ（セールスレターページ風にカスタマイズ）のサンプルページ
大きなポイントとしては
- サイトの横幅を925pxに
- 見出しｈ２、/ｈ２とｈ３、/ｈ３をサイト幅いっぱいにしてアピールできるように
- そのため（結果として）文章（コンテンツ）も左端ギリギリからスタートなってしまう
- それを補正するために、テキストボックスを作成して
- 文章は、テキストボックスの中に書き込む形
にしてあります。
また、赤色は自分の好みで朱色にしてあります。
（※元銀行員で印鑑を押すことになじみがあったため、赤＝朱色という感覚です）
カスタマイズした主なところ（ｂａｓｅ.ｃｓｓの変更点）
【主要なカスタマイズ・１】
私が個人的にセールスレターページのいちばん上に、１行か２行の文章を入れたかったために
ヘッダー部分に赤い帯を入れました。
ｂａｓｅ.ｃｓｓの下記の部分を削除したり、追加したりしました。
これに関連して、あと数か所カスタマイズしています。
詳しくは（あとからご案内いたしますが）、テキストファイルをダウンロードして参照してみてください。
【主要なカスタマイズ・２】
ｂａｓｅ.ｃｓｓで、ヘッダーの背景画像を指定して、
ヘッダー部分の画像（ここではファイル名：top-image.png）、横９２５ｐｘ高さ７００ｐｘは
ｉｎｄｅｘ.ｈｔｍｌで指定するようにしてあります。
画像をｈ１に設定して、alt＝？でｈ１のタイトル・キーワード等を入れ込んであります。
もちろん不都合な点等ありましたら、どうぞ自由に加筆・修正しながら
カスタマイズされてください。
【主要なカスタマイズ・３】
ｈ２の背景画像、ｈ３の背景画像をダウンロードできるようにしました。
また、ヘッダー部分の背景画像とヘッダー画像もサンプルとしてダウンロードできるようにしてあります。
 |
見出しｈ２ /images/common/midashi-h2.png |
 |
見出しｈ３ /images/common/midashi-h3.png |
 |
ヘッダー部分背景画像 base.cssで指定。1800px*1198px /images/lp-image.png |
 |
ヘッダー部分画像 index.htmlで指定。925px*700px /images/top-image.png |
もちろん、画像を差し替えてカスタマイズできます。
特に、ヘッダー画像は重要です。
チラッとみて興味を引く・引かない
（つまり、続けて下を読むか・読まずに他のサイト・ブログにいくか）
という勝負の世界です。
ヘッダー画像の作成には注力されることをお薦めします。
（外注化することも可能です）
カスタマイズしたｃｓｓのテキストファイルダウンロード
秋田秀一他にも細かい点のカスタマイズもありますが・・・
いちいちチェックするのは大変だと思いますので、ｂａｓｅ.ｃｓｓの内容をテキストファイルにしました。
ダウンロードまたは、テキストエディタで開いて
ご自分のｃｓｓにコピペしてください。
ｃｓｓをカスタマイズしたものを私が、直接頒布することはできませんので
テキストファイルで保存したものを用意しました。
コピペしてチェック・活用してください。
※万が一のために
もともとのｂａｓｅ.ｃｓｓはコピーしてバックアップされておくことをお薦めします。
セールスレターページ作成の注意点
あくまでも私個人の好みでのカスタマイズです。
自分なりの好みに合わせてさらに改良してみてください。
サンプルページのｉｎｄｅｘ.ｈｔｍｌを、ブラウザで画面に表示している段階で
右クリックをすれば、ソースの表示が可能です。
どうぞコピペしてください。
もちろん賢威７のテンプレートは、【ｈｔｍｌ】用をお使いください。
繰り返しになりますが再度、注意点（自己流のカスタマイズした点）を記載しておきます。
横幅いっぱいに見出し（ｈ２/ｈ２・ｈ３/ｈ３）をもってきている点
見出しのｈ２とｈ３を、インパクトのある形にしたくて、大きくカスタマイズしました。
（逆に、ｈ４、ｈ５、ｈ６はそのままにしてあります）
もともとは賢威６でセールスレターページを作成していたのを、賢威７でも同じようなスタイルに
したかったことからの流れです。
※ただ、まだまだ発展途上なので見出しｈ２もｈ３も簡単に変更できるようにしてあります。
文章の内容や見出しなどが完全に『固まった』時点で、見出し部分を画像に変えてもいいかも知れません。
文章を記載する時は、テキストボックス内に記載（入力）する点
ｈ２、ｈ３を９２５ｐｘの横幅いっぱいにしたことから、そのまま文章を作成すると
同じように左端から文字が始まってしまいます。
非常に読みにくいです。
そのため、枠線が白色の（背景色と同一の）テキストボックスを用意して、その中に
文章を入力していく、という形にしてあります。
それでも「よし」という方は参考にしてお使いいただけましたらうれしい限りです。
まとめ・賢威７でＬＰをセールスレターページ風にカスタマイズ【ｈｔｍｌ】
今回は賢威７のテンプレートでも、ｈｔｍｌ版でのカスタマイズでした。
一般的にはＷＰのブログでサイト運営している方が大半だと思います。
ワードプレスを設置しているドメイン内に、別にファイルをアップロードする必要がありますので、
そこの手間ひまだけは必要です。
ですので、次回はＷＰ版でのＬＰをセールスレターページ風にカスタマイズする方法について
自己流ですが、ご案内したいと思います。
ただ、今回のｈｔｍｌ編は次のＷＰ編のカスタマイズにおいても参考になるものだと思っています。
秋田秀一参考までに、私が当ブログ内にてＷＰでセールスレターページ風にカスタマイズしたＬＰは、
次のようなものです。
⇒ パソコンできない・文字入力できない中高年でもできる『ほったらかし』の副業プログラム講座
※【 html 】ではありません。
次回はＷＰ版のカスタマイズです。
