FC2 Mediabox導入メモ
つい先日Lightboxを導入したばかりなんだけど、動画もLightbox化したくてMediaboxというものに入れ替えてみた。lightbox導入時に少し苦労したのが報われたのか、以外にスンナリ行けたのでメモしておく。
画像黄色囲み上から2つめのNonverBlasterのDLは異動先のページの下の方。以下最終的なリスト
次にmediaboxAdvanced 1.2.0をテキストエディター(メモ帳など)で開き
次に【mediaboxAdvanced Black Theme】をテキストエディターで開き
書き換えが終わったらファイルマネージャーにアップロード。【mediaboxAdvanced Image Pack】の解凍後フォルダの中には使わない画像も入っているので、選別してフォルダに入れず単体でアップロード。黒テーマを使用するなら【white】の記述があるもの以外、白のテーマなら【black】の記述があるもの以外で良いと思う。
全てのデータのアップロードが終わったら、管理画面【テンプレートの設定】のhtmlの</body>の直前に
※既にlightbox導入済みの場合、導入時に挿入したコードと上記のものを入れ替えた方がいいかも。
以上で終了。成功するとこうなる。
←画像をクリックん~
ちなみに貼付けソースは
実はこの動画の貼り方考えてたらやってみたくなったの。反省はしてない。てか、導入作業より記事書く方が時間かかるという本末転倒ぶり...ハフン
まずMediaboxのページから画像黄色で囲んだものをDL。以下の ※mediaboxAdvanced Black Theme(黒のテーマ) ※mediaboxAdvanced White Theme(白のテーマ) ■mediaboxAdvanced Image Pack(各種gif素材) ※白か黒どちらかでオケ。Image Packは必須。 |
画像黄色囲み上から2つめのNonverBlasterのDLは異動先のページの下の方。以下最終的なリスト
・mediaboxAdvanced 1.2.0NonverBlasterダウンロード、解凍後フォルダから【NonverBlaster.swf】を探してコピー。僕の場合は【demo】というフォルダに入っていた。NonverBlasterから使うものはこれだけ。
・Mootools 1.2.4 Core
・NonverBlaster
・mediaboxAdvanced Black Theme or mediaboxAdvanced White Theme
・mediaboxAdvanced Image Pack
次にmediaboxAdvanced 1.2.0をテキストエディター(メモ帳など)で開き
playerpath: '/js/NonverBlaster.swf',の赤【/js】部分を
playerpath: 'FC2のファイルマネージャーurl/NonverBlaster.swf',に変更する。ファイルマネージャーは記事の画像をアップするのと同じ所。最初に【NonverBlaster.swf】だけをアップロードして、サムネイルをクリックすれば別窓が開くので、そこのurlをコピペすればオケ。
次に【mediaboxAdvanced Black Theme】をテキストエディターで開き
#mbOverlay.mbOverlayFF {の様に【image】の文字がある部分全てファイルマネージャーのurlに変更する。変更箇所は全部で5箇所。
background: transparent url(/images/mediabox/80.png) repeat;
}
書き換えが終わったらファイルマネージャーにアップロード。【mediaboxAdvanced Image Pack】の解凍後フォルダの中には使わない画像も入っているので、選別してフォルダに入れず単体でアップロード。黒テーマを使用するなら【white】の記述があるもの以外、白のテーマなら【black】の記述があるもの以外で良いと思う。
全てのデータのアップロードが終わったら、管理画面【テンプレートの設定】のhtmlの</body>の直前に
<link rel="stylesheet" href="mediabox/mediaboxAdvBlack.css" type="text/css" media="screen" />上記の赤文字部分を全てファイルマネージャーのurlに変更したものを挿入。<>は全て半角<>に変更要。
<script src="mediabox/mootools-1.2.4-core-yc.js" type="text/javascript"></script>
<script src="mediabox/mediaboxAdv-1.2.0.js" type="text/javascript"></script>
※既にlightbox導入済みの場合、導入時に挿入したコードと上記のものを入れ替えた方がいいかも。
以上で終了。成功するとこうなる。
←画像をクリックん~
ちなみに貼付けソースは
<a href="動画のurl" rel="lightbox[425 344]" title="Method Man Ft. Mary J. Blige - You're All I Need"><img src="画像のurl" alt="mthodman.jpg" border="0" width="119" height="78" /></a>となる。これも<>は全て半角<>に変更要。rel="lightbox"[425 344]の数字は動画もしくは画像のサイズ指定。すでにLightbox導入済みの場合、記事を書き換えなくても既存rel="lightbox"だけでしっかりと反応。
実はこの動画の貼り方考えてたらやってみたくなったの。反省はしてない。てか、導入作業より記事書く方が時間かかるという本末転倒ぶり...ハフン
スポンサーサイト
| テンプレートカスタム | 15:42 | comments:1 | trackbacks:0 | TOP↑
ありがとうございました
参考にさせていただきました,
ありがとうございました。
補足にリンクを貼らせて頂こうと思います。
確かに,時間かかりますね
| 釣りバカ | 2010/06/04 19:01 | URL | ≫ EDIT