【Webgradients】知識ゼロでもOK！無料かつ簡単にグラデーションのCSSコードを取得できる神サービス

ブログを運営していると、定期的に自分のサイトを綺麗にしたい！って衝動に駆られますよね。

その中でも「グラデーション」は簡単に見た目を華やかにすることができるので、是非とも使えるようになっておきたいテクニックの１つと言えます。

私自身CSSに関する知識はなにもありませんが、Webgradientsを利用することで、簡単にグラデーションをCSSで設定することができました。

Webgradientsはとても簡単に利用できるので、本記事で利用方法を紹介したいと思います。

Webgradients

WebgradientsはWebで利用できるバリエーションの豊富な、美しいグラデーションカラーのCSSコードを180種類も配布しているWebサービスです。

ワンクリックでするだけでCSSコードがコピーでき、簡単かつ無料で使用することができます。

Webgradientsの使い方

使い方は簡単で、バリエーション豊富なグラデーションカラーからお好みのものを探しだし、右下の「Copy CSS」をクリック。

CSSコードがコピーされるので、お使いのエディターに貼り付けるだけで完了です。（この記事ではWordPressの「Cocoon」を使用した例であげます）

Cocoonでの使用例

Webgradientsでお気に入りのグラデーションを「Copy CSS」で取得した後は、自分のサイトにコードを反映させて、彩りましょう。

ここではCocoonを使用して、ヘッダーにグラデーションを反映させてみます。

１．管理者としてログインして、「カスタマイズ」をクリック。

２．左側にカスタマイズウインドウが出るので、「追加CSS」をクリック。

３．追加CSSエディタが表示されるので、WebgradientsでコピーしたCSSコードを貼り付ける。

私自身、知識が乏しいので上記が正解かわかりませんが「#header.header.cf」の間にWebgradientsから取得したグラデーションCSSを貼り付けることで、ヘッダーの全体色を変更することができました。

最後に右上の「公開」ボタンを押せば、変更完了です。

まとめ

Webgradientsには、豊富なグラデーションパターンのサンプルがあります。

見ているだけでも楽しいですし、何より「Copy CSS」をクリックするだけなのがGOOD。この神サービスを知っているだけで、グラデーションコードの心配はなくなるでしょう。

ザッと見ただけでも上のようなグラデーションが簡単に使用できます。

ぜひWebgradients利用して、自分のサイトを飾ってみてはいかがでしょうか。