ブログの杜 (Yahoo!ブログ作成講座)

ぶろぐのもり HTMLやWikiでYahoo!ブログをデザインアップして楽しく編集しよう!

全体表示

[ リスト ]

テーブルの要素の代用として使える「||」をスタイルシートで
背景と文字の色と文字の大きさを変更する事が出来ます。

Yahoo!がWikiの仕様を変更したためコチラも改正いたしました

背景色を変える

背景色のみの変えるにはRGBの16進数を6桁で表現します。

赤色
橙色
黄色
緑色
水色
青色
紫色

サンプル

||<#FF9999' '``赤色||
||<#FFCC99' '``橙色||
||<#FFFF99' '``黄色||
||<#99FF99' '``緑色||
||<#99FFFF' '``水色||
||<#99CCFF' '``青色||
||<#CC99FF' '``紫色||
<色彩についての補足>
RGBの16進数とは「なんですか」と思われるので説明
RGBのRとはレッド
RGBのGとはグリーン
RGBのBとはブルー
16進数の16とは「0〜F」までの色彩の桁数

例えば「#FF9999」となっている部分は色を変えることが出来る要素で
これをいじる事によって色彩の変更が可能です。
これには決まりごとがあって、値は「0〜F」のみ
また、色を決める法則は「赤・緑・青」となっています。

色の基本の法則は以下のようになっています。「色の三原則」というやつですね。
赤なら「FF0000」
緑なら「00FF00」
青なら「0000FF」

この法則を用いて絵の具を混ぜるような感じで
紫色を出したいとすると「赤と青」を混ぜればいいのです。
「FF00FF」←これで紫色が出せるようになります。
また黒・灰・白色を出したい時は
「000000」=黒・「777777」=灰・「FFFFFF」=白
上記のようにすれば」いいのです。
これをうまく利用してグラデーションも可能です。


背景色と文字色を変える

背景色を変えるにはRGBの16進数を6桁で表現
さらに文字の色を変えるにはスタイルシートのfont;colorでRGBの16進数を6桁で表現

赤色の背景と字
橙色の背景と字
黄色の背景と字
緑色の背景と字
水色の背景と字
青色の背景と字
紫色の背景と字

サンプル

||<#FF9999' style='font;color:#ff0000'``赤色の背景と字||
||<#FFCC99' style='font;color:#ff8800'``橙色の背景と字||
||<#FFFF99' style='font;color:#ffff00'``黄色の背景と字||
||<#99FF99' style='font;color:#00ff00'``緑色の背景と字||
||<#99FFFF' style='font;color:#0099ff'``水色の背景と字||
||<#99CCFF' style='font;color:#0000ff'``青色の背景と字||
||<#CC99FF' style='font;color:#ff00ff'``紫色の背景と字||

背景色と文字色と文字の大きさを変える(虹色にチャレンジ)

背景色を変えるにはRGBの16進数を6桁で表現
さらに文字の色を変えるにはスタイルシートのfont;colorでRGBの16進数を6桁で表現
そして、文字の大きさはピクセルで大きさを変えることが出来ます。

赤色の背景と字と大きさ
橙色の背景と字と大きさ
黄色の背景と字と大きさ
緑色の背景と字と大きさ
水色の背景と字と大きさ
青色の背景と字と大きさ
紫色の背景と字と大きさ

サンプル

||<#FF9999' style='font-size:16px;color:#ff0000'``赤色の背景と字と大きさ||
||<#FFCC99' style='font-size:18px;color:#ff8800'``橙色の背景と字と大きさ||
||<#FFFF99' style='font-size:20px;color:#ffff00'``黄色の背景と字と大きさ||
||<#99FF99' style='font-size:22px;color:#00ff00'``緑色の背景と字と大きさ||
||<#99FFFF' style='font-size:24px;color:#0099ff'``水色の背景と字と大きさ||
||<#99CCFF' style='font-size:26px;color:#0000ff'``青色の背景と字と大きさ||
||<#CC99FF' style='font-size:28px;color:#ff00ff'``紫色の背景と字と大きさ||



背景色と横幅を変える

横幅の変え方は、これまで通りにスタイルシートでwidthで横幅指定
さらに、どのくらいの横幅の大きさをピクセルで指定する
このYahoo!ブログでは最大でも560pxですので、それ以上の大きさは無意味です。

赤色と横幅560px

橙色と横幅500px

黄色と横幅440px

緑色と横幅380px

水色と横幅320px

青色と横幅560px

紫色と横幅560px


サンプル

||<#FF9999' style='width:560px'``赤色と横幅560px||

||<#FFCC99' style='width:500px'``橙色と横幅500px||

||<#FFFF99' style='width:440px'``黄色と横幅440px||

||<#99FF99' style='width:380px'``緑色と横幅380px||

||<#99FFFF' style='width:320px'``水色と横幅320px||

||<#99CCFF' style='width:260px'``青色と横幅560px||

||<#CC99FF' style='width:200px'``紫色と横幅560px||



背景色と縦幅を変える

横幅の変え方は、これまで通りにスタイルシートでheightで縦幅指定
さらに、どのくらいの縦幅の大きさをピクセルで指定する
このYahoo!ブログでの縦幅の最大は無制限ですが、無意味に大きくしないのが無難

赤色と縦幅80px
橙色と縦幅80px
黄色と縦幅80px
緑色と縦幅80px
水色と縦幅80px
青色と縦幅80px
紫色と縦幅80px

サンプル

||<#FF9999' style='height:80px'``赤色と縦幅80px||
||<#FFCC99' style='height:80px'``橙色と縦幅80px||
||<#FFFF99' style='height:80px'``黄色と縦幅80px||
||<#99FF99' style='height:80px'``緑色と縦幅80px||
||<#99FFFF' style='height:80px'``水色と縦幅80px||
||<#99CCFF' style='height:80px'``青色と縦幅80px||
||<#CC99FF' style='height:80px'``紫色と縦幅80px||



背景色と横幅と縦幅を変える

これまでの応用をするとサンプルのように表現できます。

赤色と横幅560pxと縦幅100px

サンプル

||<#FF9999' style='width:560px;height:100px'``赤色と横幅560pxと縦幅100px||


背景色と文字の色・横幅と縦幅を変える

これまでの応用をするとサンプルのように表現できます。

赤色と横幅560pxと縦幅100px

サンプル

||<#FF9999' style='font;color:#ff0000;width:560px;height:100px'``赤色と横幅560pxと縦幅100px||

閉じる コメント(17)

顔アイコン

こんにちわ!初めまして!!ブログ最近始めた者です。突然ですいません。実は画面全体の背景色を黒にして黒背景の写真もUPしようと頑張っているのですが HTMLタグを色々テストしましたが出来ません。私が思うにココは文字装飾関係しかタグが使用出来ないように思いますがどうなんでしょうか? これからもページーの改新 期待しております。失礼しました

2006/2/12(日) 午後 4:43 [ pei*n*77 ]

顔アイコン

広範囲の背景色変更のwikiをさがしてて今日ようやくコチラに辿り着きました。サンプルをテストさせて頂ましたが惨敗です。wikiにチェックを入れるだけでは反映されないのですか?やはりwiki用サーバーやソフトをDLしないとダメなのでしょうか?お忙しいとは存知ますが回答なりレス頂けると幸いです

2006/2/12(日) 午後 4:43 [ pei*n*77 ]

顔アイコン

色を付けたテーブルの中に画像を入れたいということでしょうか? この方法でしたらHTMLでは無理ですので、Wikiを使います。 ソースのページを作りましたので、http://blogs.yahoo.co.jp/kagemusyamk1/25365540.html を参考に あと、特殊なソフトもいりませんので、ご安心を

2006/2/12(日) 午後 6:03 影武者

顔アイコン

転載させてくださいね(=´ェ`=)

2006/4/3(月) 午後 10:34 mik*n36**

転載させてください☆

2006/6/3(土) 午後 6:07 hay*ru*02

これも転載させてくださぁ〜い(^^♪

2006/10/18(水) 午前 9:34 りりぃ♪

顔アイコン

転載させて貰います。

2007/2/3(土) 午後 1:09 kobe

転載させていただきます。

2007/2/18(日) 午後 10:38 ゆっこ

転載させて頂きます♥

2007/5/5(土) 午後 1:03 まりな

顔アイコン

淡色で綺麗です。転載させていただきました。

2007/5/5(土) 午後 9:31 waku2

顔アイコン

こんにちは〜。お勉強したいと思いますので転載させて下さいね。ポチ!

2007/6/3(日) 午後 2:21 [ nonchalant117 ]

顔アイコン

白にすることってできますか??
背景は白のままで!

2007/11/3(土) 午後 10:36 [ - ]

顔アイコン

おかげさまでテーブル組めました。ありがとうございます♪
ポチ&トラバさせていただきますね。

2008/1/15(火) 午前 4:01 [ - ]

顔アイコン

はじめまして!
これから色々勉強したいので転載させてください(^_-)-☆

2008/1/27(日) 午前 11:40 [ ラムちゃんおばちゃん ]

はじめまして♪
勉強させていただきたいので転載させてください。

2008/5/3(土) 午後 5:57 [ - ]

顔アイコン

転載させてください

2009/1/18(日) 午後 4:08 [ まゆ@旧:翔波 ]

顔アイコン

転写させてくださいね。

2009/12/11(金) 午後 0:55 チャイナ

開く トラックバック(1)


.
影武者
影武者
男性 / O型
人気度
Yahoo!ブログヘルプ - ブログ人気度について
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30

過去の記事一覧

Yahoo!からのお知らせ

検索 検索

ブログバナー

よしもとブログランキング

もっと見る

プライバシー -  利用規約 -  メディアステートメント -  ガイドライン -  順守事項 -  ご意見・ご要望 -  ヘルプ・お問い合わせ

Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

みんなの更新記事