忍者ブログ
綺麗なランディングページが欲しい! でも、プロに頼むと色々問題が・・。 そんなあなたに、プロと同じとはいえませんが、 ランディングページを 手作りできる情報をお届けします。
[12]  [11]  [10]  [9]  [8]  [7]  [6]  [5]  [4]  [3]  [2
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

前回mではこちら

⇒ http://zimaginezz.jp/testlp8.html


うこれで十分 LPなんじゃないの?

って、思いますよね。 これで完成だいいかと。

でも、ページをよく見てみると、

なんか、全体的に白すぎて、殺風景ですね。^^;

それなので、今回は、ページの背景に色をいれていきます。

ページに色をいれることで、全体の見栄えがよくなって

プロのページに負けなくなると思います。


ページの色は body タグ内で

<body bgcolor="#ffdead" text="#000000" >

と記述します。
リンクの色も調節していますので 現在の body タグは

<body bgcolor="#ffdead" text="#000000" 
link="#adff2f" alink="#adff2f" vlink="#adff2f">

となっています。
色の見本は、トホホのwww入門からみてください

とほほのwww入門 ⇒ 
http://www.tohoho-web.com/wwwcolor.htm


色を付けたページはこちら

⇒ http://zimaginezz.jp/testlp9.html

ページに色をつけただけで、かなりイメージが
変わるとおもいませんか?

しかし、肝心の文章が読みづらい・・・。

ここで、ちょっと文字の背景だけ色を変えようと思ったのですが、
簡単で上手くいく情報がなかったので・・・。


「テーブル」 を使います。 ・x・

テーブルはそれほど難しくないです。
むしろスタイルシートで設定するほうがむずいので
次の記事で書く予定だった テーブルで
文章の背景だけを白に戻します。

<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">
2019年 3月 31日<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>
</font></h1>
</center>
</body>
</html>

********************

上記の赤い部分が テーブルとして追加する部分です。

できあがりはこちら

⇒ http://zimaginezz.jp/testlp10.html

ページの背景は、色だけだはなく、画像を背景として使用することもできます。

<body bgcolor="#ffdead" background="画像ファイル" text="#000000" >

小さい画像だと、パターンで繰り返して表示できます。
大きい画像 (1000ピクセル以上)だと背景に固定の感じで表示できます。

画像を背景にしたページはこちら

⇒ http://zimaginezz.jp/testlp11.html


<body bgcolor="#ffdead" background="tbb1.JPG" text="#000000" 
link="#adff2f" alink="#adff2f" vlink="#adff2f">


それぞれの文字の背景色を変えるには

<span style="background-color:#ffffff;color:#ff0000"></span>

をつかうらしいのですが、私はあまり使っていないので
今後、使う予定の人がいれば、調べてみてください。

また、テーブルタグを使用すると、
中央寄せで表示していた文章が左に移動していますね。

こちらは、次回の記事でまた説明します。

PR
この記事にコメントする
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
プロフィール
HN:
hsorimatihh
性別:
非公開
カテゴリー
忍者ブログ [PR]