新着記事

2006年09月29日

Webページの色情報を抽出するツール

 HOMEアフィリエイトツール ⇒ この記事 


 
らぶさんの記事 「サイトや写真の色をカラーコード化する便利ツール」
http://sweetlovexx.seesaa.net/article/24168415.html


で色情報抽出ツールが紹介されていたので使ってみます。

色情報抽出ツール
色情報抽出ツール
I Like Your Colors
http://redalt.com/Tools/I+Like+Your+Colors


↑のサイトでURLを入力するだけです。

すると、↓のように色一覧が抽出されます。

色抽出結果

●自分のサイトの色が知りたい

●他の人のサイトの色が知りたい

●画像で指定されている部分の色が知りたい



なんて時は、かなり使えるツールになると思います♪

スタイルシートをイチイチチェックするの、ダルイですもんね^^


色を知ってどう使うのか?

色を知ると、

自分のサイトを、自分の好きなようにカスタマイズできるようになります。



カラーコード表
http://www.shoshinsha.com/hp/color/color.html


↑で、色の組み合わせや、バランスを考えてから


ブログの

デザイン→スタイルシート 

でサイトの色を簡単に変えることができます。


スタイルシートで

サイトの変えたい部分の色

color: #○○○○○○; ←色の指定
background: #○○○○○○; ←背景の色の指定


を自分の好きな色に変えて、

スタイルシートを変更すれば完成です。

(プレビューしただけでは、サイトに反映されないので
1つ1つ変えながらプレビューして見てみると面白いですよ♪)

スタイルシートの説明

/*ページ全体*/
body {
margin: 0;
padding: 0;
text-align: center;
font: 12px Verdana, sans-serif;
background: #fff;/*■ブログ全体の背景多*/
}

/*コンテンツ(ブログ)全体*/
#container {
margin: 0 auto;
width: 777px;
color: #5D5D5D;/*■コンテンツ全体の文字の多*/
font: 12px Verdana, sans-serif;
background: #fff;/*■コンテンツ全体の背景多*/
border-left: 1px solid #c00;/*■コンテンツを囲う左側枠線*/
border-right: 1px solid #c00;/*■コンテンツを囲う右側枠線*/
}

/*ブログ全体のリンク設定*/
a {
color: #c30;
text-decoration: none;
}

a:hover {
color: #c93;
}

/*ブログ名*/
h1 {
margin: 0;
padding: 20px 0 8px 0;
font: bold 20px Verdana;
}

/*ブログ名のリンク設定*/
h1 a {
color: #fff;
}

h1 a:hover {
position: relative; top: 1px; left: 2px;
color: #48D1CC;
}

/*記事日付*/
h2 {
padding: 0;
text-align: left;
font-weight: bold;
}

/*記事タイトル*/
h3 {
padding: 25px 0 15px 0;
font: 12px bold Verdana, sans-serif;
}

/*記事タイトルのリンク設定*/
h3 a {
color: #c30;
}

h3 a:hover {
color: #c93;
}

/*ブログ名(ヘッダー)部分全体*/
#banner {
margin: 0;
padding: 10 0 0 20px;
text-align: left;
height: 120px;
background: #c00;/*■ブログ名の背景多*/
border-bottom: solid 3px #ccc;/*■ブログ名の背景多の下部(薄グレー部分)*/
}

/*ブログの説明文*/
.description {
padding: 0 10px 0 0;
color: #fff;
font-weight: bold;
font: 10px
}

/*個別記事上部に表示されるページナビ部分*/
.navi {
margin: 10px 0px;
text-align: center;
}

/*記事が表示されるメイン部分*/
#content {
margin: 0px 0;
float: left;
width: 511px;
}

/*記事全体*/
.blog {
padding: 0;
margin: 0 0 0 10px;
text-align: left;
}

/*日付を除く記事全体*/
.blogbody {
margin: 0 0 10px 0;
padding: 0 20px;
border: 3px double #ccc;/*■記事全体を囲う二重線*/
}

/*記事日付2*/
.date {
clear: left;
margin: 0;
color: #fff;
padding: 20px 0 5px 0;
font: bold 10px Verdana, sans-serif;
}

/*記事タイトル*/
.title {
margin: 0;
font: bold 12px Verdana, sans-serif;
}


/*記事タイトルのリンク設定*/
.title a {
color: #c30;
}

/*記事本文*/
.text {
padding: 0;
margin: 0;
line-height: 1.8em;
}

/*記事下部の投稿者・時間・コメントなどの部分*/
.posted {
margin: 0 0 5px 0;
padding: 35px 0 20px 0;
text-align: right;
font: 10px Verdana, sans-serif;
}

/*記事下部の投稿者・時間・コメントなどの部分のリンク設定*/
.posted a {
font-weight: bold;
}

/*右サイドバー全体*/
#links {
float: left;
width: 225px;
margin: 20px 0 0 16px;
padding: 0 0 10px 0;
text-align: left;
font: 12px/1.8 Verdana, sans-serif;
}

/*カレンダー全体*/
#calendar {
margin: 10px 0 30px 15px;
padding: 3px;
width: 195px;
font-size: 12px;
background: #fff;/*■カレンダー全体の背景多*/
border: 1px solid #C6C6C6;
}

/*カレンダー表*/
#calendar table {
width: 100%;
background: #fff;/*■カレンダー表の背景多*/

/*カレンダーの曜日部分*/
}
#calendar th {
font-weight: bold;
background: #CEDA60;/*■カレンダー曜日の背景多*/
border-right: 1px solid #fff;
border-left: 1px solid #fff;
}

/*カレンダーの年月部分*/
.calendarhead {
padding: 4px 0;
color: #666;
background: #fff;/*■カレンダー年月の背景多*/
font: bold 12px Verdana, sans-serif;
}

/*カレンダーの日付部分*/
.calendarday {
margin: 0 0 10px 0;
padding: 3px;
color: #5D5D5D;
font: 10px Verdana, sans-serif;
}

/*カレンダーの日付部分のリンク設定*/
.calendarday a {
font-weight: bold;
}

/*サイドバーの見出し部分(カテゴリ名など)*/
.sidetitle {
margin: 10px 0 0 0;
padding: 0 0 4px 0;
color: #666;
text-align: left;
font: bold 12px Verdana, sans-serif;
border-bottom: 3px double #ccc;/*■サイドバー見出し下部の二重線*/
}

/*サイドバーの本文(カテゴリなどの中身)*/
.side {
margin: 0 0 10px 0;
padding: 5px 0 10px 0;
text-align: left;
font: 10px/1.8em Verdana, sans-serif;
}

/*サイドバーの本文(カテゴリなどの中身)のリンク設定*/
.side a {
font-size: 12px;
}

/*タグクラウドの設定*/
.side-tag {
margin: 0 0 10px 0;
padding: 5px 0 10px 0px;
text-align:left;
font: 10px Verdana, sans-serif;
}

/*タグクラウドのリンク設定*/
.side-tag a{
font-size:12px;
}

/*記事検索の入力欄*/
input {
max-width: 200px;
background: #fff;/*■入力欄の背景多*/
border: 1px solid #959595;/*■入力欄の枠線*/
}

/*記事検索の[検索]ボタン*/
.input-submit {
margin: 0 5px 0 0;
color: #636D00;/*■検索の文字の多*/
border: 1px solid #000;/*■検索ボタンの枠線*/
background: #CEDA60;/*■検索ボタンの背景多*/
}


/*ブログ下部のseesaaバナー*/
.powered {
padding: 20px 0;
text-align: center;
}

.powered table{
margin: 0px auto;
text-align: center;
}

/*RSS設定*/
.syndicate {
margin: 20px 0;
text-align: center;
font-size: 10px;
}

/*コメント欄*/
#comments {
margin: 25px 0 30px 21px;
padding: 10px 20px;
text-align: left;
font: 12px Verdana, sans-serif;
border: 1px solid #ccc;/*■コメント欄全体を囲うの枠線*/
}

/*コメントフォームの設定*/
#comments form {
margin: 0;
padding: 0;
}

/*コメント記入欄*/
textarea {
width: 300px;
margin: 0 0 5px 0;
border: 1px solid #959595;
background: #fff;
}

/*コメント欄の上部*/
.comments-head {
margin: 10px 0 20px;
padding: 0;
font-weight: bold;
}

/*コメント本文*/
.comments-body {
margin: 0;
padding: 0 0 10px 0;
}

/*コメントの投稿者部分*/
.comments-post {
padding: 3px 10px 20px;
text-align: right;
font-size: 10px;
border-top: 3px double #ccc;/*■コメント投稿者上部の二重線*/
}

/*トラックバック部分*/
#trackback {
margin: 25px 0 30px 21px;
padding: 15px;
border: 1px solid #ccc;
text-align: left;
font: 12px/1.5 Verdana, sans-serif;
}

/*トラックバック内の線の設定*/
hr {
border-style: double none none;
border-top-width: 3px;
border-top-color: #ccc;/*■トラックバック内の二重線*/
height: 3px;
}

/*フッター*/
#footer {
clear: left;
}

/*引用の設定*/
blockquote{
margin: 20px 10px;
padding: 5px;
border-left: 3px double #c00;/*引用部分左側の二重線*/
}

/*Blogtimesの設定*/
.blogtimes{
margin: 0 0 10px 0;
padding: 5px 0 10px 0;
text-align: center;
}

/*-----ダイエット表示部分------------------------*/

/*ダイエット内容全体部分*/
#diet-container{
margin: 0 0 10px 0;
padding: 10px 5px 0 5px;
}

/*目標体重・残り・体重・体脂肪率の部分*/
.diet-content{
padding: 0 0 0 10px;
}

/*1回目測定・2回目測定の部分*/
.diet-title{
margin: 5px 0;
padding: 0px 10px 0px 5px;
font-weight: bold;
border-top: 1px solid #ccc;
border-left: 5px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}

/*食事内容全体*/
#diet-foods{
padding: 5px 0 0 0;
border-bottom: 1px solid #ccc;
}

/*朝・昼・夜食の部分*/
.food-title{
margin: 5px 0 0 0;
padding: 10px 0 0 0;
width: 20%;
clear: left;
float: left;
border-top: 1px solid #ccc;
}

/*朝・昼・夜食に食べたものを表示する部分*/
.food-content{
margin: 5px 0 0 0;
padding: 10px 0;
width: 100%;
border-top: 1px solid #ccc;
}


/*-----タグクラウドの表示設定------------------------*/

.tag-word{
margin: 20px 0px 0px 0px;
line-height: 1.4em;
}
.tag{
margin: 30px 0 0 21px;
position: relative;
}
#tag_cloud{
padding: 10px;
text-align: left;
position: relative;
border: 3px double #ccc;
}
#tag_cloud a {
padding: 2px;
}
.tag-title{
font: bold 16px;
text-align:left;
}
.tag-body{
margin: 10px 0px;
padding: 10px 0px 0px 0px;
position: relative;
}
.tag-service{
padding: 0px 0px 5px 0px;
clear: left;
text-align: left;
font-weight: bold;
border-bottom: 1px solid #ccc;
position: relative;
}
.tag-search{
margin: 0 0 10px 0;
padding: 5px 0px;
text-align: right;
font-weight: bold;
position: relative;
}
.tag-article{
padding: 0px 10px 10px 10px;
text-align: left;
position: relative;
}
.tag-article-title{
padding: 0px 0px 5px 0px;
text-align: left;
font-weight: bold;
position: relative;
}
.tag-article-posted{
font-weight: normal;
position: relative;
}
.tag-article-summary{
padding: 0px 10px;
line-height: 1.4em;
position: relative;
}
.tag-more{
margin: 10px 0px;
text-align: right;
clear: left;
position: relative;
}
.tag-photos{
margin: 10px 8px;
float: left;
position: relative;
width: 140px;
height: 200px;
}
.tag-photos-title{
line-height: 1.4em;
padding: 5px 0px;
text-align: left;
position: relative;
}
.tag-audios{
margin: 5px;
position: relative;
}
.tag-audios-title{
text-align: left;
font-weight: bold;
padding: 0px 0px 5px 0px;
position: relative;
}
.tag-audios-posted{
font-weight: normal;
position: relative;
}
.tag-videos{
margin: 10px 8px;
float: left;
position: relative;
}
.tag-videos-title{
padding: 5px 0px;
line-height: 1.4em;
text-align: left;
position: relative;
}
.tag-navi{
margin:10px 0px;
clear: left;
text-align: center;
position: relative;
}




ではでは。
 
→アフィリエイトツール一覧
 
 

 

 

今週の売れ筋CDランキングトップ30


この記事へのコメント
ガイさん、こちらからも失礼します。

これ、すごく使えます。アドセンスやら
色々・・頂いていきますね^^ありがとう!
Posted by お気楽に真剣に--目指すは自立主婦!Oh!kei at 2006年09月29日 17:43
ガイさん、こんばんは。
お世話になります、おすしです。

この記事もブックマーク決定です!(笑)

明日もいい日になりますように”凸”
Posted by おすし at 2006年09月29日 23:51
■>オーケイさん

毎度どうも♪

そうそう

これ、

アドセンスにも使えますよね^^

自分も今後、活用していくと思います♪


■おすしさん

毎度どうも♪

またまたブックマークどうも^^

簡単に書こうと思ってたら、

長すぎる記事になってしまいました(笑)

カレンダーとか、ダイエットの部分とか

このサイトは、消しちゃってるんですけどね^^
Posted by ガイ at 2006年09月30日 08:37
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:


ブログランキング・にほんブログ村へ
※記事を読んでいないと確認できるコメントは軽く削除します。
※宣伝目的のコメントの場合、スパムフィルターを掛けるので
二度とシーサーブログ全体にコメントできなくなります。
 
リンクシェア アフィリエイト紹介プログラム
この記事へのトラックバック

Yahoo!検索

  • ウェブ全体を検索
  • このサイト内を検索
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。