2014年1月29日水曜日

MediaboxをFC2ブログに設定

Lightbox2をFC2ブログに設置する方法はこのブログで紹介したが、Lightboxの高機能版であるMediaBoxでもやって見よう。
MediaBoxは●HTMLファイル ●インラインコンテンツ ●YouTube ●Flash などができる。
MediaBoxの配布元である「MediaBox Advanced」サイトを見ると、私が2012年に導入した当時と変わっていない。
FLASHをやらないのであれば、必要なファイルは
(1)mediaboxAdv-1.3.4b.js
(2)mediaboxAdvBlack21.css
(3)mootools-core-1.4.5-full-nocompat.js
の3ファイルがあるといい。 Lightboxで必要だった画像ファイルも最近のブラウザでは必要ないので、設置がLightboxより簡単である。
ただ、FC2はピリオドの入ったファイル名はダメなので、ファイルのリネームだけはやらないといけない。
Lightbox2の時は.(ピリオド)の代わりに-(ハイフン)を使用したが、今回は次のようにピリオドとハイフンも削除した。
(1)mediaboxAdv134b.js
(2)mediaboxAdvBlack21.css
(3)mootoolscore145fullnocompat.js
FC2ブログの「ファイルのアップロード」から、この3ファイルをアップロードしたら、後はLightbox2の時と同じ。ヘッダー部に次のコードを挿入するとよい。
××部分はユーザ毎で異なる。
<link rel="stylesheet" href=http://blog-imgs-58.fc2.com/×/×/×/×/mediaboxAdvBlack21.css type="text/css" media="screen">
<script src="http://blog-imgs-58.fc2.com/×/×/×/×/mootoolscore145fullcompat.js" type="text/javascript"></script>
<script src=http://blog-imgs-58.fc2.com/×/×/×/×/mediaboxAdv134b.js type="text/javascript"></script>
※メモ
・Mediaboxの場合、Lighbox2の様に「Lightbox 2を有効にする」が出ないので、
image 
ソースでrel=”lightbox”を入れる必要がある。(Windows Live Writer2012)

●使用例:Mediaboxの地図機能を使って、貸別荘「すずめのおやど」をGoogleマップで表示した例はここをクリック。(FC2ブログで表示)
なお、地図へのリンクで、<a の中のコードは title="「すずめのおやど」の地図" rel="lightbox[external 800 600]" とした。titleは省略可能。
Googleマップの埋め込みコードは
image
また地図へのリンクアドレスはGoogleマップの「埋め込み地図のカスタマイズとプレビュー」で、http://から=embed までをコピペ。
image

※注:LightboxとMediaboxをFC2ブログに同居させるため、実際にはMediaboxのrel=”lightbox”の部分をMediaboxのrel=”mediabox”とした。これはブログのソースを見ると分かります。(Mediaboxだけの場合は「使用例」にように、rel=”lightbox”でOK)
jsファイルの変更場所は「mediaboxAdv134b.js」で、次の一カ所のみ。
image
FC2ブログでのGoogleマップ表示例

0 件のコメント:

コメントを投稿