Twenty Elevenのカスタマイズ WordPress

CSSグラデーションコード生成エディタGrad2

更新日:

Twenty Elevenのカスタマイズ/その5

CSS3のグラデーション作成機能はかなり便利なのですが、自分でコードを書くとなるとかなり面倒です。ですので、今までは、他人の作ったCSSグラデーションコードをそのまま流用していたのですが、『Grad2-CSS Easy Gradiation Editor-』というCSSグラデーションコード生成サービスを使うと簡単に自分好みのグラデーションが作成できます。

下記のサイトにアクセスします。

http://grad2.ecoloniq.jp/

1)まず、自分の好みに近いグラデーションを選択します。

2)グラデーションスライダーを動かして、グラデーションの微調整をします。

3)『Click to Select this Code!』の文字をクリックします。

4)コードが選択モードになりますので、『Ctrl+C』か、マウスの右クリック→コピーでCSSグラデーションコードをコピーし、CSSファイルに貼り付けます。

たったこれだけの行程で好みのグラデーションコードが作成できるのは、とても便利です。今までは、photoshopやFireworksでグラデーションボタンを作成していたのですが、この、Grad2があれば、画像を使わずにグラデーションボタンが作成できるので、とても重宝すると思います。

それでは、実際にグラデーションボタンを設置してみたいと思います。Twenty Elevenの子テーマとして作成した『Customeise2011』のstyle.cssファイルを開きます。

メニューバーをグラデーションボタンに変更するために、Grad2でCSSグラデーションコードを作成し、『#access{ }』の中に、コピーしたCSSグラデーションコードを貼り付けます。

次に、マウスオーバーしたときに表示する、CSSグラデーションコードも作成し、『#access li:hover > a,#access a:focus { }』の中に、貼り付けます。

/*
Theme Name:customise2011
Author:nakada
Template:twentyeleven
*/

@import url('../twentyeleven/style.css');

#access{
background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #0a0809), color-stop(0.45, #0a0f0b), color-stop(0.16, #6d7673), color-stop(0.00, #afbdc0));
background: -webkit-linear-gradient(top, #afbdc0 0%, #6d7673 16%, #0a0f0b 45%, #0a0809 100%);
background: -moz-linear-gradient(top, #afbdc0 0%, #6d7673 16%, #0a0f0b 45%, #0a0809 100%);
background: -o-linear-gradient(top, #afbdc0 0%, #6d7673 16%, #0a0f0b 45%, #0a0809 100%);
background: -ms-linear-gradient(top, #afbdc0 0%, #6d7673 16%, #0a0f0b 45%, #0a0809 100%);
background: linear-gradient(top, #afbdc0 0%, #6d7673 16%, #0a0f0b 45%, #0a0809 100%);
}
#access li:hover > a,
#access a:focus {
background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #fdfdfd), color-stop(0.74, #e7e8e8), color-stop(0.44, #c7c8ca), color-stop(0.22, #f1f1f1), color-stop(0.00, #d8dada));
background: -webkit-linear-gradient(top, #d8dada 0%, #f1f1f1 22%, #c7c8ca 44%, #e7e8e8 74%, #fdfdfd 100%);
background: -moz-linear-gradient(top, #d8dada 0%, #f1f1f1 22%, #c7c8ca 44%, #e7e8e8 74%, #fdfdfd 100%);
background: -o-linear-gradient(top, #d8dada 0%, #f1f1f1 22%, #c7c8ca 44%, #e7e8e8 74%, #fdfdfd 100%);
background: -ms-linear-gradient(top, #d8dada 0%, #f1f1f1 22%, #c7c8ca 44%, #e7e8e8 74%, #fdfdfd 100%);
background: linear-gradient(top, #d8dada 0%, #f1f1f1 22%, #c7c8ca 44%, #e7e8e8 74%, #fdfdfd 100%);
}

それでは、実際にブラウザで確認してみます。

メニューバーにグラデーションをつけるだけで、ちょっとおしゃれになった気がします。

皆さんも、Grad2をつかって、自分好みのグラデーションを作成して下さい。

本日は以上です。

-Twenty Elevenのカスタマイズ, WordPress

Copyright© WinRoad徒然草 , 2018 All Rights Reserved Powered by AFFINGER5.