Neutral

Fun to Custom

PREV | PAGE-SELECT | NEXT

≫ EDIT

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

| スポンサー広告 | --:-- | comments(-) | trackbacks(-) | TOP↑

≫ EDIT

FC2 Mediabox導入メモ

 つい先日Lightboxを導入したばかりなんだけど、動画もLightbox化したくてMediaboxというものに入れ替えてみた。lightbox導入時に少し苦労したのが報われたのか、以外にスンナリ行けたのでメモしておく。

mediabox_page.jpgまずMediaboxのページから画像黄色で囲んだものをDL。以下の

mediaboxAdvanced Black Theme(黒のテーマ)
mediaboxAdvanced White Theme(白のテーマ)
■mediaboxAdvanced Image Pack(各種gif素材)

※白か黒どちらかでオケ。Image Packは必須。

 画像黄色囲み上から2つめのNonverBlasterのDLは異動先のページの下の方。以下最終的なリスト
・mediaboxAdvanced 1.2.0
・Mootools 1.2.4 Core
・NonverBlaster
・mediaboxAdvanced Black Theme or mediaboxAdvanced White Theme
・mediaboxAdvanced Image Pack
NonverBlasterダウンロード、解凍後フォルダから【NonverBlaster.swf】を探してコピー。僕の場合は【demo】というフォルダに入っていた。NonverBlasterから使うものはこれだけ。

 次にmediaboxAdvanced 1.2.0をテキストエディター(メモ帳など)で開き
playerpath: '/js/NonverBlaster.swf',
 の赤【/js】部分を
playerpath: 'FC2のファイルマネージャーurl/NonverBlaster.swf',
 に変更する。ファイルマネージャーは記事の画像をアップするのと同じ所。最初に【NonverBlaster.swf】だけをアップロードして、サムネイルをクリックすれば別窓が開くので、そこのurlをコピペすればオケ。

 次に【mediaboxAdvanced Black Theme】をテキストエディターで開き
#mbOverlay.mbOverlayFF {
background: transparent url(/images/mediabox/80.png) repeat;
}
 の様に【image】の文字がある部分全てファイルマネージャーのurlに変更する。変更箇所は全部で5箇所。

 書き換えが終わったらファイルマネージャーにアップロード。【mediaboxAdvanced Image Pack】の解凍後フォルダの中には使わない画像も入っているので、選別してフォルダに入れず単体でアップロード。黒テーマを使用するなら【white】の記述があるもの以外、白のテーマなら【black】の記述があるもの以外で良いと思う。

 全てのデータのアップロードが終わったら、管理画面【テンプレートの設定】のhtmlの</body>の直前に
<link rel="stylesheet" href="mediabox/mediaboxAdvBlack.css" type="text/css" media="screen" />
<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>
上記の赤文字部分を全てファイルマネージャーのurlに変更したものを挿入。<>は全て半角<>に変更要。

※既にlightbox導入済みの場合、導入時に挿入したコードと上記のものを入れ替えた方がいいかも。

 以上で終了。成功するとこうなる。

mthodman.jpg ←画像をクリックん~

ちなみに貼付けソースは
<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↑

COMMENT

ありがとうございました

参考にさせていただきました,
ありがとうございました。
補足にリンクを貼らせて頂こうと思います。
確かに,時間かかりますねi-179

| 釣りバカ | 2010/06/04 19:01 | URL | ≫ EDIT














TRACKBACK URL

http://new30rider.blog95.fc2.com/tb.php/172-c3ddf64d

TRACKBACK

PREV | PAGE-SELECT | NEXT

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。