文字をデザインする

このサイトについて サイトマップ


アフィリエイトで稼ぐのは厳しい ⇒ 速習HTML ⇒ 文字をデザインする


スタイルシートを使って文字装飾を行います。

  この文字をクリックするとサンプルダウンロード出来ます。


文字コンテンツを入力する ← | → トップメニューを作成する


ここからスタイルシートが登場します。
名前はstyle-css.cssです。 メモ帳で入力して保存して下さい。


● 先ず、参照するスタイルシート名を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 rel="stylesheet" type="text/css" href="style-css.css" media="screen,tv" />
  ↑この1行を追加します。スタイルシート名は緑色の部分です。

 </head>



● スタイルシートに入力します。

装飾する文字は 「見出し」 「本文」×2箇所 「コピーライト」 です。

スタイルシートに以下を記述します。入力が終わったらstyle-css.cssを上書き保存して下さい。

h1   { font-size: 1.5em;  ← 文字の大きさ
      font-family: Verdana, Helvetica, sans-serif;  ← 文字の種類
      color: #000000;  ← 文字の色
      margin-bottom: 0; } ← 下境界からの距離

p     { font-size: 0.75em; } ← 文字の大きさ

address { font-size: 0.75em; ← 文字の大きさ
       font-style: normal; } ← 文字のスタイル

左端のh1、p、addressは、html中のこのタグ全てに適用される事を表します。
pタグはhtml中に何回も使われますが、この例では全てのpタグに適用されます。




@ デザイン設定のルール

  ルール

 ・セレクタはデザイン設定の適用先を表します。

 ・デザイン設定は{ } で囲む。
 ・デザイン設定の終了マークは ; 
 ・プロパティは後ろに : を付け、その後に 値 を記述する。
 ・デザイン設定を複数記述する場合には区切り記号として半角ブランクを使う。
 
セレクタ、プロパティ、値 や { 、} の前後に半角ブランクはいくつ有ってもかまいません。
又、1つ1つ改行を何個入れても構いません。
通常は見やすくする為、半角ブランク、改行を多用します。


デザイン設定の種類、プロパティ・値は、膨大な数になる為、説明し切れません。
第3章のリファレンス、本で調べて下さい。


A 例題の説明


 ・font-size 文字の大きさを指定します。
  em(割合) px(ピクセル数、ドット数)や、small、largeを値で指定します。
  デフォルトは16pxです。

 ・font-family 文字の書体を第1候補から、第n候補まで指定します。
  MS Pゴシック、MS P明朝 などを値で指定します。

 ・color 文字色を指定します。
  値は色名称や16進数の色コードで指定します。
  red、green、cyanなどの色名称、色コードは#RRGGBBで指定します。
  # : 16進数の宣言
  RR : RGBのを0〜255の数値を16進数で表現したもの
  GG : RGBのを0〜255の数値を16進数で表現したもの
  BB : RGBのを0〜255の数値を16進数で表現したもの

 ・margin-bottom 下にあるコンテンツ境界と自コンテンツの境界までの距離を指定。(略)

 ・font-style 文字のスタイル指定です。値の代表は
  italic イタリック体
  oblique 斜体
  normal 通常の形


  
サンプルの表示イメージです。まだまだこれからですね。

  ルール





関連記事


もしも「今からアフィリエイトをやろう、稼ぐ。」 と考えているのでしたら、悪い事言いません。
本格アフィリエイトを断念して趣味+αにするか、本格的に勉強をするかのどちらかにした方が良いです。
アフィリエイトに必要なもの、事。それほど多くは有りません。
インターネットに接続されたパソコン、ASPに登録申請、ドメイン取得、レンタルサーバ、ブログ登録&投稿、サイト作成&サーバアップ、検索エンジンインデックス、地道なSEO。
ASPにアフィリエイト登録して初めてアフィリエイトが可能になります。
各ASPともアフィリエイト登録申請時にサイトかブログを提示して審査を受ける必要があります。
アフィリエイトサイトの同一ページに異なるASPの広告を並列同時掲載することもできます。
何とかサイトを作成してレンタルサーバにアップしても、そのままだと大海の孤島で誰も存在を知りません。
すぐ検索エンジンに登録して下さい。キャッシュとかインデックスとか言ってます。
携帯やスマートフォンなど、その時の最先端向きアフィリ教材もありますが、スタリも早くなります。
時代やツールが変っても、商材選定〜サイト構築などの取組み方や思考は変りません。
その辺りを詳しく解説しているものを選定しました。