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

2017年1月8日

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

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

テストボタン

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

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

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

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

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

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

/サイト名.com/public_html/wp-content/themes/テーマフォルダ(このフォルダの直下にアップロード)

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

AFFINGERの場合

子テーマのheader.phpに不具合が確認され、2017年1/8時点は上記方法は廃止されてます。

なので親テーマの場所に直接アップロードしましょう。(今後 子テーマのheader.phpが復活することを祈ります。)

手順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のアニメーションを自分のサイトに呼ぶこむ準備が出来ました。

AFFINGER4はheadタグの設置場所が特殊です。

ダッシュボード > 外観  > header.phpの以下場所に設置してください。

header.phpの...↓

<head prefix...・">の後に挿入します↓

AFFIGER4のheadタグへ※サーチコンソールを登録したい時は、上記の場所へ「サーチコンソールのHTMLタグ」を挿入することで反映できます。

※AFFINGER4はダッシュボードからAFFINGER4管理画面でもサーチコンソールが登録出来ます。管理画面から登録の方が断然設定しやすいです。

次に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を共有します。

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

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

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

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

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

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

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

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

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

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

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

  1. テキストモード(HTML)にする
  2. 上の構文を貼り付ける

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

※AddQuicktag(プラグイン)などに、呼び出しの構文自体を登録することをオススメします。プルダウンから一発で構文を挿入してくれるので何かと便利です。

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

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

HTMLに

  • CSSボタン
  • Hover.cssのアニメーション

を指示している内訳を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>

引用元:http://nelog.jp/hover-css-v2#

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

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

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

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

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

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

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

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

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