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

WordPressの設定
https://pixabay.com/users/StockSnap/

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

 

完成したアニメーションボタンはコチラ↓ (スマホからだとpushしないと確認できません)

テストボタン

OYAKUN
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に以下テキストを追記。

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ボタンをアニメーション化していきます!

コメント

  1. […] >>HTMLにCSSボタン設置して呼び出しする […]

タイトルとURLをコピーしました