便利なCSS3のジェネレーターは沢山ありますね。
しかし、今回紹介するCSS3ジェネレータは国産！
国産というのはけっこう珍しいです。
グラデーションは線形・円形を選べますし、ポイントを増やすもの自由自在です。
また、ほとんどのプロパティをドラッグアンドドロップで直感的に変更できます。
ただ、text-shadow box-shadow が手入力なので注意が必要です。
使い方をまとめたPDFも用意しましたので、よかったらダウンロードしてください。
目次
Grad3 の使い方
- サイト名：
- Grad3
- サイトリンク：
- [browser-shot width=”600″ url=”http://grad3.ecoloniq.jp/”]
まず、ロゴの下にリアルタイムでデザインを確認できるプレビューがあります。
ボタンのデザインや、反映したいサイトのデザインによっては、白系の背景の方が作りやすいこともあるでしょう。プレビューの背景色を変えることもできます。
ページの下には色別のサンプルが選べるようになっているので、欲しいデザインに近いものを選んで、カスタマイズするという流れがオススメです。
一番のキモになるのが、グラデーションの作り方ですね。
これがこのジェネレータの一番のポイントでしょう。
・ドラッグでバーを移動
・バーをダブルクリックでカラーピッカーが出現
・何もない所をクリックでバーの追加
・バーを左にドラッグでバーを削除
という使い方です。
後は
・CSSをグラデだけにするか、ボタン全部のCSSを表示するか
・線形・円形の切替
・背景やアイコンの表示
といったものをまとめてみましたので、PDFでどうぞ。
こんなのです。
「続きを読む」に反映
さて、次にTwenty Fourteenの『続きを読む→』に反映してみます。
文言を変更したい場合はテーマファイルのPHPを編集しなくてはいけませんが、CSSの上書きだけでデザインの変更は可能です。
まず、どんな構造になっているのか。
右クリック ＞ 要素を検証（google chromeの場合）で見てみます。
<p><a href="http:/xxxxxxx" class="more-link">続きを読む<span class="meta-nav">→</span></a></p>
となっているので、
a.more-link {
/* ボタンデザインCSSを追加 */
}
a.more-link span.meta-nav {
display:none;
}
というCSSを追加すればOK！
追加は子テーマなら子テーマのCSS、拡張CSS等のプラグインを利用しているのならそちらに追加しましょう。
Grad3からCSSをコピー
Grad3はCSSをグラデのみか、ボタン全てか選ぶことができるので、まずは全て持ってきます。
display: inline-block; font-size: 14px; font-weight: normal; color: #ffffff; text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.8); letter-spacing: 0; border: none; box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.4), 1px 1px 3px rgba(0, 0, 0, 0.4); border-radius: 6px; text-decoration: none; padding: 15px 40px; font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #24890d), color-stop(0.00, #76ca63)); background: -webkit-linear-gradient(#76ca63, #24890d); background: -moz-linear-gradient(#76ca63, #24890d); background: -o-linear-gradient(#76ca63, #24890d); background: -ms-linear-gradient(#76ca63, #24890d); background: linear-gradient(#76ca63, #24890d);
そして、font-familyやfont-size、displayは適宜変更しましょう。
僕はこんな感じにしてみました。
a.more-link {
display: block;
width:20%;
margin:0 auto;
color: #ffffff;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.8);
box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.4), 1px 1px 3px rgba(0, 0, 0, 0.4);
border-radius: 6px;
text-decoration: none;
text-align:center;
padding: 10px 20px;
background:#24890d;/*IE用に追加*/
background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #24890d), color-stop(0.00, #76ca63));
background: -webkit-linear-gradient(#76ca63, #24890d);
background: -moz-linear-gradient(#76ca63, #24890d);
background: -o-linear-gradient(#76ca63, #24890d);
background: -ms-linear-gradient(#76ca63, #24890d);
background: linear-gradient(#76ca63, #24890d);
}
a.more-link span.meta-nav {
display:none;
}
オンマウスについては、
a.more-link:hover {
/* ホバー時のプロパティを追加 */
}
で追加しましょう。
またGrad3からでもいいのですが、せっかくなので他のジェネレーターも紹介します。
opacity(透明度)を追加できるジェネレーターです。
バナー画像なんかに適用すると、一枚分の画像を作るだけで済むので便利です。
※IE8以降対応なので案件によっては使えません！
- サイト名：
- IE 対応 クロスブラウザ CSS Opacity sample
- サイトリンク：
- [browser-shot width=”600″ url=”http://weblibrary.s224.xrea.com/sample/ie-css-opcity.html”]
スライダをドラッグして、ソースをコピペするだけでOK!かんたーん！！
欲しいのはopacity関連だけなのでその部分だけ頂いてきます。
a.more-link:hover {
filter: alpha(opacity=70);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=70)";
-moz-opacity: 0.7;
opacity: 0.7;
}
完成！！
