HTMLにCSSボタン設置して呼び出しするぞ！

WordPressにCSSボタンを作成して設置する方法をまとめました。

完成したアニメーションボタンはコチラ↓

テストボタン

OYAKUN

某WPテーマの○ミングバードみたいな、アニメーションが実装できます。

Hover.cssの設置から活用までの手順

最初にHover.cssをダウンロードして、ZIPファイルを解凍。

そこからCSSファイルのみを取り出し、FTPサーバーのテーマフォルダ直下などへアップロード。

このZIPファイルから取り出したCSSフォルダを...

FTPサーバーのテーマフォルダに直接アップロード！

本サイトテーマと同じ「AFFINGER4」の場合は子テーマではなく、親テーマ直下にアップロードする必要があります。

手順1. Hover.cssをheadタグへ設置する

Hover.cssのCSSファイルをFTPサーバーにアップロードしたら、次にCSSファイルをサイトに呼び込むためにhead.phpに以下テキストを追記。

<link href="<?php echo get_template_directory_uri() ?>/css/hover-min.css" rel="stylesheet" media="all">
<! Font Awesomeを利用したい場合は以下テキストを挿入>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all">

これでHover.cssのアニメーションを自分のサイトに呼ぶこむ準備が出来ました。

次にCSSボタン（アニメーションさせたい箱）をstyle.cssに書いておきます。

手順2. style.cssにcssボタンの構文を書き込む

CSSボタンSample1

HTMLとstyle.cssに、ボタンを実装の構文を書き込みます。

HTMLファイルに書き込む内容は以下のとおりです。↓

<a href="#" class="button">Checkout</a>

Style.cssに書き込む内容は以下のとおりです↓

.button { 
display: inline-block; 
padding: 1em; 
background-color: #79BD9A; 
text-decoration: none; 
color: white; 
}

CSSボタンSample2

シンプルなCSSボタンの例。

HTMLファイルに書き込む内容は以下のとおりです。↓

<a href="#" class="button">テストボタン</a>

Style.cssに書き込む内容は以下のとおりです↓

.button {
background: none repeat scroll 0 0 #fff;
border: 1px solid #777;
border-radius: 3px;
color: #333;
cursor: pointer;
display: inline-block;
font-weight: huto;
line-height: normal;
margin-bottom: 20px;
padding: 6px 12px;
text-decoration: none;
}

※出典元：http://nelog.jp/hover-css-v2#

他CSSボタン作成の参照URL

CSSボタン作成のときに参照にしたいURLを共有します。

• CSS3 Button Generator
• CSS Button Generator: Create HTML and CSS Button Styles
• Button Maker

テキストをアニメーションにして動かす方法

CSSボタンをstyle.cssに設定しなくても、テキストだけのアニメーション化も可能です。

ただ個人的には「成約」を狙うなら「ボタン化」したほうが押しやすいから、読者に優しいんじゃないかな〜と。

それに見た目カッコいいから自分のサイトに愛着もてるし。これかなり大事っすよね...

投稿記事にCSSボタン（アニメーションボタン）を実装する

実際に投稿記事の中にCSSボタンを呼び出し、Hover.cssアニメーションを反映させます。

呼び出しの構文は先のCSSボタン作成セクションにて。先にお見せした構文と同じなんですけどね。

HTMLファイルに書き込む内容は以下のとおりです。↓

<a href="#" class="button">Checkout</a>

投稿する記事にボタン挿入する手順

投稿する記事にCSSボタンを挿入するには、

といった手順で、style.cssに作ったボタンデザインが呼び出せます。

ただ構文の「どこがどの指示になっているのか分からない」ので、次のセクションで詳細をPDFに写したものをご参照ください。（自分のために作った）

HTML構文にアニメショーン指示する

HTMLに

を指示している内訳をPDFにまとめて（自分用の）メモ。

ポイントはボタンの指示の後に半角スペースでアニメーション指示を入れること。

構文の内容（class属性）を理解すれば好きなアニメーションを実装出来ますよね。

アニメーションの指示テキストを以下載せておきます。

アニメーションの指示一覧（の一部）

以下一例です。

<a href="#" class="button hvr-grow">Grow</a>
<a href="#" class="button hvr-shrink">Shrink</a>
<a href="#" class="button hvr-pulse">Pulse</a>
<a href="#" class="button hvr-pulse-grow">Pulse Grow</a>
<a href="#" class="button hvr-pulse-shrink">Pulse Shrink</a>
<a href="#" class="button hvr-push">Push</a>
<a href="#" class="button hvr-pop">Pop</a>
<a href="#" class="button hvr-bounce-in">Bounce In</a>
<a href="#" class="button hvr-bounce-out">Bounce Out</a>
<a href="#" class="button hvr-rotate">Rotate</a>
<a href="#" class="button hvr-grow-rotate">Grow Rotate</a>
<a href="#" class="button hvr-float">Float</a>
<a href="#" class="button hvr-sink">Sink</a>
<a href="#" class="button hvr-bob">Bob</a>
<a href="#" class="button hvr-hang">Hang</a>
<a href="#" class="button hvr-skew">Skew</a>
<a href="#" class="button hvr-skew-forward">Skew Forward</a>
<a href="#" class="button hvr-skew-backward">Skew Backward</a>
<a href="#" class="button hvr-wobble-horizontal">Wobble Horizontal</a>
<a href="#" class="button hvr-wobble-vertical">Wobble Vertical</a>
<a href="#" class="button hvr-wobble-to-bottom-right">Wobble To Bottom Right</a>
<a href="#" class="button hvr-wobble-to-top-right">Wobble To Top Right</a>
<a href="#" class="button hvr-wobble-top">Wobble Top</a>
<a href="#" class="button hvr-wobble-bottom">Wobble Bottom</a>
<a href="#" class="button hvr-wobble-skew">Wobble Skew</a>
<a href="#" class="button hvr-buzz">Buzz</a>
<a href="#" class="button hvr-buzz-out">Buzz Out</a>

寝ログさんを参考させていただきました。

ありがとうございますm(_ _)m

関連記事WordPressテーマ【Simplicity】を初めて使ってみたお

まとめ：CSSボタン実装してCV率を上げちゃおう！

HTMLにCSSボタン呼び出しについてメモでした。

そもそもマウスホバーしないとアニメーションしない。ということはスマホだと...

ていうのはさておき、LPボタンがアニメーションするのってやっぱ楽しいですね！

OYAKUN

この後、本記事の方法ではボタンアニメーションが上手く動作しなかったので別記事を書きました↓

関連記事： CSSボタンをアニメーション！CSShakeなら簡単にカスタマイズ出来るよ！
関連記事： table of contents plusが中央表示されないからやったこと
関連記事： WordPressでアイキャッチが設定できない原因は表示オプションのチェック漏れ