ブログのサイドバーに、GIF動画を埋め込んでみました ^-^)☆ | kakuさんのブログ(旧)

ブログのサイドバーに、GIF動画を埋め込んでみました ^-^)☆

皆さんこんにちは^-^)


雨が降ってジメジメしたすっきりしない天気ですね☆


さて、今日は当ブログのサイドバーにGIF動画を埋め込んでみましたw

特にアメブロユーザーさん向けですが(GIF動画作成自体は一緒)参考になるようでしたらお試し下さい音譜

*ページ自体の表示は重くなるため、非力なPCだときつくなりますがw



1.GIF動画を作成する


① まず素材となる画像を数枚用意します。(JPEGも可)


② 画像が全部同じ大きさ(ピクセル)になるよう縦横サイズをペイントなどで加工してください。

*kakuの場合、一度ブログに投稿した画像は同じデジカメで同じ対比であれば同じような大きさに圧縮されているためブログに投稿した画像をクリックし保存して、数枚用意しておきました。


ブログのサイドバーに合う大きさで加工しました。

kakuの場合サイドバーの横幅が画像サイズで言うと(横)170x(縦)128ピクセルでぴったりでしたw


*ウインドウズXPの「ペイント」での加工方法

ペイント起動

  ↓

加工したい画像ファイルをドラッグ&ドロップ

  ↓

元画像のピクセルサイズで表示しますので、画面上の「変形」

  ↓

「伸縮と傾き」の「伸縮」にて縦・横を数%指定し、縮小したいサイズに縮小してゆく

  ↓

サイズが決定したら、「ファイル」

  ↓

名前をつけて保存で「ファイルの種類」のところを「GIF(*.GIF)」にし、ファイル名を付けて保存します

  ↓

これでGIF画像ファイルの出来上がりです^-^)

同じようにして数枚GIF画像を用意しましょう☆


③ Giam というGIFアニメ作成ソフトを使用します。


窓の杜ダウンロードページ

http://www.forest.impress.co.jp/lib/pic/piccam/paintptclr/giam.html


Giamを起動します。

kakuさんのブログ

「新規作成」し、「開く」から先ほど加工した画像ファイルを指定します。


一枚指定すると下の画像プレビュー画面に「1コマ ○○○ x ○○○」 というように一枚表示されます。


続けて、上側にある「ファイルからコマの挿入」のアイコンをクリックします。

アニメーションしたい先ほど加工した画像をどんどん挿入してください。


挿入が終わったら「全部選択」を押します。


右欄では動画の詳細を指定します。

kakuさんのブログ

kakuの場合このようにしました。


動画を繰り返す場合「繰り返しセット」「永久に繰り返す」

写真などの画像を使用した場合は、「透過色の使用」のチェックを外します。(チェックを入れると画像が透けます)

画像が切り替わる時間を「ウェイト有り」にて指定します。

数字が大きいほど切り替わりが遅く、数字が小さいほど早くなりパラパラ漫画などに適した動画になります。


最後に左上の「ファイル」から名前をつけて保存すればGIF動画の出来上がりです^-^)/~☆



2.ブログのサイドバーに出来たGIF動画を挿入する

 (アメブロの場合・・・しか知りませんが;)


① 出来たGIF動画を投稿します


ブログを書く

  ↓

アメブロを書く

  ↓

画像フォルダを開きます
kakuさんのブログ


通常通り投稿してください。


投稿が完了したら、投稿した画像ファイルを右クリックします

kakuさんのブログ


「プロパティ」を開きます

kakuさんのブログ

「アドレス」の部分のURLが、投稿した画像のURLです。

コレをコピーしておいてください。


② そしていよいよサイドバーにGIF動画を埋め込みます☆

ブログを書く

  ↓

サイドバーの設定

  ↓

フリースペースの編集を開きます

kakuさんのブログ

この左の編集欄に、次の文字列を挿入します


<div align="center"><a href="ご自分のブログのURL"><img src="アップロードした画像ファイルのURL"border="0"></a></div>


* 「アップロードした画像ファイルのURL」の部分に、先ほどコピーした画像URLを貼り付けてください。


上の文字列をうまく編集欄に貼れれば、右のプレビュー画面にGIF動画がプレビューされます。

 (うまくいかない場合、文字列に余計な半角スペースが開いているなど考えられますので再度確認を~)

kakuさんのブログ

最後に画面下の「保存」を押して終了ですドキドキ

ご自分のブログを確認してみましょう~^-^)/☆


意外と簡単にブログのイメージがUPアップ出来ると思います☆

是非お試し下さい ^-^)/



conecoクラブ kakuさんのレビューはこちら

http://club.coneco.net/user/11677/review/list.htm


自作PCブログランキングに参加しております! ご協力をお願いいたします^-^)/ こちらからどうぞ音譜

にほんブログ村 PC家電ブログ 自作PCへ