2009年3月：グラデーション無料ＨＰ素材

紺色の落ち着いた感じのグラデーション素材を作成してみました。

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

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

一般的なアンカーテキストは、#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 あたりがいいのではないかなって気もします。

グラデーション素材の作成ツールには、Adobe の Photoshop やマイクロソフトの Expression などがありますが、無料で作成できるソフトウェアも公開されています。

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

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

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

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

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

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

グラデーション素材を背景画像として利用する際、ブラウザによって見え方の違いが生じてきてしまいます。

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

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

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

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

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

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