WordPressのLPボタン作成用の備忘録がてら。
意外とまとまった記事がなくて。
完成したアニメーションボタンはコチラ↓
（スマホからだとpushしないと確認できません）
某WPテーマの○ミングバードみたいなアニメーションが実装できます。
さあレッツチャレンジ
目次
Hover.cssの設置から活用までの手順
最初にHover.cssをダウンロードして、ZIPファイルを解凍。
そこからCSSファイルのみを取り出し、FTPサーバーのテーマフォルダ直下などへアップロード。
このZIPファイルから取り出したCSSフォルダを・・
FTPサーバーのテーマフォルダに直接アップロード！
/サイト名.com/public_html/wp-content/themes/テーマフォルダ（このフォルダの直下にアップロード）
本サイトテーマと同じ「Affinger4」の場合は子テーマではなく、親テーマ直下にアップロードする必要があります。
Affinger4の場合
子テーマのheader.phpに不具合が確認され、2017年1/8時点は廃止されてます。
なので親テーマの場所に直接アップロードしましょう。
（今後 子テーマのheader.phpが復活することを祈ります。）
手順１：Hover.cssをheadタグへ設置しよう！
Hover.cssのCSSファイルをFTPサーバーにアップロードしたら、次にCSSファイルをサイトに呼び込むためにhead.phpに以下テキストを追記。
head.phpに追記するテキスト
| 1 2 3 | <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のアニメーションを自分のサイトに呼ぶこむ準備が出来ました。
Affinger4はheadタグの設置場所が特殊です。
ダッシュボード ＞ 外観 ＞ header.phpの以下場所に設置してください。
header.phpの・・↓
<head prefix・・・">の後に挿入します↓
Affinger4のheadタグへ※サーチコンソールを登録したい時は、上記の場所へ「サーチコンソールのHTMLタグ」を挿入することで反映できます。
※Affinger4はダッシュボードからAffinger4管理画面でもサーチコンソールが登録出来ます。管理画面から登録の方が断然設定しやすいです。
次にCSSボタン（アニメーションさせたい箱）をstyle.cssに書いておきます。
手順２：style.cssにcssボタンの構文を書き込む
HTMLとstyle.cssに、ボタンを実装の構文を書き込みます。
CSSボタン１
Hover.cssさんのサイトからそのまま引用したやつ↓
HTML呼び出し（テキスト）
| 1 | <a href="#" class="button">Checkout</a> |
style.css（CSS貼り付け）
| 1 | .button { display: inline-block; padding: 1em; background-color: #79BD9A; text-decoration: none; color: white; } |
CSSボタン２
シンプルに。simple
HTML呼び出し（テキスト）
| 1 | <a href="#" class="button">テストボタン</a> |
style.css（CSS貼り付け）
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | .button { background: none repeat scroll 0 0 #fff; border: 1px solid #777; border-radius: 3px; color: #333; cursor: pointer; display: inline-block; font-weight: bold; line-height: normal; margin-bottom: 20px; padding: 6px 12px; text-decoration: none; } |
※出典元：http://nelog.jp/hover-css-v2#
テキストだけでもアニメーション化出来る。
CSSボタンをstyle.cssに設定しなくても、テキストだけのアニメーション化も可能です。
ただ個人的には「成約」を謳うなら「ボタン化」したほうが押しやすいから、ペルソナに優しいんじゃないかな〜と。
それに見た目カッコいいから自分のサイトに愛着もてるし。
これかなり大事。
次ページで実際にCSSボタンをアニメーション化していきます！
