FC2ブログの記事の中にCSSをまとめて書く方法！

こんにちは、今日はブログの記事内に
CSSを書く方法を書いていきます。
ブログを書いていると
大体、記事の編集の機能を使って
カラーとか大きさとか指定してしまいますよね。
それでいい方はいいのですが、
なにか機能では足りないなってときは
自分でスタイルを変えたいですよね。
しかし、CSSを文字一つ一つ指定していくのは
とても手間で非推奨でありぐちゃぐちゃしていて気持ち悪いです。
そして、この記事の書く欄はあくまでhtml のbody内なので
CSSを書くにはテンプレートの設定の下でCSSを指定できます。
が、、、ブログのテンプレもそちらで行っているので
もしもぐちゃぐちゃになり下手に改造してしまったら
もしかすると、ブログ全体がめちゃくちゃになる恐れがあるので
やめたほうがいいですよね。
ということで今回
body内にcssを書くということで

<style type=“text/css”>

</style>

こちらですね。
ですが、少し癖があり、
改行しては無効なのです笑
なのでひたすら詰めて
詰め詰めで書いていかなければいけません。
ですが、この方法しかないです。。。
たぶん、、きっと、、、
というわけですが、
裏ワザは他にもあります。
他のエディタで書いたのをここのブログにコピーペーストすれば
反映されます。ｗｗ
FC２ブログの右上の青色のWを押すと
高機能テキストエディタでの編集になり
ここにペーストしたものは大体その形で出てきますｗ。
もちろんワードなどで作成したテーブルなどもそのまま出てきます。ｗ
僕の場合、Visual Studio Codeなどで一度書いて
コピーペーストで来ます。
どうやって？ってなりますが、
HTMLで表示して
それをコピーしてペーストするだけで反映されるなんて
神、、、
しかし、FC2ブログのもう一度青色のWを押し
通常に戻すともうそこには平和な世界は広がっていません。。。
例えばこの下のテーブルも作ってコピーペーストで貼ったものです。
反映されていますよね？？

番号	名前	一言
1	山田太郎	がんばります。
2	山田花子	よろしくおねがいします。

<table border=“1”>
    <tr>
        <th>番号</th>
        <th>名前</th>
        <th>一言</th>
    </tr>
    <tr>
        <td>1</td>
        <td>山田太郎</td>
        <td>がんばります。</td>
    </tr>
    <tr>
        <td>2</td>
        <td>山田花子</td>
        <td>よろしくおねがいします。</td>
    </tr>
</table>

もちろんこの上記のHTMLもこの機能のままコピーペーストしたものです。

番号	名前	性別	一言
1	山田太郎	男	がんばります。
2	山田花子	女	よろしくお願いします。
3	はせ	男	こんばんは。
4	くっぴー	女	こんにちは。

これは

<div>
<table border=“1”>
    <thead>
        <tr>
            <th class=“a”>番号</th>
            <th>名前</th>
            <th class=“b”>性別</th>
            <th>一言</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class=“a”>1</td>
            <td>山田太郎</td>
            <td class=“b”>男</td>
            <td>がんばります。</td>
        </tr>
        <tr>
            <td class=“a”>2</td>
            <td>山田花子</td>
            <td class=“b”>女</td>
            <td>よろしくお願いします。</td>
        </>tr>
  　　　<tr>
            <td class=“a”>3</td>
            <td>はせ</td>
            <td class=“b”>男</td>
            <td>こんばんは。</td>
        </tr>
          <tr>
            <td class=“a”>4</td>
            <td>くっぴー</td>
            <td class=“b”>女</td>
            <td>こんにちは。</td>
        </tr>
 </tbody>
</table>
</div>
<style type=“text/css”>
tbody
    tr:nth-child(odd){
        background-color:blanchedalmond;
    }
    tbody tr:hover{
        background-color:#f2f2f2;
        text-shadow:1px 1px  black;
        font-weight: bold;
    }
        div>table{
            border-collapse:collapse;
            border:none;
            
          
;  height:auto;
            text-align: center;
            table-layout: fixed;
            width:380px
        }
        .a{
            width:3em;
        }
        .b{
            width: 3em;
        }
        thead{
            background-color:#c4ccfd;
            color:white;
        }
</style>

これです。
汚くてすみません。。。
一応これをFC２で書くとキャプlチャ
こんな感じです。。。
グハって感じですね。。
最後にまとめますと、、
一つ一つに指定していったほうがいいかもしれません。。。ｗ
これはこの記事を書いてから気づいたのですが、、、
書いたCSSがこの記事の編集外の
下の記事の設定でも反映されてしまいましたｗ
きちんとクラスやIdなどで指定すれば大丈夫だと思いますが、、
[追記]
　
今回CSSをまとめて書きましたが、
一応反映は、されましたが、
tableのクラス指定などが不十分だったため
ブログのテンプレもすこしめちゃくちゃになってしまったため
CSSは削除してあります。
なので
ソースコードと
そのサンプルのテーブルには
異なります。(詳しくはソースコードはHTML+CSS、サンプルのテーブルはHTMLのみ）