i-8jo.com（Yahoo!blog入門）

ヤフー、ブログとGeoCitiesにアフィエイト広告掲載を表明

気が付くのがおそくなりましたが、ヤフーがアフィリエイト広告掲載を発表していたのですね。

参考
http://internet.watch.impress.co.jp/cda/news/2005/04/21/7375.html

これで、またYahoo!blogが賑やかになりそうですね。
でも、ますます重くなったりして、、、。

背景画像

このページは背景画像をアップする為のページです。

上手くいくかな？

記事本文を飾り付けてみよう「（その２８）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文法を使いこなそう」さんの研究の成果に感謝！！

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