素材の出来栄えはこのような感じです。

黒はわりとぶなんな素材かと思いますが、フォントの色彩を白に指定して素材の上に文字を書くパターンが多いようです。

個人的には、真っ黒よりも、多少青みがかった黒の方がいいような気がするのですが、次回は紺色っぽい黒の素材を作成してみる予定です。

約１年ぶりのブログ更新となってしまいましたが、その間、ホームページを作成するにあたって、気がついたことがあるので、いくつか書いておこうと思います。

まず、画像素材のファイル容量なのですが、ＢＭＰで保存した場合とＰＮＧで保存した場合ではかなりの違いがあるようです。

例えば、上の黒の素材は png で保存しなおしたものですが、bmp のまま保存した場合の 288 KB と比較すると、わずか 3.48 KB になっています。

こちらが bmp でそのまま保存した際のグラデーション素材です。

【bmp ：288KB】

見た目はほとんど変わらないかと思いますが、約８２倍もファイル容量が縮小されるなら、ＰＮＧで保存した方がいいのではないかなと思います。

bmp と jpg、そして png では、ファイル容量が違うということは認識しておりましたが、正直、たいしたかわんなくね？と思ってました。でも、けっこう違ってくるもんですね...。

レンタルサーバーでホームページを作成している場合など、転送量が関係してくるケースもあると思うので、グラデーション素材を保存する際は、なるべく png で保存した方がいいような気がします。

以前にも確か、緑色のグラデーション素材を作ってみたのですが、いまいち明るめだったんで、作り直してみた次第です。

サプリメント系のブログでアフィリエイト収益がどんどん増大中なんで、味をしめてホームページを増産しようと考え中なんです。

やっぱ、健康系のホームページっていうのは、落ち着く感じがいいと思うんですけど、そう考えると目にもやさしく、安らぎのイメージのある緑かなって、、

ぶっちゃけ、広告はきれいなのが多いんで、素材自体は地味なのでいいのではないかなって気がします。

最近、ピカサっていうグーグルの画像編集ツールをダウンロードしたみたんですが、なかなかいい感じなんで、今度はその無料ツールをつかっていろいろ加工してみようと思います。

シルバー素材のできばえとしてはこんな感じです。

急激なグラデーションすると、どうもギャップが激しくなってしまうようで、試しにこのブログの背景に設定してみたのですが、「うーん。」という感じです。

多少まぶしくなってしまう箇所があったりして、またやり直そうと思います。

このブログの背景素材はグラデーションブログなのに、素材ではなく、色彩コードで設定しているので、何か適当な素材を作って背景画像に設定したいと思います。

シルバーの色彩には、スタイリッシュな印象をかもし出す効果があるようで、高級感とかセレブなイメージがあるようです。

都会派のセレブなブログを運営されている方におすすめな背景画像です。

ダークブルーとかディープブルー、もしくはネイビーブルーとよばれる紺色ですが、青の濃い色彩なんで、落ち着いた印象がかもし出されるようです。

ホームページ素材としてはよく使われる系統の色彩ではないかなと思います。

一般的なアンカーテキストは、#ooooff あたりの青いリンクとなっているのが一般的ですが、ホームページ全体も青系統の色彩で統一して、アンカーテキストがよくなじむふいんきにすると、クリック率が向上するようです。

特に、アフィリエイトリンクは青にするというのが統計上ではもっともクリックされる率が高いようです。

グーグルやヤフーの検索結果で使用されているアンカーテキストの色彩は、#oooocc や #0000de など人間の目では判別できないわずかな違いではありますが、同じように見えても微妙に違います。

けれども、基本的には「アンカーテキストは青いリンク」というのははずせないようです。

アンカーテキストは青って決まっちゃってるんで、あとは、背景の色彩との組み合わせを変化させるぐらいしかないと思いますが、その際はやはり紺色などの青系統の背景素材を使用するのが一番ぶなんなのではないかなと思います。

ビジネススーツもたいていは黒とか紺色ですが、紺色は信頼感を与える色彩みたいです。

暖色系の色なので、多少温かみのふいんきを醸し出せるのかもしれません。

オレンジ色のグラデーション素材を作成してみたのですが、これもどうも若干薄い色になってしまったようです。

食べ物関係のグルメブログの背景画像によさそうな気もしますが、今度はもう少し濃い目のグラデーション素材を作ってみようと思います。

R.G.B.的には、ブルーが少なめにして作成するといいようです。

グラデーション素材を作成するときは、最初の色彩をある程度は濃い目の色からはじめるときれいめの素材ができるような気もします。

色彩のなかでも、緑系統のものは安らぎとか、自然とかとても落ち着く色だと思います。

緑は目にもやさしいですし、赤とは補色の関連にあるようですので、長時間滞在するようなホームページやブログに取り入れてみるといいかと思います。

けれども、商品を販売するサイトの場合は、緑色で落ち着いてもらうよりも、衝動買いねらいの赤系統でまとめる方がいいかと思います。

楽天など商品を販売しているサイトではあまり、緑系統の背景素材は使用されていないようです。

おすすめは、自然環境関連のホームページやブログの素材として使用したり、お子さまがアクセスするようなサイトに取り入れておくと安心感が出てくるかと思います。

上のグラデーション素材はもう少し濃い目の緑にしようと思ったのですが、どうもうまくいかなかったようです。また今度作ってみようと思います。

ご使用によっていかなる損害が生じましても、責任の取りようがありませんので、ご自身の判断の上、テンプレートのバックアップなど十分に注意してご利用願います。

当ブログで公開しているグラデーション素材は全て自分で作成しているものではありますが、作成するにあたり無料のソフトウェアツールを使用させていただいております。

ソフトウェアの作者さまには了解を得ていますが、当ブログのコンテンツ内容に関しまして、お気づきの点がございましたら、下記メールアドレスまでご連絡ください。

info@gradation-css.net

両端で色彩が違いますので、スタイルシートでリピートして使用する場合はペイントで反転加工させたりして、まだらにならないように組み込んでみるといいと思います。

背景画像へ素材を組み込んだ際のブログの例

青色グラデーション素材はこちらです。

スタイルシートへの追加方法

background-image: url(素材のＵＲＬ);
background-repeat: repeat;

このrepeatの値を変化させることで、繰り返しの表示方法を変えることができます。

• background-repeat: repeat; 縦と横方向に素材をリピートで表示
• background-repeat: repeat-x; 横方向に背景素材をリピート
• background-repeat: repeat-y; 縦方向への繰り返し表示
• background-repeat: no-repeat; 一度だけの表示で繰り返さない。

グラデーション素材の場合、両端で色彩が違いますので、背景画像をリピートにするとまだらになってしまいます。

ですので、画像加工で反転させて両端を同じ色彩にするとか、一度だけ表示させてから、あとは同じような色彩を表示させるとかの方法がおすすめです。

方法としては、当ホームページのグラデーション素材を、「右クリック - 画像を保存」でダウンロードし、ウィンドウズ付属のペイントで小さめに加工し、９０度回転させます。

すると、だいたいこんな感じになるかと思います。

次にスタイルシートの組み込みたい箇所へ次の文字列を入力します。

background-image: url(素材のＵＲＬ);
background-repeat: repeat-x;

例えば、このホームページのスタイルシートの body の箇所に組み込んだ場合、こんな感じになります。

ちなみに、グラデーション素材自体は小さめのものでも大丈夫みたいですが、どのくらいの大きさが適当なのかとか、画像ファイルは jpg や bmp などどれが適しているのかとか、詳しいことはわかりません。

一般的に、bmp ファイルはあまりホームページ素材としてはよくないようなんで、jpg あたりがいいのではないかなって気もします。

特に、ベクターのグラデーション無料ツールがとても使いやすいです。

R.G.B. グラデーション・コントローラー

自分で作成することができますので、手作り感のあるホームページテンプレートが作成できるのではないかと思います。

自分で素材を作成してみて、それを自分のホームページのスタイルシートに組み込んで使ってみるとよいのではないかなと思います。

グラデーション素材の css スタイルシートへの組み込み方法

そのほか、初心者簡単なペイント加工の仕方や色彩のコード表示方法、画像ファイルの種類などについて更新していく予定です。

特に古いバージョン６あたりのインターネットエクスプローラーでは多少汚く表示されることがあったりです。

最新版のIE8では互換表示機能なども搭載され、多少改善されてはいるようなのですが、実際にサイトを表示してみるとこのブログの場合はこんな感じで多少表示が汚く表示されてしまう部分がどうしても出てくるようです。

でも、ページを更新すると直ります。

IE8バグという程ではないですが、更新ボタンを押すとなぜだか直るので、どうにも対処のしようがないんです。

私はいつもファイアーフォックスを使用していますので、ほとんど気にすることはないのですが、ブラウザの占有率からいうと、IEによるデザインの崩れや見え方の違いはやはり無視することができないものです。

どうしても気になる際は、リピートせずに単一の背景画像で設定すれば修正されるかと思いますので、再度画面をキャプチャーして大きめの画像で再設定するとかすればいいかと思います。

ホームページを作成する際に、ワンポイント的に使用するといいかと思います。

この素材は記事中なので縦型に表示していますが、ペイントなどで角度を変更したり、小さめの素材にしてから使用してみるといいかと思います。

黄金のグラデーション素材の使用例

bmp 画像での素材なんですが、ホームページ用にするにはあまり向いていない画像ファイルみたいです。

画像素材のファイル変換などをしてみてから使用するといいかもしれません。

当ホームページでは次のふたつの無料ツールを使わせてもらってます。

• R.G.B. グラデーション・コントローラー
• パワースポイト

ご使用方法などについては、ダウンロードの際に付属してくるテキストファイルをご覧ください。

おおかまなグラデーション素材の作り方はこのような手順となります。

グラデーション素材の作り方手順

1. グラデーションの始点と終点の色彩をパワースポイトで採取
2. 始点と終点のRGBの値を確認
3. グラデーション・コントローラーで確認したRGBの値を設定
4. bmp 素材として表示させ保存

次は実際の作り方の例をご紹介します。

横方向へのリピート：repeat-x;
縦方向へのリピート：repeat-y;

素材を縦方向へとリピートする場合、デフォルトでは一番左の列に縦方向へと一度だけリピートされるので、左側以外の中央や右側は素材が表示されません。

横方向の場合でも、一番上の列に横方向でリピートされるので、中央やフッターあたりには素材が表示されませんが、ホームページの場合、上下対称となっていなくても気にはなりませんが、左右対称でない場合は、多少アンバランスな感じがしてしまうものです。

そのようなわけで、あまりホームページで素材を縦方向でリピートさせるのは難しい気もしますが、当ブログでも左側はグラデーション素材なのですが、右側は似たような背景色を指定してのスタイルシートとなっています。

全面的にリピートさせてもよいのですが、いまいち出来栄えがよくなかったもので、似たような色彩でごまかした次第です。

そのような意味で、リピート素材を使用する場合、横方向へリピートさせる形で使用するか、もしくは、ホームページで全面的にリピートさせることをおすすめします。

縦横の全部の方向へとリピートさせる場合、素材によってはまだらになってしまったりする場合もありますので、左右反転させてくっつけるとかの工夫をしてみるとよいかと思います。