会話ふきだし

アフィンガー5

会話ふきだしアイコンのアニメーションを個別に設定する方法 / 無駄に細かい アフィンガー5 のカスタマイズ

投稿日:2019/02/10 更新日:

「会話ふきだし」アイコンをアニメーション化してみよう!

今回は、 WordPressテーマ「WING(AFFINGER5)」 のカスタマイズについての記事です。

【初級編】アフィンガー5 標準機能でアニメーション化

最近のブログ全般でお馴染みとなった「会話ふきだし」。アフィンガー5では、すごく簡単に作成できるので、よく使っています。

ぽん
アフィンガーの「会話ふきだし」機能、大好き!
クマ
使っていて心地良いよね!

アニメーション機能まで付いているんです。AFFINGERの管理画面でチェックを入れるだけで、アニメーション付きにできちゃいますよ!

アニメーション機能をオンにする方法

管理画面の項目にチェックを入れるだけでOK!会話アイコン全てに、ぽよんぽよんと揺れるアニメーションが付きます。

ぽん
ぽよんぽよん!と動くよ!

アニメーション化の手順

AFFINGER5 管理会話・ファビコン等会話風アイコン「会話風アイコンを少し動かす」にチェックを入れる

クマ
簡単だね!

スポンサードリンク

【上級編】アイコンごとに動きを変えてみよう!

会話アイコン全部が動いてしまうと、うるさく感じることもあるので、自分はこの機能は使っていません。が、個別にアニメーション化してみたい時もあるだろうな、と思い試してみました。

各アニメーションの動きと対応するタグ

まずは、こんなアニメーションができるってことで、見本の紹介です。(各アニメーションは、アフィンガー5の「記事作成パーツ確認用ダミーページ」にて確認しました。)

動き会話ふきだしアイコンアニメーション化したい部分を囲むタグ
45°揺れ
クマ
わーいわーい!

<span class="fa faa-wrench animated st-animate"></span>

ベル揺れ
クマ
寒っ…!!

<span class="fa faa-ring animated st-animate"></span>

横揺れ
ぽん
イヤだイヤだ!

<span class="fa faa-horizontal animated st-animate"></span>

縦揺れ
ぽん
聞いて聞いて!

<span class="fa faa-vertical animated st-animate"></span>

点滅
クマ
影が薄い…

<span class="fa faa-flash animated st-animate"></span>

バウンド
ぽん
がんばるぞ!

<span class="fa faa-bounce animated st-animate"></span>

回転
クマ
目が回る~!

<span class="fa faa-spin animated st-animate"></span>

ふわふわ
クマ
おやすみなさーい

<span class="fa faa-float animated st-animate"></span>

大小
クマ
やってもうた…

<span class="fa faa-pulse animated st-animate"></span>

シェイク
ぽん
これ買って~!!

<span class="fa faa-shake animated st-animate"></span>

シェイク(大)
ぽん
えええ…っ

<span class="st-shake st-animate"></span>

拡大(ゆれ)
クマ
何じゃこりゃー!!

<span class="fa faa-tada animated st-animate"></span>

過ぎる
ぽん
行ってきまーす

<span class="fa faa-passing animated st-animate"></span>

戻る
クマ
それじゃまた!

<span class="fa faa-passing-reverse animated st-animate"></span>

バースト
ぽん
うわーー

<span class="fa faa-burst animated st-animate"></span>

落ちる
クマ
どよーん

<span class="fa faa-falling animated st-animate"></span>

表情と会話がアニメーションに合っていると良い感じ。たまに使うのは、効果的なんじゃないでしょうか。

個別にアニメーション化する方法

この方法で個別にアニメーション化した場合、おそらく会話アイコンの一括管理から外れてしまいます。(AFFINGER5管理画面でアイコンを変更しても、新しいものには置き換わらないです。)

ショートコード( [st-kaiwa1] [/st-kaiwa1] など)のままではアイコンにアニメーションを付けることができません。ショートコードで省略された部分を取り出す作業が必要です。

以下、ブラウザは Google Chrome を使って解説します。

step
1
表示したい「会話ふきだし」を設置

表示したい「会話ふきだし」を設置して下書き保存、プレビューします。

ぽん
えええ

step
2
Google Chrome の検証(Developer Tools)を開く

表示された「会話ふきだし」のアイコンにポインタを当てた状態で右クリック。出てきたメニューの中の「検証」をクリックします。

右クリックして「検証」を選択

step
3
「会話ふきだし」のコードを探す

Chrome の Developer Tools が開きます。フォーカスされている部分(背景色が反転している部分)は、先程ポインタで指していたアイコン画像のコードです。

アイコン部分のコードが反転

下記のような <img ~> から始まる imgタグが反転していればOK。(LazyLoadなど遅延読み込みのプラグインを入れている場合は、もっと複雑なコードになります。)

<img src="https://labodamonde.com/wp-content/uploads/2018/11/2-bikkuri-1-e1543542235759.png" width="60px">

このimgタグを起点に、コードを1段ずつ上にさかのぼっていきましょう。2段上に st-kaiwa-box のクラスが付けられた divタグ があるはず。

<div class="st-kaiwa-box kaiwaicon● clearfix">

会話ふきだしを表すコード

この <div class="st-kaiwa-box ~ > から始まり </div> で閉じるまでの内容が、一つの「会話ふきだし」を表すコードになります。参考までに、実際のコードを下記に貼っておきます。結構複雑な作りなんですね。

この部分を全てコピーすれば、ショートコードで省略されていた部分を抜き出すことができます。(上のコードはコピーしてもダメ。内容はサイトや会話アイコンによって異なるので。)

step
4
「会話ふきだし」のコードをコピー

先程の <div class="st-kaiwa-box kaiwaicon● clearfix"> にポインタをあてた状態で右クリック。メニューから「Copy」、サブメニューから「Copy element」を選択します。これでコピー完了!

Copy elementを選択してコピー

step
5
テキストエディタにペースト

コピーしたコードをテキストエディタにペーストします。

テキストエディタにコピペ

上のコードをプレビューすると、同じ会話ふきだしが並びます。ここまでくれば、もう少し!

会話ふきだしが表示されればOK

step
6
imgタグをアニメーション化させる

2種類の方法を紹介します。 ビジュアルエディタで編集する方法 がより簡単。ビジュアルエディタがキライな方は、 テキストエディタで編集 していきます。

ビジュアルエディタ編

テキストエディタからビジュアルエディタへ切り替えると、会話ふきだし部分が下のように表示されます。後は、普段通りにスタイルを適用していく方法でOK。

ビジュアルエディタで編集

手順

画像を選択スタイルアニメーションお好みのアニメーションを選択

プレビューしてアニメーション化できているか確認してみましょう。下の例は「シェイク(大)」を適用したものです。

ぽん
えええ

文章を選択してアニメーションを適用すれば、吹きだし内の文章も動かせますよ!こんな感じ。

ぽん
えええ

テキストエディタ編

テキストエディタのまま編集する方法はこちら。

imgタグ <img ~> をアニメーション化させるためのタグで囲みます。タグは 上の表 で確認してみて。「シェイク(大)」を適応してみましょう。これに対応するタグは下記の通り。

<span class="st-shake st-animate"></span>

コードがごちゃごちゃしていて分かりづらいですが、下記のようにタグを追記してみて下さい。

imgタグをspanで囲む

修正前のコードを予備として複数ペーストしておくと、失敗した時にラクです。

文字を動かしたい場合はこちらの例をご参考に。

文字をアニメーション化

応用編

他の動きは 各アニメーションの動きと対応するタグ で確認して下さいね。アイコンと文章の両方を異なるアニメーションで動かしたりもできちゃいます。

ぽん
えええ

よく使いそうな組み合わせは、プラグインを使ったり、functions.php を編集したりして、ボタン一つで呼び出せるようにしておくとラクですね!

クマ
以上、無駄に細かいアフィンガー5のカスタマイズでした!

-アフィンガー5
-, ,

Copyright© ラボだもんで , 2019 All Rights Reserved.