メルマガ登録ページ(スクイーズページ)やセールスレター(ランディングページ)のようなペラページをSIRIUS(シリウス)を使わずに作る方法


メルマガアフィリエイトを始める際に必ず必要となるのが、メルマガ登録ページやセールスレターといったペラページです。

スクリーンショット 2014-12-14 2.12.22

このようなHTMLサイトを作る場合、SIRIUSのようなサイト作成ツール(シリウス)を使うのが一般的ですが、実は、こういった1カラムのペラページはHTMLの知識が少しあれば作れます。

この記事では、こういったペラページの作り方について解説します。

HTMLとCSSの話が中心となりますが、ここでHTML/CSSの基礎を抑えておけば、より自由度の高いサイトが作れるようになるので、まずはペラページを1枚つくってHTML/CSSの知識を身につけて頂ければと思います。

  • ペラページ用のフォルダを用意する(imageフォルダ・index.html・style.css)
  •  index.htmlの記述
  • style.cssの記述
  • imageフォルダにイメージを入れる

ペラページは以上4つの工程で作る事が出来ます。それぞれ1つずつ解説します。

ペラページ用のフォルダを用意する(imageフォルダ・index.html・style.css)

まず、デスクトップにペラページ用のフォルダを用意します。

スクリーンショット 2014-12-14 9.58.06

例えば上の図ではフォルダ名を「test」としていますが、最終的に、このtestというフォルダを「http://less-is-more.jp/」このドメインにアップロードして「http://less-is-more.jp/test」で表示させる事になります。

このフォルダの中は、

  • index.html
  • style.css
  • imageフォルダ

この3つから構成されます。

スクリーンショット 2014-12-14 10.03.42

■index.html

index.htmlは、そのサイトにアクセスした時に最初に表示されるファイルという意味です。ペラページでは複数のページを必要としないので、ここではindex.htmlのみ用意します。

■style.css

style.cssは、index.htmlのレイアウト調整や文字装飾などに使います。

■imageフォルダ

imageフォルダには、ペラページ内で使う画像を収納します。

まだ、中は空っぽの状態で良いので、以上3つのフォルダ/ファイルを用意して下さい。

index.htmlの記述

定型文の記述

index.htmlファイルが用意できたら、その中に以下の記述をします。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />

<title>ペラページのタイトル</title>

<link href=”style.css” rel=”stylesheet” type=”text/css”media=”all” />

<link rel=”shortcut icon” href=”image/favicon.ico” />

</head>

<body>

<div id=”contents”>

***ここに本文を記述していく***

</div>

</body>

</html>

この部分は定形文のようなものなので、そのままコピペで使って貰って構いませんが、少しだけ修正点があります。

<title>ペラページのタイトル</title>

ここの「ペラページのタイトル」ですが、ここは好きなタイトルに変えて下さい。例えば、メルマガ登録ページであれば、ペラページのタイトルは「メルマガ登録ページ」としても良いです。

また、

<link rel=”shortcut icon” href=”image/favicon.ico” />

ここの部分は、ペラページのファビコンの設定になります。

image/favicon.ico

先に用意しておいた、imageフォルダに画像ファイル「favicon.ico」を入れると、それがペラページのファビコンに設定されます。

本文の記述

ここまで出来たら<body></body>の中に本文を記述していきます。

<p>タグの使い方

本文の記述には<p>タグを使います。

例えば、ブラウザで

こんにちは、お元気ですか?

と表示させたい場合は、

<p>こんにちは、お元気ですか?</p>

と記述します。

<br/>タグの使い方

<p>タグで文章を書いていき、文章が長くなったら<br/>タグを使って、改行を入れていきます。

例えば、ブラウザで

こんにちは、お元気ですか?私は元気です。

昨日、家族と温泉に行ってきました。

10種類くらい温泉があり、

その全てに入るのに3時間くらいかかりました。

このように、改行を入れて表示させたい場合は、

<p>こんにちは、お元気ですか?私は元気です。<br/>

昨日、家族と温泉に行ってきました。<br/>

10種類くらい温泉があり、<br/>

その全てに入るのに3時間くらいかかりました。</p>

このようになります。

<a>タグの使い方

<a>タグは、文字にリンクを貼る時などに使います。

例えば、

ネトレピのトップページへ

このように文字にリンクを貼る場合は、

→<a href=”http://less-is-more.jp/”>ネトレピのトップページへ</a>

となります。

また、リンク先のページを別のタブで開かせる場合には、

→<a href=”http://less-is-more.jp/” target=”_blank”>ネトレピのトップページへ</a>

このように、target=”_blank”を記入します。

 画像の載せ方

header54

このように、記事中に画像を載せる時は、以下のような記述をします。

<img src=”http://less-is-more.jp/image/test.jpg” width=”400″ height=”150″alt=”テスト画像”/>

この記述の意味は、

http://less-is-more.jpのドメインにアップロードされたimageフォルダの中にあるtest.jpgという画像ファイルを、幅400px高さ150pxで表示して下さい。もし何かしらの理由で画像が表示出来ない場合は、画像の代わりに「テスト画像」と表示させて下さい。

という意味です。

<h1><h2><h3><h4><h5>タグの使い方

<h1>タグはペラページのタイトルに使います。基本的に<h1>タグで囲まれた文字は、ペラページの中で最も大きな文字となります。

<h2>タグは、セールスレターの場合であれば「小見出し」に使います。タイトルよりも、ひと回り小さな文字となります。

<h3><h4><h5>も、これと同じ要領で、数字が上がるにつれて、文字の大きさは小さくなっていきます。

<span class=”***”>の使い方

<span class=”***”>は、文字を装飾する時に便利なタグです。

例えば、これから解説するstyle.css側で、

.yellow{

color:#000;

font-weight:bold;

border-bottom:#000 1px solid;

background-color:#FF0;
}

と設定した場合、

index.html側

<span class=”yellow”>文字装飾テスト</span>

と記述すると、ブラウザでは、

文字装飾テスト

このように表示されます。

style.cssの記述については後で解説しますので、ここでは、文字を<span class”***”></span>で囲むと、style.css側のclass設定が反映されると覚えて下さい。

style.cssの記述

style.cssでは、主にページのレイアウトや、文字の装飾を行います。

まずはページのレイアウトについて解説します。

style.cssレイアウトの設定

@charset “UTF-8″;

/* CSS Document */

/*ウィンドウ背景色の設定*/

body{

background-color:#f5f5f5

}

/*コンテンツの設定*/

#contents{

width:700px;

padding:20px 25px;

margin:-10px auto;

background-color:#FFF;

border-left:1px solid #666;

border-right:1px solid #666;

}

ここの部分も定形文のようなものなので、自由にコピペして使って構いません。

ここの記述を簡単に解説すると、

@charset “UTF-8″;

これは、文字コードの指定をしています。ここは、いじる必要はありません。

/* CSS Document */

/*ウィンドウ背景色の設定*/

body{

background-color:#f5f5f5

}

この部分の最初の/*と*/は、/*と*/で囲まれた文字は読み込ませないという意味です。

コードが長くなると、コードの把握が出来なくなるので/*ウィンドウ背景色の設定*/このような記述をして、コードを見やすくします。

body{
background-color:#f5f5f5
}

ここの記述は、背景色(background-color)を#f5f5f5(灰色)にするという記述です。

もし、ページの背景色を、白にしたい場合は、ここの部分を#ffffffとします。黒にしたい場合は、#000000とします。

色コードは、こちらのサイトを参考にして下さい→http://www.colordic.org/

/*コンテンツの設定*/

#contents{

width:700px;

padding:20px 25px;

margin:0px auto;

background-color:#ffffff;

border-left:1px solid #000000;

border-right:1px solid #000000;

}

ここの記述は、先ほどindex.htmlに記述した、

<div id=”contents”>

***ここに本文を記述していく***

</div>

と連動しています。

ここの意味は「style.cssに記述されている#contentsの形式に合わせたレイアウトにする」という意味です。

#contentsの内容を解説すると、

width:700px;・・・サイトの幅は700pxに指定

padding:20px 25px;・・・パディング(余白)は上下が20pxで、左右は25px

margin:0px auto;・・・サイトを表示させる時は、上下には空きを作らずに左右対称、中央に配置

background-color:#ffffff;・・・サイトの背景色は白

border-left:1px solid #000000;・・・サイトの左の線は黒色の実線

border-right:1px solid #000000;・・・サイトの右の線は黒色の実線

となります。

文字装飾の設定

style.cssにサイトのレイアウトの記述が出来たら、次は文字装飾の記述を行います。

<p>タグの文字装飾

/*pの設定*/
p{
color:#000000;
font-family:”ヒラギノ角ゴ Pro W3″, “Hiragino Kaku Gothic Pro”, “メイリオ”, Meiryo, Osaka, “MS Pゴシック”, “MS PGothic”, sans-serif;
font-size:100%;
line-height:150%;

}

まずは、pタグの文字装飾の設定です。この記述の意味を解説すると、

color:#000000;・・・文字の色は黒

font-family:”ヒラギノ角ゴ Pro W3″, “Hiragino Kaku Gothic Pro”, “メイリオ”, Meiryo, Osaka, “MS Pゴシック”, “MS PGothic”, sans-serif;・・・文字フォントの指定

font-size:100%;・・・文字サイズの指定

line-height:150%;・・・行間を指定

<h1>タグの文字装飾

/*H1の設定*/

h1{
color:#ff0000;
font-family:”MS P明朝”, “MS PMincho”, “ヒラギノ明朝 Pro W3″, “Hiragino Mincho Pro”, serif;
text-align:center;
font-size:400%;

}

この記述の意味を解説すると、

<h1></h1>で囲まれた文字は、文字色は赤(ffoooo)として、フォントはMSP明朝もしくはヒラギノ明朝とする。文字は中央配置とする(text-align:center;)文字の大きさは400%(<p>タグの4倍の大きさ)とする。という意味です。

ここでは<h1>を例にあげましたが<h2>や<h3>も同じ要領で文字の装飾指定が出来ます。

ただし、基本的に<h1><h2><h3>…は、h1タグの文字が最も大きくなり、h2、h3、になるにつれて、文字の大きさは小さくなります。

classの指定

最後にclassの指定をします。style.css側でclassの指定をする事で、index.html側で

<span class=”***”></span>

このようなコードで囲った時に、その囲った部分にclassで指定した内容を反映させる事が出来ます。

例えば、style.css側で以下のように記述し、

/*赤文字で背景は黄色、下線は赤*/

.redyellow{

color:#ff0000;

background-color:#ffff00;

border-bottom:#ff0000 1px solid;

font-weight:bold;

}

index.html側で、

<span class=”redyellow”>ネットビジネスで成功するには素直さが大切</span>

この様に記述した場合。

ブラウザでは、

ネットビジネスで成功するには素直さが大切

このように表示されます。

cssによるBOX(枠)の設定

セールスレター内の一部分に枠を加える設定方法について解説します。

あああああああああああああああああああああああああああああああああ

あああああああああああああああああああああああああああああああああ

あああああああああああああああああああああああああああああああああ

↑このように、ページ内のある一部分に枠を付けるには、style.css側で以下のような記述をします。

/*強調枠の設定*/

.frame{
width:600px;
padding:10px 10px;
margin:0px auto;
border:#000000 2px solid;
background-color:#f5f5f5;
}

この記述の意味は、幅600pxの枠、余白は上下左右10px、ブラウザでは中央表示させる。枠線の色は黒色(#000000)で線の太さは2px、線の種類は実線。枠内の色は灰色(f5f5f5)という意味です。

imageフォルダについて

サイトに載せる画像は、imageフォルダに入れます。

例えば、test.jpgというイメージ画像を、imageフォルダに入れ、そのimageフォルダを

http://less-is-more.jp/

このドメインの直下にアップロードした場合、index.html側で、

<img src=”http://less-is-more.jp/image/test.jpg” width=”400″ height=”150″alt=”テスト画像”/>

と記述した場合、

http://less-is-more.jp/というドメインの下にあるimageというフォルダの中のtest.jpgという画像を、幅400px、高さ150pxで表示させる。もし表示出来ない場合は「テスト画像」という文字を表示させる。

という意味になります。

index.htmlファイル、style.cssファイル、imageフォルダが完成

  • index.html
  • style.css
  • imageフォルダ

この3つのが完成したら、これら3つのファイルが含まれたフォルダをアップロードします。

例えば、この3つのファイルが含まれたフォルダの名前を「test」とした場合、このtestのフォルダを

http://less-is-more.jp/

このドメインの直下にアップロードすると、

http://less-is-more.jp/test

にペラページが表示される事になります。

ランディングページやスクイーズページなどの1カラムのペラページを作るのは意外と簡単

最初に解説した通り、1カラムのペラページは.htmlと.cssの知識があれば作る事が出来ます。

もちろん、SIRIUSなどのサイト作成ツールで作る事も可能ですし、そっちのほうが楽です。

ですが、より自由にデザインを変更させたい場合、.htmlや.cssの基礎知識を付けたい場合は、ゼロからペラサイトを作ってみるのも良いと思います。

今回の記事はお役にたてましたでしょうか?

もし、今回の記事を読んで感想や分からない事などありましたら、下のフォームよりお伝え下さい。

些細な事でも構いません。

おそらく、あなたが抱いた疑問は、これからこの記事を読む方も抱く疑問です。

そういった疑問を1つ1つ解決していきます。

コメントして頂ければ気づき次第、すぐに回答いたします。



総合案内

著者情報
著者情報
年収1000万円まで守る2つの事
年収1000万円まで守る2つの事
読者さまの声
読者さまの声
もくじ
もくじ
超初心者講座
超初心者講座
ブログ基礎講座
ブログ基礎講座
トレンドブログ講座
トレンドブログ講座
パワーブログ講座
パワーブログ講座
マインドセット
マインドセット
コピーライティング
コピーライティング
ブログアフィリエイト
ブログアフィリエイト
トレンドアフィリエイト
トレンドアフィリエイト
ネットビジネス
ネットビジネス
SEO
SEO
コラム
Googleアドセンス
Googleアドセンス
与える事に徹する
与える事に徹する
先生の選び方
先生の選び方
Googleアドセンスの始め方
Googleアドセンスの始め方
賢威カスタマイズ
賢威カスタマイズ
このブログについて
このブログについて
女性のブログアフィリエイト
女性のブログアフィリエイト
そもそものステップが違う
そもそものステップが違う
中高年の方はシンプルな方法がお勧め
中高年の方はシンプルな方法がお勧め

著者:ヒデアキ
現在は、ネット集客のスキルを活かして既に起業されている方やこれから起業を真剣に考えている方を全力でサポートしています。
更に詳しいプロフィールはこちら

このページの先頭へ