βブロガーの雑感

http://www.revlayer.com/

動画の上に広告が出せる。

うほほって感じなのでやってみました。

なるほどなるほど。

広告に限ったことでなく、画像でも出せるようです（上の実験は画像ですので）


ムフフ系のサイトで使ったら中々良いんでね？なんて思ってしまいました。

手順を簡単にビデオクリップにして見ました。

ビデオ内手順

エベレスト検索でそのままエベレストに行きます。

ファイル→googlemapで表示（もしくはctrl＋alt＋m）
で、googlemapを表示。

表示されたら、
javascript:void(prompt('',gApplication.getMap().getCenter()));
をアドレスバーに打ち込めば出来ます。

これで緯度経度を調べて
http://cxqn.com/article/90879.html
Panoramio(パノラミオ）を使えば、色々楽しい地図が作れそうです。

Google Earthは本当に。
こんなソフトが無料だもん。

なんて感じちゃいます。

エッフェル塔とか凄いですよね。

http://www.panoramio.com/

すげー

久々に感動した。

googleearthと連動してこんな凄いこっちゃになってるとは。

若干サイトで使うには手間が必要なのですが

ディズニーシーの地図です。

マーク部分をクリックすると、景色が見れます。

エベレスト。

凄い写真が地図上に出てきます。

使い方。

<iframe src="http://www.panoramio.com/plugin.php?lt=緯度&ln=経度&z=ズームレベル&k=マップスタイル" width="横幅px" height="縦幅px"></iframe>

緯度、経度は、数値を入力。

ズームレベルは
1が最もズーム17が一番と遠い。

マップスタイルは
0通常
1衛星写真
2地図と写真

縦幅、横幅はサイトに載せる際の大きさ。

色々いじるのが大変なら下のソースで緯度、経度だけ入力してください。

<iframe src="http://www.panoramio.com/plugin.php?lt=緯度&ln=経度&z=1&k=1" width="400px" height="400px"></iframe>

ズームレベルは1〜5くらいまで多少いじった方が良いとは思います。

（例）上のエベレストのタグ
<iframe src="http://www.panoramio.com/plugin.php?lt=27.976135&ln=86.933356&z=4&k=1" width="500px" height="500px"></iframe>

地図Z
http://chizuz.com/

サイト上でgoogleマップが使えるサイト。

非常に便利です。

使い方も簡単。

新しく地図を作る。に入って、使いたい部分の地図を表示させる。

そしてタイトルとパスワード（任意）を入力して「新規地図作成」で完成。

線とかも引けますので

例えば
池袋駅からサンシャイン60への道順


powered by 地図Ｚ

HTMLでも表示できるので
http://chizuz.com/map/map12676.html

このアドレスをメールなどに添付しても大丈夫です。
googleマップよりURLが短いので、メールなどでの行変えによる影響も無いです。

衛星写真表示も出来ますので。

サンシャイン60の衛星写真


powered by 地図Ｚ

なんて事も出来たりします。

サイト作りに非常に楽しめますよ。

reflection.js
http://cow.neondragon.net/stuff/reflection/

写真に反射効果をさせる。
小技のjs紹介。

　

元画像は

白い影をつけることも

やりかた

http://cow.neondragon.net/stuff/reflection/

サイト内

ページ下のほう
「Download reflection.js 1.6」
よりダウンロード

解凍したフォルダの中より

「reflection.js」をサーバーにあげます。

そしてHTML内html〜/htmlのどこでも良いので
<script type="text/javascript" src="http://アップロード先/reflection.js"></script>

を挿入します。

写真を上げたら

イメージタグ内に黒なら
class="reflect"
を入れるだけ。

例
<img src="http://beta.meblog.biz/image/imagereflection2.jpg" alt="imagereflection2.jpg" width="480" height="345" class="reflect"/>

白くするには
rheight40 ropacity80
の様な設定を入れる。
rheightは下に反射される部分の高さ。
ropacityは透明感度。

例
<img src="http://beta.meblog.biz/image/imagereflection2.jpg" alt="imagereflection2.jpg" width="480" height="345" class="reflect rheight40 ropacity80"/>

ちょっとおしゃれな感じで写真を見せるのに効果的です。

このあいだ作ったもののyoutubeバージョン。

alaxを全部引っ張れるものもあったり。

これ凄いですね。

写真のやつは
http://r.tabelog.com/
このサイトでも使われてるし。

サイトはこちら。
http://www.gobekdeligi.com/videobox/
http://www.stickmanlabs.com/lightwindow/

Lightbox2

http://www.huddletogether.com/projects/lightbox2/

サムネイル写真を拡大して見るとき、別ページなどだとイマイチかっこが悪い。

そんな時にこれを使うとかっこよく、画像をサムネイルから表示してくれます。





テキストでも

岩山の写真
橋の写真
微笑む少女の写真


とりあえず簡単なやり方を書いておきます。
本来はサーバーにUPして使いますが。

html〜/htmlのどの部分でも良いので
<script type="text/javascript" src="http://lightbox2.web.fc2.com/js/prototype.js"></script> <script type="text/javascript" src="http://lightbox2.web.fc2.com/js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="http://lightbox2.web.fc2.com/js/lightbox.js"></script>

この3行のスクリプトを挿入してください。


そして、スタイルシート内に
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0; } #lightbox a img{ border: none; } #outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; } #imageContainer{ padding: 10px; } #loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; } #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; } #imageContainer>#hoverNav{ left: 0;} #hoverNav a{ outline: none;} #prevLink, #nextLink{ width: 49%; height: 100%; background: transparent url(http://jp-j.com/lightbox/images/blank.gif) no-repeat; /* Trick IE into showing hover */ display: block; } #prevLink { left: 0; float: left;} #nextLink { right: 0; float: right;} #prevLink:hover, #prevLink:visited:hover { background: url(http://jp-j.com/lightbox/images/prevlabel.gif) left 15% no-repeat; } #nextLink:hover, #nextLink:visited:hover { background: url(http://jp-j.com/lightbox/images/nextlabel.gif) right 15% no-repeat; } #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% } #imageData{ padding:0 10px; color: #666; } #imageData #imageDetails{ width: 70%; float: left; text-align: left; } #imageData #caption{ font-weight: bold; } #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; } #imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; } #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000000; }

を挿入してください。
(一番最後の「#overlay」内「background-color」の色指定を変えると、背景色が変わります。


そして写真をUPするときに
<a href="http://beta.meblog.biz/image/imagelight1.jpg" rel="lightbox" title="岩山"><img src="http://beta.meblog.biz/image/imagelight1.jpg" alt="岩山" width="400" height="300" border="0" /></a>

アンカーテキスト内に「rel="lightbox"」を入れてあげれば、出来ます。

イメージのタグのやり方は参考にしてみてください。