タグの中にスタイルシートを直接書かない 1

スタイルシートの属性をタグから切り離し、外に書く。今回はスキンのヘッダに書いて、すべての記事に適用する方法を記します。

スポンサーリンク


ファンブログのみなさま、こんにちは。お元気ですか。

私がアフィリエイトをはじめて今日で10日目。皆さんのご協力があって、クリックで26円もの収益を上げることが出来ました。このペースならきっと秋には予定通り新車が買えそうです!アフィリエイトって本当に儲かりますね!

さて、前回まではスタイルシートの属性をすべて、適用するタグそれぞれに書いてきました。
しかし、tableのような構造をあらわす時に、それでは不効率です。

同じことを何度も書かなくてはいけない。結果としてファイル容量が増える。これまでも文字数制限で何回も記事を分割することになりました。

書き間違いの恐れもあります。全部同じように見せるにはひとつも間違えずに同じ事を書かないといけません。

そして、なによりも大変なのは訂正する時です。
もし変更があれば該当箇所を全て、ひとつも残さずに修正しなければなりません


昨日の記事で私は次のように書いています。


自己レスです。
ヘッダに以下のように書くことで(preタグの中の) br タグを無効に出来ました

<style type=”text/css”>
pre br{display:none;}
</style>

pre 内限定にしないと、ブログ中の全ての br が無効になりレイアウトが変わってしまうので注意。


今日書こうとしているのは正にこの事です。


サイズアップ・ペニス増大商品 商品購入金額の10%
発毛・育毛無料体験 予約1件につき3193円
入会1件につき19163円
高収入在宅チャットレディ 登録・稼動確認後に3500円
ペット保険 申込み1件につき1900円
亀頭増大,早漏,包茎の手術や治療 初回来店で30000円

前回まで使っていた上の表のソースが以下です。

<table style="border:2px solid #fcc;background:#ffc">
    <tr style="height:5em">
        <td  style="border:2px solid #fcc;">
            サイズアップ・ペニス増大商品
        </td>
        <td  style="border:2px solid #fcc;">
            商品購入金額の10%
        </td>
    </tr>
    <tr style="background:#ccf;height:5em">
        <td  style="border:2px solid #fcc;">
            発毛・育毛無料体験
        </td>
        <td  style="border:2px solid #fcc;">
            予約1件につき3193円
            入会1件につき19163円
        </td>
    </tr>
    <tr style="height:5em">
        <td  style="border:2px solid #fcc;">
            高収入在宅チャットレディ
        </td>
        <td  style="border:2px solid #fcc;">
            登録・稼動確認後に3500円
        </td>
    </tr>
    <tr style="background:#ccf;height:5em">
        <td  style="border:2px solid #fcc;">
            ペット保険
        </td>
        <td  style="border:2px solid #fcc;">
            申込み1件につき1900円
        </td>
    </tr>
    <tr style="height:5em">
        <td  style="border:2px solid #fcc;">
            亀頭増大,早漏,包茎の手術や治療
        </td>
        <td  style="border:2px solid #fcc;">
            初回来店で30000円
        </td>
  </tr>
</table>

それぞれのタグに、何回も同じことを書いています。

では、この表の罫線の色を変更するにはどうしたらよいでしょう?
今、border:2px solid #fcc; となっている部分をすべて書き直さなくてはなりません。そんなことはやってられませんね。

ならば、同じ色のところには同じ印をつけておいたらどうでしょう。

<table style="印1background:#ffc">
    <tr style="印2">
        <td  style="印1">
            湘南美容外科・歯科
        </td>
        <td  style="印1">
            1クリックにつき1円
            カウンセリング来院1件につき
            10000円
            各施術料金の8%
        </td>
    </tr>
    <tr style="印3 印2">
        <td  style="印1">
            日払いチャットレディ大募集!!
        </td>
        <td  style="印1">
            1クリックにつき2円
            女性登録1件につき4500円
        </td>
    </tr>
    <tr style="印2">
        <td  style="印1">
            SBC新宿近視クリニック
        </td>
        <td  style="印1">
            1クリックにつき1円
            来院1件につき15000円
        </td>
    </tr>
    <tr style="印3 印2">
        <td  style="印1">
            日本初公開 英国式ドグトレーニング
        </td>
        <td  style="印1">
            商品購入1件につき5000円
        </td>
    </tr>
    <tr style="印2">
        <td  style="印1">
            占い師テレビ
        </td>
        <td  style="印1">
            有料利用後1件につき4000円
        </td>
  </tr>
</table>

それで、印1、印2、印3の色を別に書いて指定しておくんです。
もし、印1の色を変えたければその1ヵ所だけ変更すれば済みます。

後は表示するときにコンピュータがその指定を見て、「えーと、印1は全部ピンクね!」ってやってくれます。

理屈はわかっていただけたでしょうか?
後はそれをどこに、どう書くかですね。スタイルシートでは、もうそのルールは決められています。

タグの中にスタイルシートを直接書かない 2 へつづく


関連コンテンツ

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください