記事本文を飾り付けてみよう「（その２８）CSS超入門２」

　今回はCSSを利用して、文字の色を変えてみましょう。これまで、Wiki文法を利用すると、文字の色は変えられないと考えられていましたが、これを利用すれば、Wikiを使っていても、文字の色を変えられるようになりますので、タイトルなどに使ってみると良いかと思います。

　それでは、始めましょう。

※CSSを使用する場合は、記事本文を記入する欄の右上にある「Wiki文法使用」をチェックしておいてください。

色を変えるときの基本的なルールとしては

||<#セルの色の値 style=color:#文字の色の値; ``文章||

という感じになります。（":"コロンと";"セミコロンの違いに注意！！）

テーブルに関して詳しくは
Wiki超入門１３「テーブルを表示させる方法」
Wiki超入門１４「テーブルの大きさと色を変える方法」
Wiki超入門１５「テーブル中の文字の位置を変える方法」
Wiki超入門１６「テーブルのセルを結合する方法」
をご覧ください。

■文字の色を赤に変える（colorが#ff0000の場合）

文法）
||<#ffffff' style=color:#ff0000; ``こんにちは||

※補足　分かりやすくするために、セルの色は白に設定しています。

結果）

こんにちは

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■文字の色を緑に変える（colorが#00ff00の場合）

文法）
||<#ffffff' style=color:#00ff00; ``こんにちは||

結果）

こんにちは

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■文字の色を青に変える（colorが#0000ffの場合）

文法）
||<#ffffff' style=color:#0000ff; ``こんにちは||

結果）

こんにちは

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

CSSを設定する場合、いろいろな設定を組み合わせて利用することが出来ます。

基本的なルールを確認すると、

||<#セルの色の値 style=設定する項目1:設定する値1;設定する項目2:設定する値2;設定する項目3:設定する値3; ``文章||

という風に、";"セミコロンの後に項目を追加していけば、様々な設定を追加することが出来ます。

それでは、前回やった文字の大きさを変えながら、色を変えてみましょう。

■文字の大きさ8px、色を青に変える（font-sizeが8px、colorが#0000ffの場合）

文法）
||<#ffffff' style=font-size:8px;color:#0000ff; ``こんにちは||

結果）

こんにちは

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■背景は赤、文字の大きさ18px、色を白に変える（背景colorが#0000ffの場合）

文法）
||<#ff0000' style=font-size:18px;color:#ffffff; ``こんにちは||

結果）

こんにちは

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

如何でしょうか？
何となく雰囲気はつかめましたでしょうか？
タイトルなどにいろいろと試してみてくださいね。

参考
色見本はこちらをご覧ください。
色見本１
色見本２

また、Yahoo!blogの場合、記事の部分の横幅は560pxに設定されているようです。
テーブルの大きさを設定する時は、横幅の合計をそれ以下にしておいた方が良いでしょう。

[感謝]
この記事は「京都写真日記：Wiki文法を使いこなそう」さんの記事を参考にさせていただきました。
もしも、参考になりましたら「京都写真日記：Wiki文法を使いこなそう」さんのページにて、ボタンをお願いします。
「京都写真日記：Wiki文法を使いこなそう」さんの研究の成果に感謝！！

[☆歓迎☆]
コメント・トラックバック大歓迎！
転載をご希望の方は右下のを押してください。

待ってました！さっそく使わせていただきます。

ポルさん、おはようございます。お待たせしました。どんどん使ってみて下さいね。もう少しいろいろと紹介できそうです。

[-]

i-8jo様、いつもありがとうございます☆これ、すごいですね！！背景と文字の色が変えられるとなると、かなりいい感じになりそうです！ありがとうございます☆

こんにちは 初心者でなかなか覚える事が出来なくて困っております。使わせてください。

昨日 悩んでいた答えがここにありましたぁ！

転載させてください

転載＆傑作させてくださいね＾＾