人気ブログランキング | 話題のタグを見る
Studio TA Subsite の案内とお知らせ

エキサイトブログにアニメーションGIF画像を投稿し表示させる

2017年 03月 07日
「アニメーションGIF画像」は小サイズで簡単なアニメーションを表示する画像部品として、ネット上の修飾的な表示に良く使われます。 乱用するとページに落ち着きがなくなりますが、説明に利用したい場合は良くあります。 エキサイトのブログ画面はGIF画像を投稿し表示させる事が出来、またブログスキン上でもGIF画像を使う事が可能です。 これは、アニメーションGIF画像も利用できると考えられ、今回これを試しました。



アニメーションGIF画像を作るには、それが可能なグラフィックアプリが必要です。 フリーアプリやサイト上で作成可能なサービスがありますが、私は「Photoshop Elements」を使いました。 ここでは、旧い Ver6.0で説明しますが、以降のバージョンの「Photoshop」「Photoshop Elements」でも同様の機能を搭載している様です。

アニメーションの元画像も「Photoshop Elements」上で作成しました。 最初に背景となる画像を作り、その複製レイヤーをひとつ上の層に作って、アニメーションさせた変形を加え、更にその複製を上層に作り変形させ・・・と繰りかえして行きます。 それらのレイヤーがアニメーションのコマとなります。 アニメーションのコマを作る方法は、色々な方法が考えられ工夫の余地があるでしょう。

下図はサンプルとして、「ファイルをゴミ箱に入れる操作」のアニメーションのコマを作成している所です。

エキサイトブログにアニメーションGIF画像を投稿し表示させる_b0174191_10382419.png

コマ(レイヤー)の作成段階での注意点は以下です。
●アニメーションはレイヤーの下側から上側に向かって表示される
●各レイヤーはどれも均等な時間表示される(0.2sec等で時間は調節可能)
●従ってタイミングの調節は、レイヤーを複製して複数並べることで調節する
●レイヤー数が増えても、最終的なGIFファイルサイズは余り大きくならない

以上の要領でコマ群が出来たら、「ファイル」メニューの「Web用に保存」を押します。

エキサイトブログにアニメーションGIF画像を投稿し表示させる_b0174191_10391586.png

下図の様な設定画面が表示されます。
●右側の赤枠で囲んだ部分が「アニメーションGIF画像」を出力させるための設定ポイントです。

エキサイトブログにアニメーションGIF画像を投稿し表示させる_b0174191_10395339.png

この画面の下方の「プレビュー」ボタンを押すと、ブラウザが起動して赤枠の設定内容でアニメーションが表示されます。 赤枠の設定を調節したり、元の画面に戻ってコマを更新したりして、納得の行くアニメーションを完成させます。
●最後に、上記画面の上方の「OK」を押して「GIFファイル」を保存します。



完成した「アニメーションGIF」ファイルは、通常の画像ファイルと全く同様にアップロードし、ブログ原稿内に挿入できます。

しかし、ここでちょっとした問題が発生します。(この問題はブラウザの Chrome とIE11で確認され、エキサイトのシステムの問題と考えられます)「通常編集」の画面では問題なくアニメーションGIFの画像が挿入された様に見えるのですが、「HTML編集」の画面で挿入した画像コードを調べると以下の様になっています。

エキサイトブログにアニメーションGIF画像を投稿し表示させる_b0174191_10402146.png


赤線の部分が問題で、「 mid|1|1 」は、エキサイトのシステムが、画像サイズを正しく受け取れなかった事を意味します。 このままでは、画像が表示されません。 そこで、アップロードしたアニメーションGIF画像のサイズを確認して、「HTML編集」で手書きで画像サイズを修正します。

私がサンプルで作ったアニメーションGIF画像の画像サイズは「360pic×240pic」でした。 下は自動入力された画像コードを修正した状態です。

エキサイトブログにアニメーションGIF画像を投稿し表示させる_b0174191_10404340.png

これで、ブログ文面上で正しくGIF画像が表示される様になります。
以上の様に、エキサイトブログでは、
●アニメーションGIF画像を挿入する際、画像コードの画像サイズを手書き修正する必要がある

下は、サンプルのアニメーションGIF画像を実際に挿入したものです。

エキサイトブログにアニメーションGIF画像を投稿し表示させる_b0174191_00083653.gif




by Ataron | 2017-03-07 00:50 | PC環境(ハード/ソフト) | Trackback | Comments(0)
名前
URL
削除用パスワード

※このブログはコメント承認制を適用しています。ブログの持ち主が承認するまでコメントは表示されません。