綺麗なランディングページが欲しい！
でも、プロに頼むと色々問題が・・。
そんなあなたに、プロと同じとはいえませんが、
ランディングページを
手作りできる情報をお届けします。
×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
実は、文字の背景は違うタグで変えて、
テーブルはテーブルできちんと説明する予定だったのですが、
自分が、スタイルシートを使っていなかったので、
背景の色とテーブルが混ざってしまいました。
すみません。 ＞＜
最初から、テーブルを使用する時の
最初のテンプレートは、記事にのせておきましたので、
そちらをコピペして、本文をいれてくれれば、
できるようにしておきました。
前回のページ
⇒ http://zimaginezz.jp/testlp11.html
なかなか、見ごたえのあるページになってきました。
しかし、テーブルタグを使用する前、
冒頭の３行
文中の 「しかし」
最後のクリック部分
が、左寄せになっていますね。
今回は、こちらを調整していきます。
<td> テキストエリアの表示
<th> 見出しの表示
テーブルタグには、テキストを表示する タグと
見出しを表示する タグの２種類があります。
<td> は通常のテキストエリアで、左寄せの表示します。
,<th> は、見出しのように、中央寄せで表示します。
こちらのタグを使ってページを調節していきます。
今回は、少し タグが入り組んで 複雑になるので
ページの上部から順番に説明していきます。
テーブルはテーブルできちんと説明する予定だったのですが、
自分が、スタイルシートを使っていなかったので、
背景の色とテーブルが混ざってしまいました。
すみません。 ＞＜
最初から、テーブルを使用する時の
最初のテンプレートは、記事にのせておきましたので、
そちらをコピペして、本文をいれてくれれば、
できるようにしておきました。
前回のページ
⇒ http://zimaginezz.jp/testlp11.html
なかなか、見ごたえのあるページになってきました。
しかし、テーブルタグを使用する前、
冒頭の３行
文中の 「しかし」
最後のクリック部分
が、左寄せになっていますね。
今回は、こちらを調整していきます。
<td> テキストエリアの表示
<th> 見出しの表示
テーブルタグには、テキストを表示する タグと
見出しを表示する タグの２種類があります。
<td> は通常のテキストエリアで、左寄せの表示します。
,<th> は、見出しのように、中央寄せで表示します。
こちらのタグを使ってページを調節していきます。
今回は、少し タグが入り組んで 複雑になるので
ページの上部から順番に説明していきます。
<html>
<head>
<title>ページのタイトル</title>
</head>
<body bgcolor"#ffffff" text="#000000" background="背景の画像ファイル"
alink="#ff0000" vlink="#ff0000" link="#ff0000">
<center>
<table border="0" cellpadding="10">
<tr><td bgcolor="#ffffff">
ここに本文を挿入する。
</td></tr>
</table>
</center>
</body>
</html>
こちらに再度、上部から文章を挿入します。
文章はコピペで挿入できます。
まず、冒頭の３行。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
<td> に変わって、 <th> を使用しています。
これで、冒頭の３行は、見出しとして表示します。
表示結果はこちら
⇒ http://zimaginezz.jp/testlp13.html
中央寄せで表示できましたね。
次の文章は、左寄せで表示したいので、 <td> タグを使います。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
こちらに再度、上部から文章を挿入します。
文章はコピペで挿入できます。
まず、冒頭の３行。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
<html>
<head>
<title>サンプルペーj</title>
</head>
<body bgcolor="#ffdead" background="ib1.jpg" text="#000000"
link="#adff2f" alink="#adff2f" vlink="#adff2f">
<center>
<table border="0" cellpadding="10">
<tr><th bgcolor="#ffffff">
<h1>
<font color="#ff0000">
２０１９年 ３月 ３１日<br>
テンプレート 「賢威」 販売終了<br>
次に来るテンプレートは？
</font></h1>
</th></tr>
</table>
</center>
</body>
</html>
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
<td> に変わって、 <th> を使用しています。
これで、冒頭の３行は、見出しとして表示します。
表示結果はこちら
⇒ http://zimaginezz.jp/testlp13.html
中央寄せで表示できましたね。
次の文章は、左寄せで表示したいので、 <td> タグを使います。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
<html>
<head>
<title>サンプルペーj</title>
</head>
<body bgcolor="#ffdead" background="ib1.jpg" text="#000000"
link="#adff2f" alink="#adff2f" vlink="#adff2f">
<center>
<table border="0" cellpadding="10">
<tr><th bgcolor="#ffffff">
<h1>
<font color="#ff0000">
２０１９年 ３月 ３１日<br>
テンプレート 「賢威」 販売終了<br>
次に来るテンプレートは？
</font></h1>
</th></tr>
<tr><td bgcolor="#ffffff">
<h4><font color="#008000">
もし、あなたが ブログのテンプレートに<br>
迷っているのならば、<br>
特別に今、有益な情報を公開しています。<br>
「賢威」 が SEO対策史上<br>
最高級のテンプレートである事は<br>
間違いありません。<br>
しかし、令和に元号が変わった今、<br>
「賢威」を新たに入手する事は不可能なのです。
</font></h4>
</td></tr>
</table>
</center>
</body>
</html>
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
表示結果はこちら
⇒ http://zimaginezz.jp/testlp14.html
中央に寄せたい文章を <th></th> タグで囲み
左寄せに表示したい文章を <td></td> で 囲みます。
しかし から クリック部分までの ２つのタグでレイアウトします。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
表示結果はこちら
⇒ http://zimaginezz.jp/testlp14.html
中央に寄せたい文章を <th></th> タグで囲み
左寄せに表示したい文章を <td></td> で 囲みます。
しかし から クリック部分までの ２つのタグでレイアウトします。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
<html>
<head>
<title>サンプルペーj</title>
</head>
<body bgcolor="#ffdead" background="ib1.jpg" text="#000000"
link="#adff2f" alink="#adff2f" vlink="#adff2f">
<center>
<table border="0" cellpadding="10">
<tr><th bgcolor="#ffffff">
<h1>
<font color="#ff0000">
２０１９年 ３月 ３１日<br>
テンプレート 「賢威」 販売終了<br>
次に来るテンプレートは？
</font></h1>
</th></tr>
<tr><td bgcolor="#ffffff">
<h4><font color="#008000">
もし、あなたが ブログのテンプレートに<br>
迷っているのならば、<br>
特別に今、有益な情報を公開しています。<br>
「賢威」 が SEO対策史上<br>
最高級のテンプレートである事は<br>
間違いありません。<br>
しかし、令和に元号が変わった今、<br>
「賢威」を新たに入手する事は不可能なのです。
</font></h4>
</td></tr>
<tr><th bgcolor="#ffffff">
<h2><font color="#0000ff">
しかし！<br>
</font></h2>
</th></tr>
<tr><td bgcolor="#ffffff">
<h4><font color="#008000">
賢威と劣らず 優れたテンプレートはまだあります。<br>
今はまだ、固定化された情報の中でしか、<br>
見えないものもあるのです。<br>
ブログをこれから構築しようとしている 今<br>
改めて、認識を深く掘り下げてみませんか？<br>
</font></h4>
</td></tr>
<tr><th bgcolor="#ffffff">
<h1><font color="#ff0000">
<a href="ltest20.html">
こちらをクリックして頂き、
</a><br>
さらに有益な情報をお受け取り下さい！<br>
</font></h1>
</th></tr>
</center>
</body>
</html>
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
出来上がりはこちら
⇒ http://zimaginezz.jp/testlp15.html
改善する余地はあるものの、
LPとしては、十分機能できていると思います。
<th> <td> を使い分けることで、
LPとして稼働できる ウェブページが作成できます。
もし機械があれば参考にしてみてください。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
出来上がりはこちら
⇒ http://zimaginezz.jp/testlp15.html
改善する余地はあるものの、
LPとしては、十分機能できていると思います。
<th> <td> を使い分けることで、
LPとして稼働できる ウェブページが作成できます。
もし機械があれば参考にしてみてください。
PR
この記事にコメントする
プロフィール
HN：
hsorimatihh
性別：
非公開