ページ背景色サンプル

ここでは、ブログの背景色を変えるサンプルです。

背景色タイプ0001

サンプル

ソースコード
<style type="text/css"> .bgg0001{ /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fb83fa+0,ffffff+19,ffffff+100 */ background: #fb83fa; /* Old browsers */ background: -moz-linear-gradient(left, #fb83fa 0%, #ffffff 19%, #ffffff 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #fb83fa 0%,#ffffff 19%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #fb83fa 0%,#ffffff 19%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fb83fa', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */ } </style> <div class="bgg0001" style="margin-top: 2px; padding: 60px;"> ここにブログ記事を書く </div>

背景色タイプ0002

サンプル

ソースコード
<style type="text/css"> .bgg0002{ /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fb83fa+0,ffffff+10,ffffff+100 */ background: #fb83fa; /* Old browsers */ background: -moz-linear-gradient(left, #fb83fa 0%, #ffffff 10%, #ffffff 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #fb83fa 0%,#ffffff 10%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #fb83fa 0%,#ffffff 10%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fb83fa', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */ } </style> <div class="bgg0002" style="margin-top: 2px; padding: 60px;"> ここにブログ記事を書く </div>

背景色タイプ0003

サンプル

ソースコード
<style type="text/css"> .bgg0003{ /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3a93e8+0,ffffff+15,ffffff+100 */ background: #3a93e8; /* Old browsers */ background: -moz-linear-gradient(left, #3a93e8 0%, #ffffff 15%, #ffffff 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #3a93e8 0%,#ffffff 15%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #3a93e8 0%,#ffffff 15%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a93e8', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */ } </style> <div class="bgg0003" style="margin-top: 2px; padding: 60px;"> ここにブログ記事を書く </div>

背景色タイプ0004

サンプル

ソースコード
<style type="text/css"> .bgg0004{ /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e5e55b+0,ffffff+15,ffffff+100 */ background: #e5e55b; /* Old browsers */ background: -moz-linear-gradient(left, #e5e55b 0%, #ffffff 15%, #ffffff 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #e5e55b 0%,#ffffff 15%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #e5e55b 0%,#ffffff 15%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e55b', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */ } </style> <div class="bgg0004" style="margin-top: 2px; padding: 60px;"> ここにブログ記事を書く </div>

背景色タイプ0005

サンプル

ソースコード
<style type="text/css"> .bgg0005{ /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cc0000+0,ffffff+9,ffffff+100 */ background: #cc0000; /* Old browsers */ background: -moz-linear-gradient(left, #cc0000 0%, #ffffff 9%, #ffffff 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #cc0000 0%,#ffffff 9%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #cc0000 0%,#ffffff 9%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc0000', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */ } </style> <div class="bgg0005" style="margin-top: 2px; padding: 60px;"> ここにブログ記事を書く </div>

背景色タイプ0006

サンプル

ソースコード
<style type="text/css"> .bgg0006{ /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#8fc800+0,ffffff+10,ffffff+100 */ background: #8fc800; /* Old browsers */ background: -moz-linear-gradient(left, #8fc800 0%, #ffffff 10%, #ffffff 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #8fc800 0%,#ffffff 10%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #8fc800 0%,#ffffff 10%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fc800', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */ } </style> <div class="bgg0006" style="margin-top: 2px; padding: 60px;"> ここにブログ記事を書く </div>

背景色タイプ0007

サンプル

ソースコード
<style type="text/css"> .bgg0007{ /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fb83fa+0,ffffff+10,ffffff+90,fb83fa+100 */ background: #fb83fa; /* Old browsers */ background: -moz-linear-gradient(left, #fb83fa 0%, #ffffff 10%, #ffffff 90%, #fb83fa 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #fb83fa 0%,#ffffff 10%,#ffffff 90%,#fb83fa 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #fb83fa 0%,#ffffff 10%,#ffffff 90%,#fb83fa 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fb83fa', endColorstr='#fb83fa',GradientType=1 ); /* IE6-9 */ } </style> <div class="bgg0007" style="margin-top: 2px; padding: 60px;"> ここにブログ記事を書く </div>

背景色タイプ0008

サンプル

ソースコード
<style type="text/css"> .bgg0008{ /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cc0000+0,ffffff+10,ffffff+90,cc0000+100 */ background: #cc0000; /* Old browsers */ background: -moz-linear-gradient(left, #cc0000 0%, #ffffff 10%, #ffffff 90%, #cc0000 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #cc0000 0%,#ffffff 10%,#ffffff 90%,#cc0000 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #cc0000 0%,#ffffff 10%,#ffffff 90%,#cc0000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc0000', endColorstr='#cc0000',GradientType=1 ); /* IE6-9 */ } </style> <div class="bgg0008" style="margin-top: 2px; padding: 60px;"> ここにブログ記事を書く </div>

背景色タイプ0009

サンプル

ソースコード
<style type="text/css"> .bgg0009{ /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffff70+0,ffffff+10,ffffff+90,ffff70+100 */ background: #ffff70; /* Old browsers */ background: -moz-linear-gradient(left, #ffff70 0%, #ffffff 10%, #ffffff 90%, #ffff70 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #ffff70 0%,#ffffff 10%,#ffffff 90%,#ffff70 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #ffff70 0%,#ffffff 10%,#ffffff 90%,#ffff70 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff70', endColorstr='#ffff70',GradientType=1 ); /* IE6-9 */ } </style> <div class="bgg0009" style="margin-top: 2px; padding: 60px;"> ここにブログ記事を書く </div>

背景色タイプ0010

サンプル

ソースコード
<style type="text/css"> .bgg0010{ /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6bff6b+0,ffffff+10,ffffff+90,6bff6b+100 */ background: #6bff6b; /* Old browsers */ background: -moz-linear-gradient(left, #6bff6b 0%, #ffffff 10%, #ffffff 90%, #6bff6b 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #6bff6b 0%,#ffffff 10%,#ffffff 90%,#6bff6b 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #6bff6b 0%,#ffffff 10%,#ffffff 90%,#6bff6b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6bff6b', endColorstr='#6bff6b',GradientType=1 ); /* IE6-9 */ } </style> <div class="bgg0010" style="margin-top: 2px; padding: 60px;"> ここにブログ記事を書く </div>

背景色タイプ0011

サンプル

ソースコード
<style type="text/css"> .bgg0011{ /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6bffff+0,ffffff+10,ffffff+90,6bffff+100 */ background: #6bffff; /* Old browsers */ background: -moz-linear-gradient(left, #6bffff 0%, #ffffff 10%, #ffffff 90%, #6bffff 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #6bffff 0%,#ffffff 10%,#ffffff 90%,#6bffff 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #6bffff 0%,#ffffff 10%,#ffffff 90%,#6bffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6bffff', endColorstr='#6bffff',GradientType=1 ); /* IE6-9 */ } </style> <div class="bgg0011" style="margin-top: 2px; padding: 60px;"> ここにブログ記事を書く </div>

背景色タイプ0012

サンプル

ソースコード
<style type="text/css"> .bgg0012{ /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff89ff+0,fff4ff+10,fff4ff+90,ff89ff+100 */ background: #ff89ff; /* Old browsers */ background: -moz-linear-gradient(left, #ff89ff 0%, #fff4ff 10%, #fff4ff 90%, #ff89ff 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #ff89ff 0%,#fff4ff 10%,#fff4ff 90%,#ff89ff 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #ff89ff 0%,#fff4ff 10%,#fff4ff 90%,#ff89ff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff89ff', endColorstr='#ff89ff',GradientType=1 ); /* IE6-9 */ } </style> <div class="bgg0012" style="margin-top: 2px; padding: 60px;"> ここにブログ記事を書く </div>

背景色タイプ0013

サンプル

ソースコード
<style type="text/css"> <div> </div> .bgg0013{ /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7cffff+0,fff4ff+10,fff4ff+90,7cffff+100 */ background: #7cffff; /* Old browsers */ background: -moz-linear-gradient(left, #7cffff 0%, #fff4ff 10%, #fff4ff 90%, #7cffff 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #7cffff 0%,#fff4ff 10%,#fff4ff 90%,#7cffff 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #7cffff 0%,#fff4ff 10%,#fff4ff 90%,#7cffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7cffff', endColorstr='#7cffff',GradientType=1 ); /* IE6-9 */ } </style> <div class="bgg0013" style="margin-top: 2px; padding: 60px;"> ここにブログ記事を書く </div>

背景色タイプ0014

サンプル

ソースコード
<style type="text/css"> .bgg0014{ /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffff9b+0,ffffef+10,ffffef+90,ffff9b+100 */ background: #ffff9b; /* Old browsers */ background: -moz-linear-gradient(left, #ffff9b 0%, #ffffef 10%, #ffffef 90%, #ffff9b 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #ffff9b 0%,#ffffef 10%,#ffffef 90%,#ffff9b 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #ffff9b 0%,#ffffef 10%,#ffffef 90%,#ffff9b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff9b', endColorstr='#ffff9b',GradientType=1 ); /* IE6-9 */ } </style> <div class="bgg0014" style="margin-top: 2px; padding: 60px;"> ここにブログ記事を書く </div>

背景色タイプ0015

サンプル

ソースコード
<style type="text/css"> .bgg0015{ /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#99ffff+0,e8ffff+10,e8ffff+90,99ffff+100 */ background: #99ffff; /* Old browsers */ background: -moz-linear-gradient(left, #99ffff 0%, #e8ffff 10%, #e8ffff 90%, #99ffff 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #99ffff 0%,#e8ffff 10%,#e8ffff 90%,#99ffff 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #99ffff 0%,#e8ffff 10%,#e8ffff 90%,#99ffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99ffff', endColorstr='#99ffff',GradientType=1 ); /* IE6-9 */ } </style> <div class="bgg0015" style="margin-top: 2px; padding: 60px;"> ここにブログ記事を書く </div>

背景色タイプ0016

サンプル

ソースコード
<style type="text/css"> .bgg0016{ /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#82ff82+0,e0ffe0+10,e0ffe0+90,82ff82+100 */ background: #82ff82; /* Old browsers */ background: -moz-linear-gradient(left, #82ff82 0%, #e0ffe0 10%, #e0ffe0 90%, #82ff82 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #82ff82 0%,#e0ffe0 10%,#e0ffe0 90%,#82ff82 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #82ff82 0%,#e0ffe0 10%,#e0ffe0 90%,#82ff82 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82ff82', endColorstr='#82ff82',GradientType=1 ); /* IE6-9 */ } </style> <div class="bgg0016" style="margin-top: 2px; padding: 60px;"> ここにブログ記事を書く </div>

背景色タイプ0017

サンプル

ソースコード
<style type="text/css"> .bgg0017{ /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff5454+0,ffe8e8+10,ffe8e8+90,ff5454+100 */ background: #ff5454; /* Old browsers */ background: -moz-linear-gradient(left, #ff5454 0%, #ffe8e8 10%, #ffe8e8 90%, #ff5454 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #ff5454 0%,#ffe8e8 10%,#ffe8e8 90%,#ff5454 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #ff5454 0%,#ffe8e8 10%,#ffe8e8 90%,#ff5454 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5454', endColorstr='#ff5454',GradientType=1 ); /* IE6-9 */ } </style> <div class="bgg0017" style="margin-top: 2px; padding: 60px;"> ここにブログ記事を書く </div>

背景色タイプ0018

サンプル

ソースコード
<style type="text/css"> .bgg0018{ /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e1eff+0,efefff+10,efefff+90,1e1eff+100 */ background: #1e1eff; /* Old browsers */ background: -moz-linear-gradient(left, #1e1eff 0%, #efefff 10%, #efefff 90%, #1e1eff 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #1e1eff 0%,#efefff 10%,#efefff 90%,#1e1eff 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #1e1eff 0%,#efefff 10%,#efefff 90%,#1e1eff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e1eff', endColorstr='#1e1eff',GradientType=1 ); /* IE6-9 */ } </style> <div class="bgg0018"> ここにブログ記事を書く </div>

背景色タイプ0019

サンプル

ソースコード
<style type="text/css"> .bgg0019{ background: #5452ea; /* Old browsers */ background: -moz-linear-gradient(left, #5452ea 0%, #ffffff 10%, #ffffff 90%, #5452ea 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #5452ea 0%,#ffffff 10%,#ffffff 90%,#5452ea 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #5452ea 0%,#ffffff 10%,#ffffff 90%,#5452ea 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5452ea', endColorstr='#5452ea',GradientType=1 ); /* IE6-9 */ } </style> <div class="bgg0019"> ここにブログ記事を書く </div>

使い方補足
私は、こんな使い方をしました。
<div class="bgg0018" style="margin-top: 2px; padding: 60px;">
文章
</div>
これは、上からいくつ下から開始するかと、左右をいくつ開けて使うかを指定しています。
margin-top: 2px; 上から2ピクセル
padding: 60px;上下左右60ピクセル
の指定となります。これで左右の色に文字が重なりすぎて、読みにくくなるのを防ぎます。