WordPressの設定

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

更新日:

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が復活することを祈ります。)

 

手順1:Hover.cssをheadタグへ設置しよう!

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

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・・・">の後に挿入します↓

 

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

 

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

 

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

 

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

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

CSSボタン1

Hover.cssさんのサイトからそのまま引用したやつ↓

hover.cssエフェクトを追加する前のボタンの例

HTML呼び出し(テキスト)

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

style.css(CSS貼り付け)

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

 

CSSボタン2

シンプルに。simple

HTML呼び出し(テキスト)

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

style.css(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: bold; line-height: normal; margin-bottom: 20px; padding: 6px 12px; text-decoration: none; }

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

 

テキストだけでもアニメーション化出来る。

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

 

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

 

それに見た目カッコいいから自分のサイトに愛着もてるし。

 

これかなり大事。

他CSSボタン作成の参照URL

 

次ページで実際にCSSボタンをアニメーション化していきます!

次のページへ >

広告と関連記事


  • この記事を書いた人
  • 最新記事
oyakun

oyakun

30代半ば♂妻・子3人の5人で日々激戦中。Google app script&VBA初心者が自分の備忘録を兼ねて「スプレッドシート、Excel、WordPress、plugin」の設定等、主にブログやアフィリエイト周辺のtipsを背伸びしながらご紹介しています。

Copyright© OYAKUDACHI.XYZ , 2018 All Rights Reserved.