綺麗なランディングページが欲しい！
でも、プロに頼むと色々問題が・・。
そんなあなたに、プロと同じとはいえませんが、
ランディングページを
手作りできる情報をお届けします。
×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
前回ｍではこちら
⇒ http://zimaginezz.jp/testlp8.html
もうこれで十分 LPなんじゃないの？
って、思いますよね。 これで完成だいいかと。
でも、ページをよく見てみると、
なんか、全体的に白すぎて、殺風景ですね。＾＾；
それなので、今回は、ページの背景に色をいれていきます。
ページに色をいれることで、全体の見栄えがよくなって
プロのページに負けなくなると思います。
ページの色は body タグ内で
と記述します。
リンクの色も調節していますので 現在の body タグは
色を付けたページはこちら
⇒ http://zimaginezz.jp/testlp9.html
ページに色をつけただけで、かなりイメージが
変わるとおもいませんか？
しかし、肝心の文章が読みづらい・・・。
ここで、ちょっと文字の背景だけ色を変えようと思ったのですが、
簡単で上手くいく情報がなかったので・・・。
「テーブル」 を使います。 ・ｘ・
テーブルはそれほど難しくないです。
むしろスタイルシートで設定するほうがむずいので
次の記事で書く予定だった テーブルで
文章の背景だけを白に戻します。
<tabke>～</table> を使います。
タグは以下の通りになります。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
ページの背景は、色だけだはなく、画像を背景として使用することもできます。
<span style="background-color:#ffffff;color:#ff0000"></span>
をつかうらしいのですが、私はあまり使っていないので
今後、使う予定の人がいれば、調べてみてください。
また、テーブルタグを使用すると、
中央寄せで表示していた文章が左に移動していますね。
こちらは、次回の記事でまた説明します。
⇒ http://zimaginezz.jp/testlp8.html
もうこれで十分 LPなんじゃないの？
って、思いますよね。 これで完成だいいかと。
でも、ページをよく見てみると、
なんか、全体的に白すぎて、殺風景ですね。＾＾；
それなので、今回は、ページの背景に色をいれていきます。
ページに色をいれることで、全体の見栄えがよくなって
プロのページに負けなくなると思います。
ページの色は body タグ内で
<body bgcolor="#ffdead" text="#000000" >
と記述します。
<body bgcolor="#ffdead" text="#000000"
link="#adff2f" alink="#adff2f" vlink="#adff2f">
となっています。
色の見本は、トホホのｗｗｗ入門からみてください
とほほのｗｗｗ入門 ⇒ http://www.tohoho-web.com/wwwcolor.htm
となっています。
色の見本は、トホホのｗｗｗ入門からみてください
とほほのｗｗｗ入門 ⇒ http://www.tohoho-web.com/wwwcolor.htm
色を付けたページはこちら
⇒ http://zimaginezz.jp/testlp9.html
ページに色をつけただけで、かなりイメージが
変わるとおもいませんか？
しかし、肝心の文章が読みづらい・・・。
ここで、ちょっと文字の背景だけ色を変えようと思ったのですが、
簡単で上手くいく情報がなかったので・・・。
「テーブル」 を使います。 ・ｘ・
テーブルはそれほど難しくないです。
むしろスタイルシートで設定するほうがむずいので
次の記事で書く予定だった テーブルで
文章の背景だけを白に戻します。
<tabke>～</table> を使います。
タグは以下の通りになります。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
<html>
<head>
<title>サンプルペーj</title>
</head>
<body bgcolor="#ffdead" text="#000000"
link="#adff2f" alink="#adff2f" vlink="#adff2f">
<center>
<table border="0" cellpadding="10">
<tr><td bgcolor="#ffffff">
<h1>
<span style="background-color:;color:#ff0000">
２０１９年 ３月 ３１日<br>
テンプレート 「賢威」 販売終了<br>
次に来るテンプレートは？
</span>
<br><br><br>
</h1>
<h4><font color="#008000">
もし、あなたが ブログのテンプレートに<br>
迷っているのならば、<br>
特別に今、有益な情報を公開しています。<br>
「賢威」 が SEO対策史上<br>
最高級のテンプレートである事は<br>
間違いありません。<br>
しかし、令和に元号が変わった今、<br>
「賢威」を新たに入手する事は不可能なのです。<br><br><br>
</font></h4>
<h2><font color="#0000ff">
しかし！<br>
</font></h2>
<h4><font color="#008000">
賢威と劣らず 優れたテンプレートはまだあります。<br>
今はまだ、固定化された情報の中でしか、<br>
見えないものもあるのです。<br>
ブログをこれから構築しようとしている 今<br>
改めて、認識を深く掘り下げてみませんか？<br><br><br>
</font></h4>
<h1><font color="#ff0000">
<a href="ltest20.html">
こちらをクリックして頂き、
</a><br>
さらに有益な情報をお受け取り下さい！<br>
</td></tr>
</table>
</table>
</font></h1>
</center>
</body>
</html>
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
上記の赤い部分が テーブルとして追加する部分です。
できあがりはこちら
⇒ http://zimaginezz.jp/testlp10.html
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
上記の赤い部分が テーブルとして追加する部分です。
できあがりはこちら
⇒ http://zimaginezz.jp/testlp10.html
ページの背景は、色だけだはなく、画像を背景として使用することもできます。
<body bgcolor="#ffdead" background="画像ファイル" text="#000000" >
小さい画像だと、パターンで繰り返して表示できます。
大きい画像 （１０００ピクセル以上）だと背景に固定の感じで表示できます。
小さい画像だと、パターンで繰り返して表示できます。
大きい画像 （１０００ピクセル以上）だと背景に固定の感じで表示できます。
<body bgcolor="#ffdead" background="tbb1.JPG" text="#000000"
link="#adff2f" alink="#adff2f" vlink="#adff2f">
それぞれの文字の背景色を変えるには<span style="background-color:#ffffff;color:#ff0000"></span>
をつかうらしいのですが、私はあまり使っていないので
今後、使う予定の人がいれば、調べてみてください。
また、テーブルタグを使用すると、
中央寄せで表示していた文章が左に移動していますね。
こちらは、次回の記事でまた説明します。
PR
前回までのページはこちら
⇒ http://zimaginezz.jp/testlp7.html
今回は、文末の 「こちらをクリック」という文章に
リンクを入れます。
リンクとは、マウスを充てるとマークが変わり、
クリックすると、別のページに飛ぶことをいいます。
「こちらをクリック」 をクリックすると別のページに
移動する （リンクする） タグは
<a>～</a> タグで記述します。
<a href=" "> のリンク先のURL に、
あなたのメルマガの登録フォームのURLを記述します。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
⇒ http://zimaginezz.jp/testlp8.html
<a href="あなたのメルマガの登録フォームのURL">
こちらをクリックして頂き
</a>
今回は、こちらのタグをコピーして
必要な部分に貼り付けてご利用ください。
リンクについては、以上です。
⇒ http://zimaginezz.jp/testlp7.html
今回は、文末の 「こちらをクリック」という文章に
リンクを入れます。
リンクとは、マウスを充てるとマークが変わり、
クリックすると、別のページに飛ぶことをいいます。
「こちらをクリック」 をクリックすると別のページに
移動する （リンクする） タグは
<a>～</a> タグで記述します。
<a href="リンク先のURL">こちらをクリックして頂き</a>
<a href=" "> のリンク先のURL に、
あなたのメルマガの登録フォームのURLを記述します。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
<a href="ltest20.html">
こちらをクリックして頂き、
</a>
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
サンプルページはこちら＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
⇒ http://zimaginezz.jp/testlp8.html
<a href="あなたのメルマガの登録フォームのURL">
こちらをクリックして頂き
</a>
今回は、こちらのタグをコピーして
必要な部分に貼り付けてご利用ください。
リンクについては、以上です。
前回までの LP
⇒ http://zimaginezz.jp/testlp5.html
文章の配置は、 LPらしくなりましたが、
文字の色が黒だけですね。
今回は、文字の色を変えてみます。
文字の色は <font>～</font> タグを使います。
冒頭の ３行を 赤い文字に変えてみます。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
⇒ http://zimaginezz.jp/testlp5.html
文字の色が黒だけですね。
今回は、文字の色を変えてみます。
文字の色は <font>～</font> タグを使います。
冒頭の ３行を 赤い文字に変えてみます。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
</font></h1>
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
<fint color="#******"> で、文字の色を指定します。
</font> で 指定する文字の最後を決めます。
サンプルはこちら
⇒ http://zimaginezz.jp/testlp6.html
文字の色を変えるだけで、ページの印象がずいぶん変わります。
フォントタグの中の
#ff0000 は、色のコードです。
色のコードを覚えるのは大変なので
⇒ http://www.tohoho-web.com/wwwcolor.htm
とほほのWWW入門から、色見本をみながら決めるといいです。
こちらの記事では、
#ff0000
#0000ff
#00800
の３つだけ使います。
タイトル、見出し、本文で色を分けてみます。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
<fint color="#******"> で、文字の色を指定します。
</font> で 指定する文字の最後を決めます。
サンプルはこちら
⇒ http://zimaginezz.jp/testlp6.html
文字の色を変えるだけで、ページの印象がずいぶん変わります。
フォントタグの中の
#ff0000 は、色のコードです。
色のコードを覚えるのは大変なので
⇒ http://www.tohoho-web.com/wwwcolor.htm
とほほのWWW入門から、色見本をみながら決めるといいです。
こちらの記事では、
#ff0000
#0000ff
#00800
の３つだけ使います。
タイトル、見出し、本文で色を分けてみます。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
<html>
<head>
<title>サンプルペーj</title>
</head>
<body bgcolor="#ffffff" text="#000000"
link="#ff0000" alink="#ff0000" vlink="#ff0000">
<center>
<h1><font color="#ff0000">
２０１９年 ３月 ３１日<br>
テンプレート 「賢威」 販売終了<br>
次に来るテンプレートは？<br><br><br>
</font></h1>
<h4><font color="#008000">
もし、あなたが ブログのテンプレートに<br>
迷っているのならば、<br>
特別に今、有益な情報を公開しています。<br>
「賢威」 が SEO対策史上<br>
最高級のテンプレートである事は<br>
間違いありません。<br>
しかし、令和に元号が変わった今、<br>
「賢威」を新たに入手する事は不可能なのです。<br><br><br>
</font></h4>
<h2><font color="#0000ff">
しかし！<br>
</font></h2>
<h4><font color="#008000">
賢威と劣らず 優れたテンプレートはまだあります。<br>
今はまだ、固定化された情報の中でしか、<br>
見えないものもあるのです。<br>
ブログをこれから構築しようとしている 今<br>
改めて、認識を深く掘り下げてみませんか？<br><br><br>
</font></h4>
<h1><font color="#ff0000">
こちらをクリックして頂き、<br>
さらに有益な情報をお受け取り下さい！<br>
</font></h1>
</center>
</body>
</html>
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
完成品はこちら
⇒ http://zimaginezz.jp/testlp7.html
いかがでしょうか？
私は文章が苦手なので、どうも良いとはいえないのですが、
文章をもっと考えて、ここまででページを作れば
十分な LP になると思いませんか？
次回は、リンクの貼り方について説明します。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
完成品はこちら
⇒ http://zimaginezz.jp/testlp7.html
いかがでしょうか？
私は文章が苦手なので、どうも良いとはいえないのですが、
文章をもっと考えて、ここまででページを作れば
十分な LP になると思いませんか？
次回は、リンクの貼り方について説明します。
前回は、本文に改行タグをいれて
全体的に見やすいページを作りました。
今回は、冒頭の ３行
文字の大きさは、 <h>～</h> タグを使います。
<html>
全体的に見やすいページを作りました。
今回は、冒頭の ３行
２０１９年 ３月 ３１日
テンプレート 「賢威」 販売終了
次に来るテンプレートは？
の文字の大きさを変えてみましょう。文字の大きさは、 <h>～</h> タグを使います。
<html>
<head>
<title>サンプルページ</title>
</head>
<body bgcolor="#ffffff" text="#000000"
link="#ff0000" alink="#ff0000" vlink="#ff0000">
<center>
<h1>
<h1>
２０１９年 ３月 ３１日<br>
テンプレート 「賢威」 販売終了<br>
次に来るテンプレートは？<br><br>
</h1>
</h1>
もし、あなたが ブログのテンプレートに<br>
迷っているのならば、<br>
特別に今、有益な情報を公開しています。<br>
「賢威」 が SEO対策史上<br>
最高級のテンプレートである事は<br>
間違いありません。<br>
しかし、令和に元号が変わった今、<br>
「賢威」を新たに入手する事は不可能なのです。<br>
しかし！<br>
賢威と劣らず 優れたテンプレートはまだあります。<br>
今はまだ、固定化された情報の中でしか、<br>
見えないものもあるのです。<br>
ブログをこれから構築しようとしている 今<br>
改めて、認識を深く掘り下げてみませんか？<br>
こちらをクリックして頂き、<br>
さらに有益な情報をお受け取り下さい！<br>
</center>
</body>
</html>上図のように、大きくしたい文章だけ、
<h1>～</h1> で囲みます。
サンプルページはこちらになります。
⇒ http://zimaginezz.jp/testlp4.html
文字を大きくしただけで、LPらしくなりました。
文字の大きさは、 １が一番大きくて
１、２、３、４、５、６、 まで小さくできます。
１のおおきさの文字
２の大きさの文字
３の大きさの文字
４の大きさの文字
５の大きさの文字
６の大きさの文字
本文を２つにわけて、見出しとクリック部分に編集してみます。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
<html>
<head>
<title>サンプルペーj</title>
</head>
<body bgcolor="#ffffff" text="#000000"
link="#ff0000" alink="#ff0000" vlink="#ff0000">
<center>
<h1>
２０１９年 ３月 ３１日<br>
テンプレート 「賢威」 販売終了<br>
次に来るテンプレートは？<br><br><br>
</h1>
<h4>
もし、あなたが ブログのテンプレートに<br>
迷っているのならば、<br>
特別に今、有益な情報を公開しています。<br>
「賢威」 が SEO対策史上<br>
最高級のテンプレートである事は<br>
間違いありません。<br>
しかし、令和に元号が変わった今、<br>
「賢威」を新たに入手する事は不可能なのです。<br><br><br>
</h4>
<h2>
しかし！<br>
</h2>
<h4>
賢威と劣らず 優れたテンプレートはまだあります。<br>
今はまだ、固定化された情報の中でしか、<br>
見えないものもあるのです。<br>
ブログをこれから構築しようとしている 今<br>
改めて、認識を深く掘り下げてみませんか？<br><br><br>
</h4>
<h1>
こちらをクリックして頂き、<br>
さらに有益な情報をお受け取り下さい！<br>
</h1>
</center>
</body>
</html>
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
できあがりはこちら
⇒ http://zimaginezz.jp/testlp5.html
今回は、改行タグも複数使ってみました。
これだけでも、十分 LPらしくなりましたね。
次回は、文字の色を変えてみます。
前回設定したひな型に、
実際に本文を入れてみましょう。
今回 サンプルで用意した文章はこちらです。
サンプル文章
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
実際に本文を入れてみましょう。
今回 サンプルで用意した文章はこちらです。
サンプル文章
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
２０１９年 ３月 ３１日
テンプレート 「賢威」 販売終了
次に来るテンプレートは？
もし、あなたが ブログのテンプレートに
迷っているのならば、
特別に今、有益な情報を公開しています。
「賢威」 が SEO対策史上
最高級のテンプレートである事は
間違いありません。
しかし、令和に元号が変わった今、
「賢威」を新たに入手する事は不可能なのです。
しかし！
賢威と劣らず 優れたテンプレートはまだあります。
今はまだ、固定化された情報の中でしか、
見えないものもあるのです。
ブログをこれから構築しようとしている 今
改めて、認識を深く掘り下げてみませんか？
こちらをクリックして頂き、
さらに有益な情報をお受け取り下さい！
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
ページとして、作成する文章は自由なので、
集めたいリストの属性や、販売ページに合わせて
下書きをしておいてください。
こちらのサンプルをひな型に挿入します。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
ページとして、作成する文章は自由なので、
集めたいリストの属性や、販売ページに合わせて
下書きをしておいてください。
こちらのサンプルをひな型に挿入します。
<html>
<head>
<title>サンプルページ</title>
</head>
<body bgcolor="#ffffff" text="#000000"
link="#ff0000" alink="#ff0000" vlink="#ff0000">
<center>
２０１９年 ３月 ３１日
テンプレート 「賢威」 販売終了
次に来るテンプレートは？
もし、あなたが ブログのテンプレートに
迷っているのならば、
特別に今、有益な情報を公開しています。
「賢威」 が SEO対策史上
最高級のテンプレートである事は
間違いありません。
しかし、令和に元号が変わった今、
「賢威」を新たに入手する事は不可能なのです。
しかし！
賢威と劣らず 優れたテンプレートはまだあります。
今はまだ、固定化された情報の中でしか、
見えないものもあるのです。
ブログをこれから構築しようとしている 今
改めて、認識を深く掘り下げてみませんか？
こちらをクリックして頂き、
さらに有益な情報をお受け取り下さい！
</center>
</body>
</html>
<titile> ～</titile> の間に、ページをタイトル、
<center> ～</center> の間に、本文を挿入します。
この状態で、保存して ウェブページを見てみてください。
こちらと同じページになっていませんか？
⇒ http://zimaginezz.jp/testlp2.html
HTML タグ内では、自動で改行できないので、
本文には、改行タグ <br> を追加します。
上記の本文通りに改行したい場合、文章の末尾にタグを
付け加えます。
<titile> ～</titile> の間に、ページをタイトル、
<center> ～</center> の間に、本文を挿入します。
この状態で、保存して ウェブページを見てみてください。
こちらと同じページになっていませんか？
⇒ http://zimaginezz.jp/testlp2.html
HTML タグ内では、自動で改行できないので、
本文には、改行タグ <br> を追加します。
上記の本文通りに改行したい場合、文章の末尾にタグを
付け加えます。
２０１９年 ３月 ３１日<br>
テンプレート 「賢威」 販売終了<br>
次に来るテンプレートは？<br>
もし、あなたが ブログのテンプレートに<br>
迷っているのならば、<br>
特別に今、有益な情報を公開しています。<br>
「賢威」 が SEO対策史上<br>
最高級のテンプレートである事は<br>
間違いありません。<br>
しかし、令和に元号が変わった今、<br>
「賢威」を新たに入手する事は不可能なのです。<br>
しかし！<br>
賢威と劣らず 優れたテンプレートはまだあります。<br>
今はまだ、固定化された情報の中でしか、<br>
見えないものもあるのです。<br>
ブログをこれから構築しようとしている 今<br>
改めて、認識を深く掘り下げてみませんか？<br>
こちらをクリックして頂き、<br>
さらに有益な情報をお受け取り下さい！<br>
改行タグを使用したページは次の通りになります。
⇒ http://zimaginezz.jp/testlp3.html
文字が左寄せではなく、中央で揃えてありますが、
LP では、インパクトが重要なので、
中央揃えにしました。
文章と文章の間に、空白の行を入れたい場合は、
<br><br>
と <br> タグを2個連続で使います。
３個 ４個 といろいろ使えますので、
ページのレイアウトにご活用ください。
改行タグを使用したページは次の通りになります。
⇒ http://zimaginezz.jp/testlp3.html
文字が左寄せではなく、中央で揃えてありますが、
LP では、インパクトが重要なので、
中央揃えにしました。
文章と文章の間に、空白の行を入れたい場合は、
<br><br>
と <br> タグを2個連続で使います。
３個 ４個 といろいろ使えますので、
ページのレイアウトにご活用ください。
プロフィール
HN：
hsorimatihh
性別：
非公開