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

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

この記事の投稿時点（２０１８年８月）での最新バージョンは賢威７（７．１）です。

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

アフィリ王子

素晴らしいテンプレート・賢威７なのですが・・・そして
ヘッダー画像がフルスクリーンになるＬＰ（ランディングページ）をつくる機能がありますが・・・

ワードプレス（ＷＰ）で作成したブログのトップページにはもってこれないのです。

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

ネット王女

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

⇒　賢威７で固定ページをランディングページにする方法

ぜひ、思い出しておいてください。

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

【ｈｔｍｌ】のランディングページ	【ＷＰ】のランディングページ
今回はここの話です。	次回

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

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

【最近では、メルマガ（またはメルマガより開封率のいい＠ＬＩＮＥ）や、ローンチという仕組みも登場してきています】

メルマガやローンチは、（イメージとして）縦長のセールスセターを細かく分割して、
その分割した少しずつのセールスレターを使って、読者（お客さま）を『教育』というか、
お客さまと信頼関係を築いて、そして商品内容を理解してもらって、それから購入につなげる、
という時間をかけてセールスする仕組みのことです。

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

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

秋田秀一

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

※ 実際のサンプルはこちらから
⇒　賢威７ｈｔｍｌセールスレターページのサンプル

何となくイメージできましたか？

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

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

秋田秀一

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

というのは・・・

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

私は、賢威を作成した側の人間ではありませんから、ｈｔｍｌ版のｂａｓｅ.ｃｓｓをＷＰ版に流用する、
という荒業でワードプレス版のカスタマイズをやりました。
（次回参照ください）

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

サンプルのページはこちらです。（再掲）
⇒　賢威７【ｈｔｍｌ】版ランディングページ（セールスレターページ風にカスタマイズ）のサンプルページ

大きなポイントとしては

サイトの横幅を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