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に追記するテキスト

 

これで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呼び出し(テキスト)

style.css(CSS貼り付け)

 

CSSボタン2

シンプルに。simple

HTML呼び出し(テキスト)

style.css(CSS貼り付け)

※出典元: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を背伸びしながらご紹介しています。

-WordPressの設定
-, , ,

Copyright© OYAKUDACHI.XYZ , 2018 All Rights Reserved.