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

更新日: 1,172 views






CSSボタンを作ろう

@Manamiです。

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

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

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

WordPressテーマのSTINGER3公式サイト
WordPressテーマのSTINGER3公式サイト

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

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

CSSボタン

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

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

ソーシャルボタン

こんなやつ。

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

SPONSORED LINK

Notepad++をインストール

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

Notepad++ - ダウンロードNotepad++ – ダウンロード

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

SPONSORED LINK

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ボタン

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

SPONSORED LINK

まとめ

CSSボタンを作ろうと思えば色んなサイトで紹介されていてコピペさえすれば作れるのですが、何の値をどういう風に指定して、、という仕組み、要素がわからなければ結局自分のモノとしてカスタマイズができないので、やっぱり自分で作ってみるというのは大切だなあと思いました。

classを呼び出す記述が.○○(ドットなんちゃら)と知りませんでした。
はい、勉強になりましたー。

育児エルゴから新作抱っこひもが出ました。新生児から使える最強の抱っこ紐はこちら

この記事がよかったら
いいね!お願いします
ヽ(=´▽`=)ノ

ままはっくの最新情報を
お届けします

Twitterでまなしばをフォローしよう!

この記事を書いている「まなしば」って誰?

こちらの記事もよく読まれています

今日の人気記事

  • プロフィール画像
    2歳の娘とエンジニアの夫と3人暮らしの88世代のブロガー。産休中からブログ書いてたら、月間60万PVになったので、脱サラしてフリーランスでメディアを作ってます。趣味はPerfume、ポケモン。東京在住の大阪人/同志社
    詳しいプロフィール・お問い合わせはこちら

ままはっくについて

アクセスありがとうございます。
このブログは育児ブロガー・まなしばが、妊娠出産・子育て・WEBサービスについて書いている“ママ術”的ブログです。
よろしくどうぞ!ヽ(=´▽`=)ノ
まなしばの詳しいプロフィール
Twitter | Facebook
プライバシーポリシー

夫と開発したブロガー向けツール

iOSとAndroidアプリ両方を探して紹介できるアプリ紹介ツール:
アプリーチ

TOP