LottieFiles 無料アニメーション ワードプレスのプラグインで利用する方法

LottieFilesワードプレス プラグインfigma

今回は、「LottieFilesをワードプレスで使用する方法」についてご紹介させて頂きます。

LottieFilesのウェブサイトからHTMLをコピーして、カスタムHTMLとして貼り付けても良いのですが、プラグインを使うと少しだけ簡単にアニメーションを利用することが出来ます。

プラグインのインストール方法から、基本的な使い方、CSSでのカスタマイズまでご紹介させて頂きますので、ぜひ参考にして頂ければ幸いです。

スポンサーリンク

プラグインのインストール

新規追加画面で「LottieFiles」と検索して、「今すぐインストール」をクリックします。

ワードプレスのプラグインを使って、アニメーションを利用してみましょう。

まずはプラグインの新規追加画面で、「LottieFiles」と検索します。

一番最初に「LottieFiles – Gutenberg の Lottie ブロック」という名前のプラグインが表示されますので、「今すぐインストール」をクリックします。

この記事を書いた時点では、LottieFilesのプラグインに、「使用中の WordPress バージョンで未検証」と表示されています。(ワードプレスのアップデート後に検証がされていない状態です)

セキュリティの問題がある場合がありますので、なるべく「使用中の WP バージョンと互換性あり」と表示されている時にインストールしたほうが良いと思います。

「有効化」をクリックします。

インストールが完了したら、「有効化」をクリックしてください。

内容を確認したら、「Log in with your LottieFiles account」をクリックします。

セットアップ画面が表示されました。

最初のチェックボックスには、「アカウントを他のワードプレスユーザーと共有するかどうか」と聞かれていますので、チェックを外します。

2番目のチェックボックスは、「LottieFilesとデータを共有するかどうか」と聞かれていますので、好みでチェックをしてください。

内容を確認したら、「Log in with your LottieFiles account」をクリックします。

もしアカウントを持っていない場合は、「Create an account for free」をクリックしてアカウントを開設してください。

アカウントの開設方法は前回の記事で詳しくご紹介させて頂いております。

ログイン完了画面です。

すでにブラウザでLottieFilesを使用していれば、自動でログインされると思います。

別ウィンドウでこのような画面が表示されればログイン完了です。

画面を閉じて、ワードプレスに戻ってください。

ログイン画面が表示された場合は、メールアドレスとパスワードを入力してログインしてください。

変更が必要であれば「Save Change」をクリックします。

次に設定画面が表示されていますので内容を確認していきます。

最初のチェックボックスは、「アカウントを他のワードプレスユーザーと共有しますか」という先ほどと同じ内容ですので、チェックなしにしておきます。

次は、「LottieFilesのファイルをワードプレスのメディアライブラリにコピーするかどうか」という内容ですので、チェックは外したままで良いかと思います。

最後は、「Usage data sharing」という部分で「利用データを共有するかどうか」という内容ですので、好みでチェックをしてください。

設定が完了したら、「Save Change」をクリックします。

ここでの内容は、先程のセットアップ画面と同じ内容ですので特に何もしなくても問題ありません。

スポンサーリンク

使い方

アニメーションの選択

すべて表示をクリックします。

使い方は幾つかあるのですが、一般的な使い方です。

まず「+」ボタンをクリックして、ブロックの「すべて表示」をクリックします。

「ウィジェット」内にある「Lottie」のアイコンをクリックします。

左側の挿入バーにある「ウィジェット」内に「Lottie」のアイコンがありますので、こちらをクリックします。

Discover animationをクリックします。

Lottie」のブロックが挿入されました。

Discover animation」をクリックしてアニメーションを探します。

アニメーションのURLが分かっていれば、「Insert from URL」をクリックして直接アニメーションを挿入することも出来ます。

検索機能でアニメーションを絞り込みます

ポップアップ画面が表示されますので、アニメーションを探していきます。

検索の仕方は、「LottieFiles」のサイトで検索するのと同じ方法です。

赤い枠線の中で絞り込みます。

  • Recent:最新のアニメーション
  • Featured:お勧めのアニメーション
  • Popular:人気のアニメーション

細かい絞り込み機能がありませんので、イメージするアニメーションがあれば、キーワードで検索したほうが速く見つかると思います。

My Animationsには保存したアニメーションが表示されます。

My Animations」をクリックすると、「LottieFiles」のサイトなどで保存したアニメーションが表示されます。

アニメーションを選択して、「Insert animation」ボタンをクリックします。

ここでは例として、「Featured」の中から選択してみます。

使いたいアイコンをクリックすると、「Insert animation」というボタンが表示されますので、こちらをクリックします。

編集

右側の設定画面で編集することが出来ます。

選択したアニメーションが挿入されました。

このまま何もしなくても保存すればウェブサイトに表示されますが、右側の設定画面で編集することが出来ます。

アクションの選択

動作を指定します。

Play animation on」をクリックするとアニメーションをどのように動かすか指定することが出来ます。

  • Page Load:ページを読み込んだ時
  • Hover:マウスが乗った時
  • Click:クリックした時
  • Scroll:スクロールした時

デフォルトは「Page Load」になっていますので、好みで選択してください。

ループ・スピード・サイズの編集

Loop、Controls、Speed、Width、Heightを指定します。
  • Loop:アニメーションの繰り返し設定です。デフォルトでは「オフ」になっています。
  • Controls:コントロールバーの表示/非表示の設定です。デフォルトでは「オン」になっています。
  • Speed:アニメーションのスピードを設定します。バーを動かすと最大「5」まで指定出来ますが、直接数値を入力すれば、「100」以上でも指定することが出来ます。
  • Width:横幅です。ピクセルまたは%で指定します。
  • Height:縦幅です。ピクセルまたは%で指定します。

背景の指定

背景を変更します。

Background Color」では背景を選択することが出来ます。

下に表示されているカラーの中から好みの色を選択すれば、背景が変わります。

カラーパレットから色を選択することも出来ます。

ボックスをクリックするとカラーパレットが表示されますので、詳細な色を指定することも出来ます。

カラーコードを直接入力することも出来ます。

カラーパレットにあるアイコンをクリックすると、カラーコードを直接入力することも出来ます。

HEX、RGB、HSLでの入力が可能です。

Hex」をクリックすると、「HSL」、「RGB」での入力も可能になります。

高度な設定

高度な設定をします。

高度な設定」をクリックすると、「Play mode」と「Direction」を指定することが出来ます。

Play mode

  • Normal:一方方向のアニメーション
  • Bounce:逆方向有りのアニメーション

Direction

  • Forward:前向き
  • Backward:後ろ向き

追加CSSクラス」は、CSSで編集を加える場合のみ記入します。

配置

ワードプレスの機能で位置を指定します。

アニメーションのサイズにもよりますが、配置する場所はワードプレスのデフォルトの機能で、「左寄せ」、「中央寄せ」、「右寄せ」で指定します。

CSSで編集する

画面幅いっぱいに配置されたアニメーション

通常の段落にプラグインを使用して挿入すると画面幅いっぱいに配置されます。

これでも特に問題はないのですが、状況によっては背景のサイズを変更したりしたい場合もあると思います。

そのような時は、CSSを使って色々と編集することが可能です。

CSSの知識が全くない場合は面倒かもしれませんが、少しでも知識がある方であれば、簡単に編集が出来ると思います。

クラス名を指定

CSSでの編集方法は幾つかやり方があるのですが、最も簡単な方法をご紹介させて頂きます。

先程の「高度な設定」の「追加CSSクラス」に適当なクラス名を指定します。

後はページの下にある「カスタムCSS」エリアに、指定したいプロパティを記述すれば完成です。

ここでは単純にサイズ変更と中央揃え、ボックスに影を付けています。

あまり面倒な指定はする必要はありませんが、基本的なプロパティはすべて有効です。

また「id」を付与すれば当然「JS」を使用することも可能です。

スポンサーリンク

まとめ

今回は「LottieFiles」をワードプレスのプラグインで使用する方法についてご紹介させて頂きました。

沢山の設定があるように感じた方もいらっしゃるかと思いますが、一度操作してしまえば時間はそれほどかかりません。

やはり面倒なのは、LottieFilesのサイトを利用するのと同じように、アニメーションを探すのが最も大変な作業です。

事前に使用したいアニメーションをLottieFilesのサイトで見つけておいて「My animation」に保存しておけば、効率よくアニメーションを利用できると思います。

今回も最後までお読み頂きありがとうございました。

LottieFilesの登録方法や基本的な使い方は以下の記事で詳しくご紹介させて頂いております。

コメント

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