画像をマウスポインタで触れると、画像が変化する・・・

たんなる画像なら、パクッて貼り付けるだけだが・・・
このような動作をする画像は、画像のパクリだけでは思いどおりにならない。
そもそも、画像のパクリさえ上手く出来ないのではないだろうか？



ごく初歩的な手法だが、JavaScriptなどのプログラムを使わずに実現できる。
僕のブログの一番上にあるメニュー、マウスで触れるとチカチカ点滅。
これと同じ原理であるが・・・
ーーーーーーーーーーーーーーーーーーーーーー

上のゴキブリ画像は、二つのGIFアニメ画像を使っている。
最初の画像は40フレームの構成で、足と触覚を動かしている。

マウスで触れた時の画像は11フレームの構成で、羽を広げる。
 

それにしても、アニメは手間がかかる作業だし。
好きで作るのだろうが、僕にはとうてい真似できない仕事だと思う。
ちなみに、僕のブログメニューの画像は、たったの２フレーム・・・

2014/10/10 の記事を見ると、ブログ画像のバックアップをプログラミングしていた。
http://yuz1.blog.shinobi.jp/Entry/1345/

先日の日曜日に、このプログラムに少し手を入れてみた。
とある消滅するであろうブログのバックアップに使おうと・・・

このプログラム、実はたいしたところまで出来ていなかった。
ああしよう、こうしようと考えて、途中で放り投げてあったものだ。
それでも骨子は間違いなく出来ており、今回に限ればさほど悩むようなものではなかった。

今回はブログ記事をそのままに、HTMLで保存するだけ。
記事中の画像を端からダウンロードして、これも単に保存するだけ。
とりあえず、これだけの事をしておけば後々の利用法で何とでもなるはず。

丸々一日がかりのプログラミングになったが、なんとか上手い具合に動作した。
ーーーーーーーーーーーーーーーーーーーー

暫くぶりに、この画像バックアップに係わったので、引き続きプログラミングを進めようと思う。
前回は画像を元画像とサムネイルをフォルダ分けしようといたが、今回は考えを変えた。
もう、画像は全部が一緒のフォルダに収めようと思う。
実際に上に書いたブログのバックアップでは、フォルダ分けをしなかった。
やはり、あまり深く考えても意味がないように思えた。

後で必要が生じたならば、その時に画像フォルダを再構成すれば良いし・・・
FTPが使えれば、何もこんな面倒な事をしなくてもなぁ。
FC2では有料登録すれば、FTPが使えるらしい。

しかし、僕はお金をかけたくないし。
そうなると、残された方法はこれしかないと、仕方がないな。

YouTubeタグの設定


2014/12/17 現在
yuz_ブログのテンプレートにおける、YouTube埋め込みコードの扱いについて。

YouTube埋め込みコードの取得と利用方法　－－－－－－－

＊ YouTubeの動画を右クリックして埋め込みコードを取得。
＊ 埋め込みコードを、ブログ投稿フォームのソースコードのタブを開いて記述する。

YouTube埋め込みコードに変更を加えない場合は、次のとおりの処理が自動的に行われる。

・動画の静止画像サムネイルを表示して、動画リンクを設定する。
・サムネイル画像及び動画サイズを、動画を配置した要素の幅を基準に既定幅で設定する。
・  現時点での動画の既定幅は、動画を配置した要素幅の75％とする。


基本の表示　－－－－－－－－－－－－－－－－－－－－－

YouTube埋め込みコードに変更を加えない場合は、テンプレートよる自動再設定が行われる。
テンプレートによる自動再設定の詳細は、次のとおり。

・動画サイズ： 動画を配置した画面幅の75％で、縦横比を維持して表示
・背景色： #1c1c1c
・表示位置余白： margin 0
・表示順位： wmode=transparent を設定して背面にする
・関連動画の表示： rel=0 再生終了時に関連動画の表示をしない


表示設定の変更　－－－－－－－－－－－－－－－－－－－

表示設定の変更は、YouTube埋め込みコードに対して次の変更を行う。

・ テンプレートによる自動再設定を無効化：　iframe属性に、class="noresize" を追加
 
・ 動画サイズ： iframe属性に、resize="＊" を動画を配置した画面幅の％値で追加
・ 背景色： ifarame属性に、background-color="色名" を追加
・ 表示位置余白： iframe属性に、margin="＊ ＊ ＊ ＊"  をショートハンド書式で追加

・ 表示順位： 変更不可
・ 関連動画の表示： 変更不可


ーーーーーーーーーーーーーーーーーーーーーーーーーーー

参考用のページは、以下のブログ記事リンクを参照のこと。

http://yuz1.blog.shinobi.jp/Date/20141213/1/

YouTube動画のサムネイルを表示して、クリックすると動画再生するようにプログラムを作ったが。

動画とサムネイルの縦横比が違うので、同一のサイズに収める事が出来ない。
サイズを同じにしようとするならば、画像が変に伸びてしまう。
とりあえず今は、横幅を同一にした表示をしている。

結果、動画の縦が短くなるのである・・・

対策は、画像の枠を作ってサムネイルと動画を収めるかな。
動画の縦を基準にした比率でサムネイルを表示すると、とうぜん横幅が狭くなる。
そこで、新たに用意する枠の真ん中にサムネイルを表示する。
この枠の背景を黒にしておけば、問題なしに・・・

たいした事ではないが、面倒な気がしないでもない。
まぁ、気が向いたらやってみるか。
ーーーーーーーーーーーーーーーーーーーーーーーー

そもそも自分の動画など一つもないし、このような仕掛けを作る気はなかったのだが。
とりあえず、このような対応もしておいた方が良いかと思って始めた事だ。

ただ、ネット相手の場合には、いつ相手の都合で仕様が変わってしまうのかが心配の種である。
だから、ブログ自体に組み込むような事を考えなかったのだ。

・・・

何でサムネイルと動画のサイズの違いを気にするのか？
それは、このブログのテンプレートの仕様が関係している。
このテンプレートは、下端を揃える仕掛けをしてある。

いったん確定した下端位置を後で変えるのは、余計な一手間がかかる。
今回のような場合には、動画再生時に縦方向が縮むが、見た目はさほど悪くはない。
それでも良い事は良いのだが、ちょっと気がおさまらない。
つまらない、こだわり・・・

追記：2014/12/17
ちょっと面倒であったが、サムネイルと動画のサイズを合わせる工夫をした。
さらに、表示位置を変更出来るようにmargin設定と、ついでに背景色の設定を可能にした。
そして、自動サムネイル化しないように設定が出来るようにもした。
おまけに、サムネイルサイズも任意に変更か可能に・・・

かなり、細かいプロパティが付いた・・・
こんな面倒な事までするつもりは無かったのだよ、ホントはなぁ。

これは動画のサムネイル表示のテスト。

１.　背景色を赤に設定した。

<iframe width="640" height="360" background-color="red" src="//www.youtube.com/embed/c78DuUaIXfE?feature=player_detailpage" frameborder="0" allowfullscreen=""></iframe>




２.　表示位置を右方向に３文字分移動した。

<iframe width="640" height="360" margin="0 0 0 3em" src="//www.youtube.com/embed/Ev9x844dn8w?feature=player_detailpage" frameborder="0" allowfullscreen=""></iframe>




３.　背景色を青に、サイズを半分にした。

<iframe width="640" height="360" background-color="blue" margin="0 0 0 0" resize="50" src="//www.youtube.com/embed/Vkq_nUApSjw?feature=player_detailpage" frameborder="0" allowfullscreen=""></iframe>




４.　埋め込みコードを変更しない時の、標準の表示。

<iframe width="640" height="360" src="//www.youtube.com/embed/nFRfNqBQD-w?feature=player_detailpage" frameborder="0" allowfullscreen=""></iframe>



以上、四つの動画を貼り付けた。
クリックすれば動画が再生されるはずだ。

YouTube動画を、サムネイルで表示するプログラムを作った。
表示されているサムネイルをクリックすると、動画を再生する優れもの。
サムネイルなので、表示が速いはずだ。

記事を投稿する時には、普通にYouTubeの埋め込みコードを書くだけで良い。
サムネイルも動画もサイズが自動で決まり、しかも最前表示で他にカブリなし。

現在テスト中・・・

 
どうだろか？



ググッと・・・

 
パッと・・・

 
あっと言う間に・・・

 
上手く表示されたかなぁ？

だが・・・
よく考えてみると、僕は動画を載せる事がごく稀である。

おうおう、もうこんな時刻だよ。
結果はどうでも、もう寝る！