以前、ナコさんのブログを参考に、
吹き出しを入れられるようにしてみました✨
ナコさんのおかげで、吹き出しのバリエーションが増え、
少しこのブログの色を付けられたと思います✨
と思ったので、
追加してみました★
その方法を記載したいと思います★
オリジナルのバリエーション
なこさんのサイトでは、以下6種類のアニメーション付き吹き出しが用意されています。
※あえて猫画像は同じものを使っています。
アニメーションなしバージョンは、animetionの設定値を””（何もなし）にすることで作ることができます。
猫画像部分を変更すれば、バリエーションは無限に広がりますね。ありがたや～～✨
怒りや好きなどの感情を表すアニメーション部分を増やせば、もっといろんな感情を表現することができます。
今回はこの部分を自作して、アレンジしてみたいと思います。
何を変更・追加すればいいの？
上記の記事をご覧になりながら作られた方はお気づきかと思いますが、
バリエーションを増やすには、以下の変更・追加が必要となります。
- アニメーション用画像
- functions.php
- style.css
順番に作り方・編集の仕方を確認したいと思います。
アニメーション用画像ファイル/SVGファイルって?
なこさんの作成方法を真似て、SVGファイルを作成したいと思います。
SVGファイルを作るには、Inkscapeなど、SVGファイルを取り扱うことができる画像編集ソフトが必要となります。
画像ファイルを作ってアップロードしよう
前回、画像編集ソフトの「Inkscape」をご紹介しました。
今回は、前回作った以下ファイルを使って、アニメーションを作っていきたいと思います。
みなさんも、なにか1つ作ってみてください。
それでは、作った画像をWordPressで使えるように、サーバ上にアップロードしましょう。
画像ファイルのアップロード手順
①SCPにログインする。
②以下フォルダを開く
※前回アップロードした、なこさんのアニメーション画像が入ったiconフォルダ
③iconフォルダに作った画像ファイルをアップロードする。
※winSCPではドラッグ&ドロップでアップロードできます。
自作吹き出しの設定しよう①（functions.php）
吹き出しの追加設定をしたいと思います。
まずは、バックアップを取ってから、設定をしていきましょう。
今回は、前回吹き出しの設定をしたSnippetを編集します。
まだ作成されていない方は、以下記事を参照して、作ってみてください。
Snippetの編集手順
①左ペインからSnippets＞All Snippetsを選択する。
②一覧から前回作成したSnippetを選択し、クリックする。
③「//クイックタグの追加」の中の、</script>の前に以下のようなコードを追加する。
お使いの環境に合わせて、適宜変更してください。
| 項目 | 内容 |
| ‘anime_note’ | クイックタグにつける英語名称 |
| ‘ふきだし(音符)’ | クイックタグにつける名称。 投稿編集画面のテキストタブに表示されるボタン名。 |
| position=”left” | クイックタグボタンを押したときに、 投稿編集画面に表示されるデフォルトの表示位置。left／right |
| name=”名前” | クイックタグボタンを押したときに、 投稿編集画面に表示される画像下につけるデフォルトの名前。 |
| text=”本文” | クイックタグボタンを押したときに、 投稿編集画面に表示されるデフォルトの本文。 |
| img=”icon/img_note.png” | クイックタグボタンを押したときに、 投稿編集画面に表示されるデフォルトの画像の場所。 |
| animetion=”icon_note” | クイックタグボタンを押したときに、 投稿編集画面に表示されるアニメーション種類。 この名称をCSSファイルに追加し、色や動きなどを定義する。 CSSのみでアニメーションさせることができるようにするためのプロパティ。 |
④「Save changes」をクリックする。
コードの意味を確認しておこう①（functions.php）
定義する内容については、上記に記載しましたが、
ではそもそも、「animation」とは何なのでしょうか？
「animation」はCSSのみでアニメーションさせることができるようにするためのプロパティと紹介しました。
アニメーションさせる方法には他にtransitionという方法あります。
animationとtransitionには次のような違いがあります。
| animation | transition |
|---|---|
|
|
今回は、繰返し、自動的に画像が動くようにするため、animationを利用しています。
自作吹き出しの設定しよう②（style.css）
CSSの編集手順
※ここでは、前回作成したSimple Custom CSS and JSプラグインで作成したCSSを編集します。
①Simple Custom CSS and JSプラグインで、「コードの一覧」をクリックする。
②前回作成したCSSをクリックして開く。
③CSSの最後に、以下のようなコードを追加する。
/*//// 音符 /////*/
@-webkit-keyframes icon_note {
50% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
}
@keyframes icon_note {
50% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
}
.icon_note .balloon__left .balloon__text {
background-color: #FFABCE;
}
.icon_note .balloon__left .balloon__text::after {
border-right: 15px solid #FFABCE;
}
.icon_note .icon_emotion {
background: url("http://<ドメイン名>/wp-content/themes/<利用中のテーマ>/icon/icon_note.svg") repeat-x 0 0;
-webkit-animation: icon_note 1s ease-in-out infinite alternate;
animation: icon_note 1s ease-in-out infinite alternate;
}
④「更新」ボタンをクリックする。
コードの意味を確認しておこう②（style.css）
上述の通り、CSSだけでアニメーションさせられるよう、
「animation」というプロパティを利用しています。
その設定をCSSで行います。
- @-webkit-keyframes icon_note {
- ～～～
- }
| 項目 | 内容 | ||||||
| @-webkit- | ベンダープレフィックス。 ブラウザーのベンダーがCSS3の拡張機能を実装するのに使用する識別子。 最近のブラウザでは、よく使われるCSS3のプロパティが実装可能なため、この識別子は不要の場合が増えている。 ＜参考＞
|
||||||
| -keyframes | アニメーションの変化を指定する | ||||||
| icon_note | クイックタグで設定したanimationの引数。 定義したアニメーションを区別するためのクラス名。 |
icon_noteという名前のanimationに対し、
Google Chrome、Safariからアクセスがあった場合の動きを定義しています。
- 50% {
- -webkit-transform: rotate(15deg);
transform: rotate(15deg); - }
アニメーションの定義内容です。
50%はアニメーションの中盤を意味します。
0% はアニメーション開始時、
100% はアニメーション終了時を表しています。
アニメーションの途中で、オブジェクトを15度傾けています。
| 項目 | 内容 |
| transform | 移動、回転、伸縮、傾斜の4種類の変形をさせるためのプロパティ |
| rotate | transformのうちの1つの関数。 オブジェクトを回転させる。 |
その他、3つの関数についてもご紹介しておきます。
| 項目 | 内容 |
| translate | オブジェクトを移動させる |
| scale | オブジェクトを伸縮させる。 |
| skew | オブジェクトを傾斜させる。 |
- .icon_note .balloon__left .balloon__text {
- background-color: #FFABCE;
- }
icon_noteという名前のanimationの左寄せ吹き出し、本文に対し、
背景色を指定しています。
\
- .icon_note .balloon__left .balloon__text::after {
- border-right: 15px solid #FFABCE;
- }
画像が話しているように見せるため、本文が入る左側に三角マークを付けています。
その右側の境界線の幅スタイル色をまとめて指定しています。
上述の色と同じにすることで、一つのオブジェクトのように見せることができます。
- .icon_note .icon_emotion {
- ～～～
- }
function.phpに追記したコード内で、<span>タグを使っており、
このクラス名がicon_emotionです。
- background: url(“http://<ドメイン名>/wp-content/themes/<利用中のテーマ>/icon/icon_note.svg”) repeat-x 0 0;
背景画像をURLで呼び出しています。
repeat-xで、水平方向に繰返しますが、
「0 0」の指定により、繰返しの場所が、ずれることなく同じ場所に表示されます。
- -webkit-animation: icon_note 1s ease-in-out infinite alternate;
- animation: icon_note 1s ease-in-out infinite alternate;
表示のさせ方を指定しています。
| 項目 | 内容 |
| ①1s | 1秒ごとに表示させる |
| ②ease-in-out | アニメーションが継続している際に、 アニメーションの速度を指定。 ease-in-outは、ゆっくり始まってゆっくり終わる。 |
| ③infinite | 回数・ループ指定。 infiniteは、無限に繰返す。 初期値は「1」で繰返しなし。 |
| ④alternate | 再生方向の指定。 alternateは、通常方向、逆方向のアニメーションを交互に繰り返す。 |
②の速度指定には他に以下があります。
| 項目 | 内容 |
| ease | ゆっくり始まって、ゆっくり終わる（初期値） |
| ease-in | ゆっくり始まる |
| ease-out | ゆっくり終わる |
| ease-in-out | ゆっくり始まってゆっくり終わる |
| linear | 一定の速度で始まって終わる |
| step-start | 開始時に最終の状態になる |
| step-end | 終了時に最終の状態になる |
| steps(n , flag) | nの回数だけコマ送りする。 flagが「start」の場合、開始直後に１段階目の変化が発生し、 「end」の場合、最初のインターバル経過後に１段階目の変化が発生する。 |
| cubic-bezier(x1, y1, x2, y2) | 変化の度合いを任意で指定する。 [0.0 , 0.0] から始まり、[x1 , y1], [x2 , y2] を経由し、 最終的に[1.0 , 1.0]に変化。 X軸は時間経過率、Y軸は変化率を表す。 |
④の方向指定には以下があります。
| 項目 | 内容 |
| normal | 通常方向を実行する（初期値） |
| alternate | 通常方向、逆方向のアニメーションを交互に繰り返す |
| reverse | 毎回逆方向を実行する |
| alternate-reverse | 通常方向、逆方向のアニメーションを交互に繰り返す （逆再生から始まる） |
確認してみよう
では、WordPressの投稿画面で、追加したクイックタグを押してください。
投稿編集画面に表示された項目の名前や画像を変更し、
プレビューしてみてください。
できましたか？
できた方！おめでとうございます！！
うまく表示されなかったときは…
表示されなかった場合は、画面を右クリック＞検証をクリックしてください。
画面右側に、下のような項目が表示されるので、
左上の赤枠部分をクリックします。
position=”left”を設定していた場合、
追加した吹き出しの画像右上にアニメーションが表示されるのですが、
この辺りでマウスオーバーさせると、要素は右にゆだりに揺れていますか？
その部分をクリックしてみてください。
①がアニメーションを表示されているタグ、
②が背景画像として設定している画像のURLです。
表示されなかった場合は、設定したURLが正しいか確認してください。
Inkscapeを開き、ファイル＞ドキュメントのプロパティを開いてください。
下部カスタムサイズの幅・高さが100、単位がpxになっているかを確認します。
他の理由で表示されていない可能性もあります。
1つ1つ検証してみてください。
