mikanママのタグをつかって

日記小技

2003.6.30の日記より

日記の背景の編集及び画像のカラーの調べ方

日記を書くときのワタシのやり方の一つ・ご紹介しますぅ
日記に使う画像が決まるとレイアウト考えます
もちろんメモ帳で編集です～メモ帳の使い方はこちら

の画像を使って左下に一つだけ配置したい！！
タグは
background-image:url(http://～～～);background-repeat:no-repeat;background-position:bottom left
をつかいますが・・・余白が・・↓
出来れば画像と同じ色を使いたいですね。

画像に使っている色を調べる方法が
ペイントで出来るんですよ
ペイントの出し方は「スタート」→「プログラム」→「アクセサリー」→「ペイント」
色を調べたい画像をだします。
次にスポイトで画像の中で調べたいカラーの上でクリック
一瞬左のカラーが変わると思います。
ツールバーの（色）をクリックして「色の編集」→「色の作成」↓

クリックしたカラーが表示されたでしょうか～～～
違った場所をクリックした時はやり直しね
赤枠で示してあるように(R)(G)(U)の脇に数値が書いてあります
この数値をメモして下さいね
この数値をＨＰで使うカラーコードに変換をします
ペイントは閉じます。

今度は電卓を使いますよ・・・
「スタート」→「プログラム」→「アクセサリー」→「電卓」↓
表示→関数電卓にします

そしてメモッた（R）の数値を電卓で入れます(１０進)
右上に数字が入りましたら(１６進)に円を入れます
二桁の数字が出ましたか↓～～～これも控えておきます
（G）、（U）の数値を入れてそれぞれの１６進の値を出します。。

Ｒ199はc7、Ｇ178はb2、Ｕ154は9a
＃c7b29a・・・並べるとこうなります
これを背景のカラーに使います、タグは
background-color:#c7b29a;で入れてみますと

この様にキレイに背景の色が入りました(*^_^*)
最初は面倒な事もあると思いますがお試しくださいね
この様にして画像に使っているカラーを枠に使ったり
スクロールバーに使ったりしていますぅ～～

参考タグです <CENTER style="width:500px;height:300px;border-style:double;border-color:#504139;border-width:8px;background-color:#ffffff;background-image:url(http://画像.gif);background-repeat:no-repeat;background-position:bottom left"> ここに文字を</center>

便利なソフトのお紹介

FE - Color Palette 　を使ってカラーの編集をしております

ペイントでカラーの「RGB」を出して
電卓を使うのは一つの手段ですが
手っ取り早くこのソフトでカラーコード
HTML形式（＃FFFFFF）を出します

FE - Color Palette
リンク文字に背景色を入れ
下線を消す

<a style="background-color:pink;text-decoration:none;" href="" >FE - Color Palette</a>

FE - Color Palette
文字に背景色をいれる

<font style="color:#000000 ;background-color: pink">Color</font>

Font style は重宝しますね（カラーの変わりに画像を入れました）

<font style="color:#ff0000;font-size:25pt ; background-image:url(画像.gif) ">Font style</font>

ジャンル別一覧