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

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

 

<style type=“text/css”>

</style>

こちらですね。
ですが、少し癖があり、
改行しては無効なのです笑
なのでひたすら詰めて
詰め詰めで書いていかなければいけません。
ですが、この方法しかないです。。。
たぶん、、きっと、、、
というわけですが、
裏ワザは他にもあります。
他のエディタで書いたのをここのブログにコピーペーストすれば
反映されます。ww
FC2ブログの右上の青色のWを押すと
高機能テキストエディタでの編集になり
ここにペーストしたものは大体その形で出てきますw。
もちろんワードなどで作成したテーブルなどもそのまま出てきます。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>

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

コメント

スポンサーリンク
スポンサーリンク
タイトルとURLをコピーしました