WordPressの設定

CSSボタンをアニメーション!CSShakeなら簡単にカスタマイズ出来るよ!

Affinger4の管理画面に「CSShakeを呼び出すリンク」はうまく設置出来ましたか?

 

次にCSSボタンの中にアニメーションを設置していきましょう。

CSSボタンにアニメーションを実装しよう!

AFFINGER4のビジュアルエディタで「ボタンA」を押すと・・

↑のような「リンクボタンA」が出ますよね。

 

このボタン要素をテキストエディタ画面で見てみると

となっています。

 

CSShakeのアニメーション要素を実装するには<a href="#”>の

aとhrefの間に

class="shake"を挿入

すればOKです。

 

分かりづらいのでアニメーション↓

 

実際にclass="shake"を挿入したボタンがコチラ↓(カーソルを上にもっていくと動きます)

 

ただリンクボタンをアニメーションさせるのに、毎々この作業をするのは手間ですよね。

 

「AddQuicktag」プラグインを使って丸々「ショートコードを登録」しておくと、ワンクリックでアニメーションボタンを作成出来るのでオススメです。

 

CSSボタンアニメーションをAddQuicktagに登録

ダッシュボードから 設定 > AddQuicktag を選択

 

AddQuicktagの編集画面になるので

  • 開始タグ
  • 終了タグ

を入力して「変更を保存」します。

入力例)

ボタンのラベル=「shakeリンクボタン」に、アイコンは リンク を設定しました。

 

開始タグと終了タグの記入例です↓

項目 タグ内容
開始タグ <div class="rankstlink-r2">
<p><a class="shake" href="#">テキスト
終了タグ </a></p>
</div>

 

 

投稿のビジュアル画面に戻りQuciktagのプルダウンを覗いてみると・・

「shakeリンクボタン」が追加されてますね。これを選択すれば、一発でアニメーションが付与されたリンクボタンが挿入出来ます。

 

また、<div class=・・・>を使えば

  • 特定のテキストだけ
  • 画像だけ

をアニメーションさせることも可能です。

 

たとえば「お役立ち」というテキストだけを動かしたいなら、以下のようにテキストエディタに記入します。

<div class="shake">お役立ち</div>
お役立ち

 

なが〜い説明の時とかに一部アニメーションにしたり、

ああああああああああああああああああああああああああああああああああああああああああああああ

あああ

ああああああああああああああああああああああああああああああああああああああああああああああ

 

吹き出し全体をアニメーションさせることで、印象に残りやすいかも・・・

アヒルン
るおるおるろうあおるおるあw

 

これもパターンになっているので、AddQuicktagに登録しておくと捗りますお。

 

さてアニメーションの要素は何も「shake」1つだけではありません。

 

次ページではCSshakeで使えるアニメーション11個を画像を動かしながらご紹介していきます。

次のページへ >

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

oyakun

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

Copyright© OYAKUDACHI.XYZ , 2019 All Rights Reserved.