2014/12/31更新 1,689 view

WordPressでいい感じのCSSボタンを作ってみよう

CSSボタンを作ろう

育休中で子育てに忙しいものの、空き時間を利用して記事を書いたりしているわけですが、ただ書くわけではなく、いろいろとサイトのカスタマイズをしたくなってきてしまうものです。

私はソースコードなどはあまりわからなくて、いわゆるhtmlタグは少しはわかるものの、＜a＞タグや＜font＞など本当に基本的なものしかわからず、それこそPHP言語やCSSに関してはぜんぜんわからないのです。
しかしサイトをいじっているといろいろとこうしたい！とか出てくるわけで、最近勉強をしはじめました。

というわけで今回はエンジニア修行中の夫から教えてもらい、いい感じのCSSボタンを自分で作ったので、そのコードをつらつらと書いてみます。
ちなみにwordpressで使用しているテーマはstinger3です。

WordPressテーマのSTINGER3公式サイト

無料のテーマで、SEO対策にも強いと言われている有名なテーマです。

そして出来上がったボタンは、こちらです。

CSSボタン

緑のボタンで影をつけることによって「押したくなるようなボタン」をつくり、マウスオーバーで色が光るように変化し、クリックで「押したような感覚になる」ボタンです。
クリックするとこのサイトのトップページが新規ウィンドウで立ち上がります。

これがつくれれば、今流行りのバイラルメディアにあるようなソーシャルボタンを自分で作れるようになりますね！

こんなやつ。

では下記にその手順を示します。

Notepad++をインストール

まず、ソースコードを書くために、ツールをインストールします。（そこからかよって感じですが）
私が使っているのはNotepad++という無料ツールです。

Notepad++ – ダウンロード

これでソースコードを書く準備ができました。
パソコンのローカルで、.htmlファイルと.cssファイルを準備して、そこからソースをがつがつ書いていきます。

html内にコードを書く

まずhtmlファイルの、bodyタグの中に、下記のコードを書きます。


	<body>
		<a href="http://mama-hack.com/" target="_blank" class="af_btn"><strong>CSSボタン</strong></a>
	</body>

classで呼び出すcssの名前を設定し、（上記だとaf_btnと設定、ここは各自自分で好きな文字を設定してください）aタグで囲って、このサイトのトップページに飛ぶという設定。

下記はhead内タグで、ブラウザ上で動かすために記述しました。
[link rel]でスタイルシートを呼び出してね、という指令。場所はローカルにあったのでcss.cssというファイルを呼び出して、タイプはテキスト・CSSという呼び出し。

stinger内にはこれは記述されているので、不要でしたが、参考までに。

	<head>
		<link rel="stylesheet" href="./css.css" type="text/css" />
	</head>

CSSファイルにコードを書く

次はCSSファイル。下記のコードをstyle.cssとsmart.cssのファイル内に記述します。
両方のcssファイルに記述しないと、パソコンとスマホ両方で動かないですからね。


.af_btn  {
	display: block;
	background-color: #3FECA3;
	width: 100px;
	height: 18px;
	border-radius: 10px;
	text-align: center;
	box-shadow: 0px 7px #3cb371;
	position: relative;
	text-decoration: none;
	color: #ffffff;
	padding: 10px;
	font-size: 110%;
	}

.af_btn:hover {
	background-color: #3FFCA3;
	box-shadow: 0px 7px #6cb371;
}

.af_btn:active {
	background-color: #3FFCA3;
	box-shadow: 0px 0px #6cb371;
	top: 10px;

	
}

.（ドット）の記述でclassを呼び出すことができます。
つまりここでは、さきほどhtml内で指定した、af_btnを呼び出します。

少し解説すると、、
background-colorはボタンの色
border-radiusはボタンの角の丸みを表現
box-shadowで影を表現。pxの値はひとつめが右、ふたつめが下
今回は下だけに影を指定したいので、ひとつめは0pxで指定。

.af_btn:hoverの部分は
マウスオーバーしたときの動作を記述。
今回は光らせる感じにしたいので、明るい色を指定しました。

.af_btn:activeは、ボタンがクリックされたときの動作の指定。
クリックされた時に影をなくし、完全にボタンが押されるような動きにしたいので、box-shadow: 0px 0px　で指定。
この場合、ひとつめのpxの値が右へどれだけうごくかの値、ふたつめの値が下へどれだけ動くかの値。
動かしたくないので、0pxで指定。
topは、このボタンがどれだけ上から動くかという指定で、上から10px動くという指定に。
先に指定した、shadowの部分とかぶらせることによって、ボタンの押された感覚を表現します。

これで完成！！

CSSボタン

みなさんも自分で色を変えたりしてみてくださいね。