![](https://u-tami-1.com/wp-content/uploads/2023/11/panties:Oops-yellow-Star-L2.gif)
GIFは画像ですがアニメーションが作成できます。2枚のイラストでもGIFアニメーションなら繰り返し動きます。画像を繰り返しめくって動いているように見せているイメージです。背景透過に対応してますが、半透明ができません。
短いアニメーションなら動画より容量も小さくなりループ再生ができることが特徴です。
そんなGIFですが!ワードプレスにアップロードしたら動かない!といったことがあると思います。ProcreateとPhotoshopからワードプレス内でGIFアニメーションが動くように書き出す方法をご紹介します!
![](https://u-tami-1.com/wp-content/uploads/2021/04/procreate.png)
![](https://u-tami-1.com/wp-content/uploads/2022/10/名称未設定のアートワーク-19-1-360x360.png)
Procreateから書き出し
![](https://u-tami-1.com/wp-content/uploads/2023/10/バックグラウンドで作業中-2.gif)
2フレームで作成したうたた寝しているGIFアニメーションです。
![](https://u-tami-1.com/wp-content/uploads/2023/10/タイトルなし-1024x763.png)
2フレームで「ループ」させてGIFアニメーションを作りました。フレームレートは2にしてます。
今回はキャンパスサイズは800px正方形で72dpiのRGBで作ったよ!
![うーたみ](https://u-tami-1.com/wp-content/uploads/2022/06/吹き出し.gif)
![](https://u-tami-1.com/wp-content/uploads/2023/10/20231031_041342541_iOS-1024x768.png)
画面左上の「アクションツール🔧」から「共有」を選択して「アニメーションGIF」を選択します。
![](https://u-tami-1.com/wp-content/uploads/2023/10/20231031_041522007_iOS-1024x768.png)
この画面で「ウェブ対応」を選択して「書き出す」をタップします。
ウェブ対応にしないとサイトにアップロードしたときにGIFアニメーションが動かないよ!
![うーたみ](https://u-tami-1.com/wp-content/uploads/2022/06/吹き出し.gif)
![ゴリたみ](https://u-tami-1.com/wp-content/uploads/2022/06/名称未設定のアートワーク-7-1.gif)
それでも動かないことがあったら?
もしこの手順でも動かない場合は次のことを試してみてね!
・キャンバスサイズが大きい場合は小さくしてね(Procreate側)
・解像度はフルサイズでアップロードしてね。サイズ「幅」「高さ」は変更しても大丈夫だよ!(Wordpress側)
![うーたみ](https://u-tami-1.com/wp-content/uploads/2022/06/吹き出し.gif)
![](https://u-tami-1.com/wp-content/uploads/2023/10/07-1-1024x531.png)
![ゴリたみ](https://u-tami-1.com/wp-content/uploads/2022/06/名称未設定のアートワーク-7-1.gif)
それでも動かなかったら?
それでも動かなかったら諦めて「ワードプレスGIF動かない」などで検索すると詳しい記事があるから自分で調べてね☆
![](https://u-tami-1.com/wp-content/uploads/2023/05/名称未設定のアートワーク-7-1.png)
Photoshopから書き出し
![](https://u-tami-1.com/wp-content/uploads/2023/10/ヌイ新:目キラキラ背景なし.gif)
このGIFアニメーションはAfterEffectで作成した動画(MOV)をPhotoshopでGIFにして書き出しています。
動画ファイルはMP4、MOV、AVIなどがありますがどの動画ファイルでもPhotoshopでGFIにして書き出せますので手順を見てGIFアニメーションにしてみてください☆
画像解像度を変更
![](https://u-tami-1.com/wp-content/uploads/2023/10/01-1024x651.png)
Photoshopを立ち上げたら「開く」からGIFにしたい動画を挿入します。次に「イメージ」>「画像解像度」をクリックします。
![](https://u-tami-1.com/wp-content/uploads/2023/10/02.png)
「幅」と「高さ」を小さくします。おすすめのpixelサイズは1000px以下です。内容によっては1000pxでもサイト上で動かないことがあるので小さくしておきます。解像度は画面上のみの表示なので72でOKです。再サンプルにチェックをして「ディテールを保持2.0」か「バイキュービック法」で「OK」をクリックします。
![](https://u-tami-1.com/wp-content/uploads/2023/10/03-1.png)
画像解像度を変更すると上記画像のようなウィンドウが出てきたら「変換(C)」をクリックします。
ファイル>書き出し>Web用に保存
![](https://u-tami-1.com/wp-content/uploads/2023/10/04-1024x657.png)
画像解像度の変更ができたら次は書き出しです。
上部メニューから「ファイル」>「書き出し」>「Web用に保存」をクリックします。
![](https://u-tami-1.com/wp-content/uploads/2023/10/05-1024x751.png)
「Web用に保存」ウィンドウがでるので「保存」をクリックして保存先を設定します。
![ゴリたみ](https://u-tami-1.com/wp-content/uploads/2022/06/名称未設定のアートワーク-7-1.gif)
ここでは特に設定はしなくていいの?
設定を変更した記憶はないけど「GIF」が選択されていればいいんじゃないかな☆
![うーたみ](https://u-tami-1.com/wp-content/uploads/2022/06/吹き出し.gif)
この手順で書き出すとサイト上でも動いてくれるGIFアニメーションが作成できます。アップロードしたときに動かなかった場合は画面解像度をもっと小さくしてみてね☆
WordPressでGIFをアップロードする
![](https://u-tami-1.com/wp-content/uploads/2023/10/08-1024x455.png)
![](https://u-tami-1.com/wp-content/uploads/2023/10/09-1024x492.png)
投稿ページ本文にある「+」をクリックするか、左上の「+」からメディアにある「画像」を選択します。
GIFアニメーションっていうけどGIFは画像だから「画像」を選択してね!
![うーたみ](https://u-tami-1.com/wp-content/uploads/2022/06/吹き出し.gif)
![](https://u-tami-1.com/wp-content/uploads/2023/10/10-1024x463.png)
「アップロード」からGIFアニメーションを挿入します。過去にアップロードしているGIFアニメーションは「メディアライブラリ」から挿入します。
![](https://u-tami-1.com/wp-content/uploads/2023/10/1-2-1024x519.png)
挿入したときに右側の「ブロック」から解像度を「フルサイズ」にします。
![](https://u-tami-1.com/wp-content/uploads/2023/10/2-1024x431.png)
サイズ変更は丸いポッチからドラッグして変更するか、右側の「幅」「高さ」から変更ができます。
![](https://u-tami-1.com/wp-content/uploads/2023/10/首バイーン鳥-2.gif)
アップロードできる容量
![](https://u-tami-1.com/wp-content/uploads/2023/10/3-1024x229.png)
ワードプレスの「ダッシュボード」>「メディア」>「新規追加」をクリックすると「最大アップロードサイズ:1GB」とありますのでGIFに限らず1GB以下でアップロードしましょう。
最大アップロードサイズはサーバーの設定から変更ができるそうですが、とりあえずは間に合っているので変更していません。
最大アップロードサイズの変更が必要な場合は調べて教えてください☆
![](https://u-tami-1.com/wp-content/uploads/2024/01/二足歩行ハムスターズ.gif)
![](https://u-tami-1.com/wp-content/uploads/2023/11/panties:blue目キラキラ-.gif)
コメント