賢威７のランディングページをセールスレターページ風にカスタマイズする方法【ｈｔｍｌ】編

秋田です。

今回は、賢威のLP（ランディングページ）を、縦長のセールスレターページ風にカスタマイズする方法です。
賢威自体は素晴らしいテンプレートです。
SEO やバージョンアップにおいて非常にメリットのあるテンプレートです。

この記事の投稿時点（2018年8月）での最新バージョンは賢威7（7.1）です。
※その後2019年に賢威8の正式バージョンが公開されました。（記事内容は賢威7のカスタマイズ方法です）

前段階として次の話を頭の中に入れておいてください。
実は・・・

アフィリ王子

素晴らしいテンプレート・賢威7なのですが・・・そして
ヘッダー画像がフルスクリーンになるLP（ランディングページ）をつくる機能がありますが・・・
ワードプレス（WP）で作成したブログのトップページにはもってこれないのです。

ただ、固定ページ（普通の記事投稿ページと同じスタイル）は、WPの設定からトップページに設定することができます。

ネット王女

つまり、ランディングページはつくれるけど、それをトップページには設定できない。
そこで・・・以前、ランディングページをトップページに設定するカスタマイズの方法を記事として取り上げました。
⇒ 賢威7で固定ページをランディングページにする方法
ぜひ、思い出しておいてください。

よく情報商材の販売ページやネット通販などのセールスレターページで縦長のページがありますが・・・
今回は、その縦長のセールスレターページを賢威7のLP（ランディングページ）で作成しよう、という試みです。

※WP版でのランディングページをセールスレターページ風にカスタマイズする方法は、次回の記事でチャレンジしたいと思います。

今回の記事は

について説明します。
（次回のWP版でのカスタマイズの基礎編的な話でもありますのでWPで賢威7を使ってブログ運営している方もお目通しいただけるとありがたいです）

セールスレターページ風とは？ 縦長のセールスセター。縦にずっとスクロールしながら見ていく、お客さまを説得するメインのセールスページです。

もちろん、セールスレターは今でもその重要な役割は変わっていません。

セールスレターは、その場で判断・購入してもらう、というイメージになります。
（セールスにおいて重要な役割を果たすものです。ですから、セールスレターが書ける人はひっぱりだこになっているようですね）

具体的には下図のようなイメージです。

下の方へスクロールしていくとずっと続いていくパターンです。
何となくイメージできましたか？

それでは具体的にカスタマイズしていきたいと思います。

賢威7のランディングページを情報商材の販売ページ風にカスタマイズする方法【html編】

実際には、ワードプレスを使って賢威を利用している人も、htmlバージョンをのやり方を頭に入れておくといいかと思います。
というのは・・・

WP版でのカスタマイズでは、素人の私では（コードを理解してカスタマイズするのに）限界があったからです。

私は、賢威を作成した側の人間ではありませんから、html版のbase.cssをWP版に流用する、という荒業でワードプレス版のカスタマイズをやりました。（次回参照ください）

【html】版ランディングページカスタマイズのポイント

大きなポイントとしては

• サイトの横幅を925pxに
• 見出しh2、/h2とh3、/h3をサイト幅いっぱいにしてアピールできるように
• そのため（結果として）文章（コンテンツ）も左端ギリギリからスタートなってしまう
• それを補正するために、テキストボックスを作成して
• 文章は、テキストボックスの中に書き込む形

にしてあります。

また、赤色は自分の好みで朱色にしてあります。
（※元銀行員で印鑑を押すことになじみがあったため、赤＝朱色という感覚です）

カスタマイズした主なところ（base.cssの変更点）

【主要なカスタマイズ・1】
私が個人的にセールスレターページのいちばん上に、1行か2行の文章を入れたかったためにヘッダー部分に赤い帯を入れました。

base.css の下記の部分を削除したり、追加したりしました。

これに関連して、あと数か所カスタマイズしています。
詳しくは（あとからご案内いたしますが）、テキストファイルをダウンロードして参照してみてください。


【主要なカスタマイズ・2】
base.css で、ヘッダーの背景画像を指定して、
ヘッダー部分の画像（ここではファイル名：top-image.png）、横925px高さ700pxは index.html で指定するようにしてあります。

画像を h1 に設定して、alt＝？でh1のタイトル・キーワード等を入れ込んであります。

もちろん不都合な点等ありましたら、どうぞ自由に加筆・修正しながらカスタマイズされてください。


【主要なカスタマイズ・3】
h2 の背景画像、h3 の背景画像をダウンロードできるようにしました。
また、ヘッダー部分の背景画像とヘッダー画像もサンプルとしてダウンロードできるようにしてあります。

	見出し h2 /images/common/midashi-h2.png
	見出し h3 /images/common/midashi-h3.png
	ヘッダー部分背景画像 base.cssで指定。1800px*1198px /images/lp-image.png
	ヘッダー部分画像 index.htmlで指定。925px*700px /images/top-image.png

もちろん、画像を差し替えてカスタマイズできます。
特に、ヘッダー画像は重要です。

チラッとみて興味を引く・引かない（つまり、続けて下を読むか・読まずに他のサイト・ブログにいくか）という勝負の世界です。

ヘッダー画像の作成には注力されることをお薦めします。
（外注化することも可能です）

カスタマイズした css のテキストファイルダウンロード

他にも細かい点のカスタマイズもありますが・・・
いちいちチェックするのは大変だと思いますので、base.css の内容をテキストファイルにしました。
ダウンロードまたは、テキストエディタで開いてご自分の css にコピペしてください。

css をカスタマイズしたものを私が、直接頒布することはできませんのでテキストファイルで保存したものを用意しました。
コピペしてチェック・活用してください。

※万が一のために、もともとの base.css はコピーしてバックアップされておくことをお薦めします。
⇒ 賢威7【html】base.css のテキストファイル

セールスレターページ作成の注意点

あくまでも私個人の好みでのカスタマイズです。
自分なりの好みに合わせてさらに改良してみてください。

もちろん賢威7のテンプレートは【 html 】用をお使いください。

繰り返しになりますが再度、注意点（自己流のカスタマイズした点）を記載しておきます。

横幅いっぱいに見出し（h2/h2・h3/h3）をもってきている点

見出しの h2 と h3 を、インパクトのある形にしたくて、大きくカスタマイズしました。
（逆に、h4、h5、h6 はそのままにしてあります）

もともとは賢威6でセールスレターページを作成していたのを、賢威7でも同じようなスタイルにしたかったことからの流れです。

※ただ、まだまだ発展途上なので見出し h2 も h3 も簡単に変更できるようにしてあります。
文章の内容や見出しなどが完全に『固まった』時点で、見出し部分を画像に変えてもいいかも知れません。

文章を記載する時は、テキストボックス内に記載（入力）する点

h2、h3 を 925px の横幅いっぱいにしたことから、そのまま文章を作成すると同じように左端から文字が始まってしまいます。

非常に読みにくいです。

そのため、枠線が白色の（背景色と同一の）テキストボックスを用意して、その中に文章を入力していく、という形にしてあります。

それでも「よし」という方は参考にしてお使いいただけましたらうれしい限りです。

まとめ・賢威7でLPをセールスレターページ風にカスタマイズ【 html 】

今回は賢威7のテンプレートでも、html版でのカスタマイズでした。

一般的には WP のブログでサイト運営している方が大半だと思います。
ワードプレスを設置しているドメイン内に、別にファイルをアップロードする必要がありますので、そこの手間ひまだけは必要です。

ですので、次回は WP 版での LP をセールスレターページ風にカスタマイズする方法について自己流ですが、ご案内したいと思います。

ただ、今回の html 編は次の WP 編のカスタマイズにおいても参考になるものだと思っています。

秋田秀一

参考までに、私が当ブログ内にてＷＰでセールスレターページ風にカスタマイズしたLPは、次のようなものです。
⇒　副業プログラム講座
※【 html 】ではありません。
※ 副業プログラム講座は「オリジナル副業プログラム」に移行しましたので現在は講座開講しておりません。ご注意ください。

秋田秀一

ただし・・・
当ブログを賢威7で運営していた時のページです。
今は賢威8にバージョンアップしましたので当初のイメージとは違ってきています。どうぞご了承ください。

⇒　賢威７のランディングページをセールスレターページ風にカスタマイズ【 WP 】編