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

       
  •  

  • カテゴリー: HTML5
 この記事は約11分で読めます。
こんにちは、今日はブログの記事内に
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;
           
         &#160
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のみ)

 

       
   
コメントはまだありません

コメントを残す

jsファイルかvue呼び出す
HTML5
Canvasで超簡単に点線・破線を引く方法!JavaScript

こんにちは、 今回はCanvasで点線、破線を簡単に引く方法を ご紹介致します。 なんとリファレンス …

HTML5
Webフォント、Canvasに描写できない。超絶強引だけど描写する方法。

皆さんこんにちは、はせです。今回は、『超強引』にWebフォントがCanvasに描写されない対処法を書 …

HTML5
CSSやJavaScriptが反映されない時の対処法。キャッシュが原因かも。

皆さんこんにちは、はせです。HTMLやPHPその他諸々でCSSやJavaScriptが反映されないと …