賢威6を縦長のセールスレターページ・LP風にカスタマイズしてみた!

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


今回ご案内するハウツーは賢威6のカスタマイズ、しかも、htmlです。
(WPでのカスタマイズはまた別の機会にご案内予定)

あなたが情報商材の発行者であったり、プロモーターとして販売しているなら
意識して縦長のページをながめたことがあるかと思います。

縦にずっとスクロールしていく形のサイトです。
たぶん普通の人だと、スクロールバー等を操作して飛ばし読みしながら一気に
最下部まで流し読みして、気になったところだけをピックアップする、
というやり方が圧倒的に多いはずですね。

ほんと自分のフックに引っかかった任意のところだけを注視するという読み方です。
具体的な縦長のセールスレターページ・ランディングページのイメージ画像は下記のような感じです。

下記サイトは横幅を925pxにして作成したものです。


賢威カスタマイズ・セールスレターページ・ランディングページイメージ画像

※ちなみにサイトアドレスは ⇒ https://www.eym7.com/



セールレターページ(ランディングページ)は、一般的には・・・
長ければ長いほど「良い」と言われています。
文字数にして約3万~5万文字くらいが標準形として求められたりもします。

この文字数の中に、
体験者(実践者)の喜びの声、手に入れることのできる未来の姿、チャレンジすることのメリット、
今ここで選択しなかった場合の苦痛・苦悩、などなどを書いて感情に訴えることになります。

実は売れている商品・商材はパターン化したセールスレターページになっているものです。
競合サイトや売れている商品のサイトのセールスレターに何が書いてあるかを調べてみることは
非常に大切です。ぜひトライされてみることをお薦めします。

縦長セールスレターページ・ランディングページへのカスタマイズ

ヘッダー画像を用意する

いわゆる『ファーストビュー』というところです。
ここをみて(見込み客は)サイトを離脱するか、下まで読んでみようか、と判断するところです。

重要なポイントは全部記載する、訴えるつもりでヘッダー画像は作成してください。
(ヘッダー画像の作成の仕方などについては、また別の機会で取り上げたいと思います)

サンプル例としてあげたサイトでのヘッダー画像は925×1120pxで作成しました。

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



画像ができたらindex.htmlの内容を修正します。


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


もし、上記のindex.htmlの画像部分のファイル名が違う時は、アップロードしたファイル名に
合わせてください。

同じようにcssも修正しておきます。
テンプレートのキモの部分です。

layout.cssの修正

賢威6のcssには5つのcssファイルがありますが、そのうちの2つ
layout.cssとdesign.cssを修正します。

まずは、layout.cssの修正です。

下記のように全部の横幅を925pxに修正しておきます。
もちろん、自分のお好みのサイズで900pxでも構いません。

当然、その場合は上記のヘッダー画像の横幅は900pxで作成してください。


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


全体のバランスを考えるならば、たとえ1カラム以外のカラム数のページは用意しない、という形でも、
2カラム、3カラム、まで全部変更しておいても構いません。

ヘッダー部分の背景画像を用意してみる(背景色は単色でいいという人は不要です)

サンプルサイトでは副業・お小遣い稼ぎをテーマにしたサイトでしたちので、金色をイメージしました。
背景画像などをダウンロードできるサイトから持ってきたものです。

ヘッダー画像と合わせるために作成したものです。
高さは意図的にヘッダー画像といっしょにしてあります。

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

実際は、横幅1920px、高さ1120pxで作成。
(ただしここに記載されているのは大きさを640×400pxに縮小したものです)

design.cssを修正する

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


アップした画像のファイル名と合わせてください。

※ちなみに、画像をアップする際は、賢威6のテンプレートの中のimagesのフォルダに
アップするようにしてください。
(先のヘッダー画像の場合も同様です)

※記事作成のページから画像をアップするのと同じようにアップすると表示されない場合があります。

⇒ サイトアドレス ⇒ サイトアドレス/blog/ またはサイトアドレス/wp/ などの中にある
⇒ サイトアドレス/blog(またはwp)/wp-contents/themes/賢威テンプレート/

の中にある
⇒ (中略)/themes/賢威テンプレート/images/ にアップロードしてください。

横幅のラインに影(シャドウ)をつけて浮き立たせる

実際のイメージ画像は次のような感じです。


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


何となく浮き出る感が強調されるかと思います。

次のようにカスタマイズしてください。
シャドウがつくラインの色が#ccc(グレー)の場合です。

design.cssを修正する2

下記のように修正します。
5pxは影(シャドウ)の幅だと認識してください。



1805019

テキストボックスのカスタマイズ

上記やり方で横幅を示すラインにシャドウ(影の部分)を作成したと思いますが・・・
場合によっては、テキスト入力部分が左端のラインぎりぎりになる場合があります。
(上記シャドウの処理の有無にかかわらず)

それで、左端から若干のスキ間をあけるボックスを表示させて
(しかも場合によってはボックスラインを表示させずに)
文章の配置についてバランスをとることもできます。

※その場合のカスタマイズ方法は別ページ(テキストボックスのカスタマイズ)に記載しました。
良かったら参考にしてください。

[blogcard url=”https://www.affi8.com/customize-textbox/”]

賢威6カスタマイズまとめ
(縦長のセールスレターページ・ランディングページにする方法)

ランディングページ(セールスレターページ)はクロージングのためのページです。
ここから購入してもらえるか、離脱されるのか、(他に検索したりして)よその商品・商材に
いってしまうのか・・・非常に大切です。

一般のブログなどと違って、セールスレターページ・ランディングページは縦長のものが多いですね。
これは当然ながら、これまでのいろんな試行錯誤の中で購買に結びつけるためには効果のある手法・
テクニックだということの裏返しでもあります。

もちろんこういったセールスレターやランディングページとしてのテンプレートが販売されたりもしています。
でも、実際は『帯に短し、たすきに長し』だと思います。

もしあなたが賢威6をお持ちでセールスレターのようにカスタマイズしようと思ったら
簡単に見栄えよくすることが可能です。

良かったら試してみてください。
ただし、老婆心からのアドバイスです。

こういったカスタマイズに時間を掛け過ぎても自己満足の世界での追求になる場合があります。
あくまでも最終的には、アクセスアップであったり、集客であったり、さらには
そこからの売上アップであったり、というのが狙い・目的であるはずです。

あまり横道にそれないようにすることも大切です。