テストページ

killerPage1

killerPage2

killerPage3

概要

セールスレター型デザインとは、縦一列に書かれた「読ませるためのホームページ」のことです。

QHMでは、ページ毎にセールスレター型デザインを適用できます。
QHMのセールスレターデザインでは、以下の項目が簡単に変更できます。

  1. 見出し(ヘッド、サブヘッド)の色
  2. 見出し(ヘッド、サブヘッド)のフォント形状
  3. 本文のフォント形状
  4. 本文のフォント色
  5. 本文部分の背景色
  6. 全体の幅
  7. 余白
  8. 背景色 or 背景画像指定
  9. ロゴ画像を使ったキャッチコピーを挿入

このように、様々な設定が可能になりました。
ただ、普通に使うだけなら、細かい設定はせず、以下をコピペして使えばよいでしょう。

File not found: "killerpage2.png" at page "t"[添付]


基本書式

書き方は、以下の通りです(例)

※QHM3.63から、KILLERPAGE: -> KILLERPAGE2: と変更になりました

ルールは以下の通りです。
まず、最初のredgg

となります。その後のgrayは、背景色です。
できあがるデザインは、以下の通りです。

File not found: "kp_sample1.png" at page "t"[添付]


フォントパターン一覧

以下の4パターンがあります。コピー&ペースとして、変更して使うと便利です。


見出し & 背景の色設定

見出しと背景の色は、自由に選べます
色の指定は、CSS形式で行います。
※CSSとは、ホームページのデザインを行うための技術です

以下では、よく使う代表的なものをピックアップしました。
こちらから、選ぶと間違いはありません。
※文章の雰囲気や、背景デザインなどに合わせてお選びくださいね。

見出し見本

赤色の見出し濃い赤の見出し青色の見出し
KILLERPAGE2:redgg,whiteKILLERPAGE2:darkred,whiteKILLERPAGE2:bluegg,white
紺色の見出し濃い緑の見出し緑茶っぽい見出し
KILLERPAGE2:navygg,whiteKILLERPAGE2:darkgreengg,whiteKILLERPAGE2:#1f3134gg,white
濃い紫の見出し黒色の見出し漆黒色の見出し
KILLERPAGE2:indigogg,whiteKILLERPAGE2:blackgg,whiteKILLERPAGE2:#0d0015gg,white
濃すぎない黒の見出し----
KILLERPAGE2:#333gg,white----


背景色見本

背景のカラーをあげておきます。更に、br_から始まる10種類の特定方法で、「画像」を設定することが可能です。
なお、背景画像はご自身で用意したものを使うことも可能です。

     濃いグレー    グレー    淡いグレー
KILLERPAGE2:redgg,#333KILLERPAGE2:redgg,grayKILLERPAGE2:redgg,#ccc
            
KILLERPAGE2:redgg,#630KILLERPAGE2:redgg,#fc9KILLERPAGE2:redgg,#fc6
     濃い草色     濃い草色     淡い黄色
KILLERPAGE2:redgg,#330KILLERPAGE2:redgg,#330KILLERPAGE2:redgg,#ffc
     黄色        
KILLERPAGE2:redgg,#ff0KILLERPAGE2:redgg,#cf6KILLERPAGE2:redgg,#cf9
            
KILLERPAGE2:redgg,#030KILLERPAGE2:redgg,#6fcKILLERPAGE2:redgg,#cff
            
KILLERPAGE2:redgg,#369KILLERPAGE2:redgg,#003KILLERPAGE2:redgg,#ccf
            
KILLERPAGE2:redgg,#306KILLERPAGE2:redgg,#c9fKILLERPAGE2:redgg,#cff
            
KILLERPAGE2:redgg,#90cKILLERPAGE2:redgg,#fcfKILLERPAGE2:redgg,#603
            
KILLERPAGE2:redgg,#fccKILLERPAGE2:redgg,#f9cKILLERPAGE2:redgg,#f03
            
KILLERPAGE2:redgg,#c00KILLERPAGE2:redgg,#f66KILLERPAGE2:redgg,#fffaf0


事前に用意された背景画像

背景色を設定する場所で、 「br_パターン名」で画像が使えます。
以下が一覧です。

KILLERPAGE2:redgg,bg_beigeKILLERPAGE2:redgg,bg_black
image/bg_beige.pngimage/bg_black.pngimage/bg_black.pngimage/bg_black.pngimage/bg_black.png
image/bg_black.pngimage/bg_black.pngimage/bg_black.pngimage/bg_black.png
KILLERPAGE2:redgg,bg_blueKILLERPAGE2:redgg,bg_brown
image/bg_blue.pngimage/bg_brown.png
KILLERPAGE2:redgg,bg_umeKILLERPAGE2:redgg,bg_grey
image/bg_ume.pngimage/bg_grey.png
KILLERPAGE2:redgg,bg_igetaKILLERPAGE2:redgg,bg_kika1
image/bg_igeta.pngimage/bg_kika1.png
KILLERPAGE2:redgg,bg_kika2KILLERPAGE2:redgg,bg_kika3
image/bg_kika2.pngimage/bg_kika3.png
KILLERPAGE2:redgg,bg_kika4KILLERPAGE2:redgg,bg_kika5
image/bg_kika4.pngimage/bg_kika5.png
KILLERPAGE2:redgg,bg_kika6KILLERPAGE2:redgg,bg_kika7
image/bg_kika6.pngimage/bg_kika7.png
KILLERPAGE2:redgg,bg_kika8KILLERPAGE2:redgg,bg_navy
image/bg_kika8.pngimage/bg_navy.png
KILLERPAGE2:redgg,bg_darkgrey--
image/bg_darkgrey.png--




応用設定(細かな詳細変更)

文字色、背景色だけでなく、様々な設定が可能です。
ここでは、一つずつ解説します。

難しく考えず、とにかくやってみると良いでしょう。


セールスレター型デザインの幅設定

 KILLERPAGE2:コマンドでは、見出し色、背景色だけでなく、幅、余白、本文背景色、本文フォント色を設定できます。順番は、先の通りに指定します。

特に多い要望が、「幅の変更」です。幅のみ変更したい場合は、以下のように書きます。

これで、800pxの幅でセールスレターが作られます。
デフォルトの余白は、60pxに設定されていますので、800(px)で瀬呈すると、文字部分は、800 - (60+60) = 680pxとなります。

幅と余白をうまく組み合わせて、最適な大きさを模索してみて下さい。

ロゴ画像設定

幅一杯のロゴ画像を使ってセールスレターを作りたい場合に使います。
通常の画像貼り付けの場合は、余白の中、本文部分にヘッドコピーが入ります。

ここでの設定を実行すると、ロゴ画像をめいっぱいに広げることができます。

例えば、swfu(簡単アップローダー)を使って、ロゴ画像をアップします。その上で、ロゴ画像のURLをコピーし、貼り付けると便利です。

なるべく、httpから始まる形を使ってもらうと、
他のシステムと連動するときに便利です。

背景画像設定

用意された物以外の背景画像を使いたい場合、設定します。
ただし、貼り付けた画像は、繰り返し表示になりますので、ご了承ください。

繰り返しを行わないのであれば、直接プログラムを編集してもらうと良いでしょう。

たとえば、swfu簡単アップローダーを使って、背景画像を設置します。その後、URLを取得して、設定します。


クイックリファレンス







a:1970 t:1 y:0

powered by Quick Homepage Maker 5.0
based on PukiWiki 1.4.7 License is GPL. QHM