fc2blogでshadowboxを使用する方法

前へ 次へ
このQ&Aのポイント
  • fc2blogでshadowboxを導入する方法について参考ブログを見て試してみたが、動画がポップアップ表示されない問題が発生。
  • 参考サイトを順に追っていくと、まずはjQueryとShadowbox jsをダウンロードし解凍。
  • 次に、shadowbox cssをメモ帳で開き、6箇所をアップロード先のURLに書き換え。
回答を見る
  • ベストアンサー

fc2blogでshadowboxを使用したいと思い

fc2blogでshadowboxを使用したいと思い http://pakun13.blog44.fc2.com/blog-entry-365.html のブログの記事を参考にして、自分のブログに導入しようと考え、記事に書いてあるように、CSSを書き換えて、必要な画像、JSなどをアップロードをし、テンプレートの編集でHTML編集を書き換えて、使用しようとしたのですが、動画がポップアップ表示されませんでした。 参考サイトを順に追っていきますと 最初に参考サイト 1～3に書いてあるように jQueryとShadowbox jsをダウンロードして解凍しました。 次に、参考サイト 4～5 に書いてあるように、LICENSE、README、shadowbox css　以外ををfc2にアップロードして、shadowbox cssをメモ帳で開きに下記の6点を書き換えました。 ○○○○にはアップロード先のURLが入ります。 {background:url(http://○○○○/loading.gif) no-repeat;padding-left:34px;display:inline-block;} {background-image:url(http://○○○○/close.png);} {background-image:url(http://○○○○/next.png);} {background-image:url(http://○○○○/previous.png);} {background-image:url(http://○○○○/play.png);} {background-image:url(http://○○○○/pause.png);} 書き換えたshadowbox cssをfc2にアップロードして、テンプレートの編集で〈/body〉の上に <script type="text/javascript" src="http://○○○○/jquery-1-4-2-min.js"></script> <link rel="stylesheet" type="text/css" href="http://○○○○/shadowbox.css"> <script type="text/javascript" src="http://○○○○/shadowbox.js"> <script type="text/javascript">Shadowbox.init({language: 'ja',players: ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv']}); </script> を貼り付けて更新ボタンを押して、新しく記事を書くで <a rel="shadowbox;width=動画の幅;height=動画の高さ" title="動画のタイトル" href="動画のＵＲＬ"><img src="サムネイル画像のＵＲＬ" width=サムネイルの大きさ border=0 </a> を使用してみましたが、ポップアップされずに、youtubeに飛ばされるだけでした。 知識がないので、参考ブログを参考にして自分なりにやってみましたが、shadowboxを使用する事が出来ませんでした。説明が分かり難いかもしれませんが、時間がありましたら、アドバイスして頂けると有り難いです。

質問者が選んだベストアンサー

  • ベストアンサー
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.3

なぜ、ポップアップしないのか解った気がします。 あなたのページにはshadowbox.js本体だけしかないからです。 ユーチューブ再生には、他に players/shadowbox-flv.js players/shadowbox-swf.js ．．．． とか個別にプレーヤーのJSファイルが必要です。とりあえず 最新のshadowboxに直リンクを張って、ADOBEのswfプレーヤーを使いましょう。 <script type="text/javascript" src="http://www.shadowbox-js.com/build/shadowbox.js" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> <!-- Shadowbox.init({ language: 'ja', players: ['swf','flv'] }); // --> </script> 記事本体 <div> <a href="http://www.youtube.com/v/92KD9W0K_4c&fs=1&source=uds&autoplay=1" rel="shadowbox;width=320;height=240;title='浅田真央';player=swf">浅田真央</a></div>

windowsweb
質問者

お礼

yyr446さん回答有難う御座います。 <script type="http://○○○○/player.swf" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> <!-- Shadowbox.init({ language: 'ja', players: ['swf','flv'] }); // --> </script> を入れる事によって、ポップアップで表示するようになりました。 出来たときは、飛び上がって喜んでしまいました。 yyr446さんには本当に感謝しています。最後まで質問に回答をして頂き有難う御座いました。

その他の回答 (3)

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.4

わかりにくい回答で申し訳ない。 どうもおかしいと思い、ShdowBoxの本家サイトをよく見ると ここ↓ http://www.shadowbox-js.com/index.html つい最近、バージョンアップされて、本体JSとCSSが書き換わってた。 新しいバージョン(V3.03)は、ダウンロードしたZIPセットの中身を そのまま同じディレクトリーに配置しておくだけで、何もいじらなくても mimeタイプ毎に自動的にプレーヤーが切り替わるみたいだ。 （以前は、もっと細かくライブラリーが分かれていて、本体JSが動的に<script> タグを生成して動的に読み込んでいた。） 　※でも、player=FLVを指定するとJWPLAYERが使われて、エラーが発生するみたいだ。 　　何か原因があるのかも．．．． 結論としては、下↓ http://www.shadowbox-js.com/download.html のページで、全部のチェックボックスにチェックを入れて、ZIPをダウンロードして解凍したファイルで、 ・Readme ・Licence を除く10個のファイルをそのまま、FC2ブログにアップロードする。－－－(1) テンプレート編集で、</head>の直前に <link rel="stylesheet" type="text/css" href="http://blog-imgs-34.fc2.com/y/o/n/※※※※/shadowbox.css" /> を書く----(2) 　　（※※※※はあなたのアカウント） その後に <script type="text/javascript" src="http://blog-imgs-34.fc2.com/y/o/n/※※※※/jquery-142min.js" charset="utf-8"></script> //jQueryは必須じゃないはずですが．．． <script type="text/javascript" src="http://blog-imgs-34.fc2.com/y/o/n/※※※※/shadowbox.js" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> <!-- Shadowbox.init({ language: 'ja', players: ['swf','flv'] }); // --> </script> を書く－－－－(3) （※SCRIPTは<head>の中でなく、記事の中に書いてもよい） 本文記事に動画URLへのリンクを張る(player=swfとしていしておく） <div style="text-align: center;"><br /> <a href="http://www.youtube.com/v/92KD9W0K_4c&fs=1&source=uds&autoplay=1" rel="shadowbox;width=320;height=240;title='浅田真央';player=swf"> 浅田真央</a> </div> 別に浅田真央の動画を進める訳じゃないですが．．．．　－－－－(4) 上記のやり方で、少なくとも私はできました。

windowsweb
質問者

お礼

yyr446さん回答有難う御座います。 <link rel="stylesheet" type="text/css" href="http://blog-imgs-34.fc2.com/y/o/n/※※※※/shadowbox.css" /> <script type="text/javascript" src="http://blog-imgs-34.fc2.com/y/o/n/※※※※/jquery-142min.js" charset="utf-8"></script> <script type="text/javascript" src="http://blog-imgs-34.fc2.com/y/o/n/※※※※/shadowbox.js" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> <!-- Shadowbox.init({ language: 'ja', players: ['swf','flv'] }); // --> </script> でもポップアップ表示することが出来ましたので、こちらに変更しておきました。 何度も回答して頂き、有難う御座いました。

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.2

<a rel="shadowbox;width=動画の幅;height=動画の高さ" title="動画のタイトル;player=flv" href="YouTubeの再生用URL" ><img src="サムネイル画像のＵＲＬ" width=サムネイルの大きさ border=0 </a> YouTubeの再生用URLとは、 :http://www.youtube.com/v/GrjgtS1t6aY&fs=1&source=uds&autoplay=1 みたいなやつで、'GrjgtS1t6aY'がYouTubeVideoのIDです。

windowsweb
質問者

お礼

yyr446さん何度も回答有難うございます。 http://www.youtube.com/v/GrjgtS1t6aY&fs=1&source=uds&autoplay=1のようなURLを使用して見ましたが、ポップアップ表示されませんでした。 <a rel="shadowbox" title="画像のタイトル" href="画像のＵＲＬ"> リンク名 </a>の画像の方も試して見ましたが、やはりポップアップ表示されなかったので、他に問題があるのかも知れません。 本当になんども回答して頂き申し訳ないです。

noname#119957
noname#119957
回答No.1

内容はわかりませんが。。とにかく。。 書き換えたshadowbox cssをfc2にアップロードして、テンプレートの編集で 〈/body〉の上に　 >>この部分ですが。。head内に移動させてください。 <head> <script type="text/javascript" src="http://○○○○/jquery-1-4-2-min.js"></script> <link rel="stylesheet" type="text/css" href="http://○○○○/shadowbox.css"> <script type="text/javascript" src="http://○○○○/shadowbox.js"> <script type="text/javascript">Shadowbox.init({language: 'ja',players: ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv']}); </script> </head>

windowsweb
質問者

お礼

ken_tyanさん回答有難う御座います。 〈/body〉の上から</head>の上に張り替えて見ましたが、うまく作動致しませんでした。 他に問題があるかもしれないので、もう一度確認してもみようと思います。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • shadowbox3.0.3で画像が開きません

    環境 Mac OSX DreamweaverCS5.5 上記環境でサイト制作しまして、Dwの"ブラウザでプレビュー"の使用してSafariとFirefoxで問題なく動作、表示する事を確認した後、FC2ホームページにアップロードしたところshadowbox.jsが動作せずに困っております。 具体的には <a href="image/image01.JPG" rel="shadowbox"><img src="image/image01_thumb.jpg"></a> とゆうコードでサムネイル画像をクリックして拡大表示したいのですが、クリックするとブラウザが暗転し"Loading"の文字とアニメーションが表示されますが、そこから進まず画像が表示出来ません。 またshadowboxの.jsファイルと.cssファイルを読み込む記述は以下のようになってます <link rel="stylesheet" type="text/css" href="js/shadowbox/shadowbox.css" /> <script type="text/javascript" src="js/shadowbox/shadowbox.js"> </script> <script type="text/javascript"> Shadowbox.init({ language: 'ja', players: ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv'] }); </script> これまでshadowboxに関するブログや質問など見てみましたが、特にコードの記述には問題が無さそうに思い、どこに問題があるのか全く分からなくなってしまいました。 これにはどのような問題が考えられるでしょうか？　初歩的な質問だとは思いますがよろしくお願いし致します。

    • ベストアンサー
    • CSS
  • shadowbox について

    最近「shadowbox」というJSが 3.0b にバージョンアップされ、それを使っている者です。 http://www.shadowbox-js.com/ そこで質問です。 画像とYOUTUBE動画はしっかりJSが働きますが、「shadowbox」のウリでもあるイメージマップとサイト表示ができません。 head内記述は以下の通りです。 <link rel="stylesheet" type="text/css" href="***/shadowbox/shadowbox.css"> <script type="text/javascript" src="***/shadowbox/shadowbox.js"></script> <script type="text/javascript"> Shadowbox.init({ language: "en", players: ['img', 'html', 'iframe', 'qt', 'wmp', 'qtwmp', 'swf', 'flv'] }); </script> 「shadowbox.css」と「shadowbox.js」は公式HPで使用されている物をそのままコピーした物を使っています。 http://www.shadowbox-js.com/src/shadowbox.css http://www.shadowbox-js.com/src/shadowbox.js イメージマップについては、公式サイトのソースでは画像アドレスに対して「rel="shadowbox"」の記述が全くないのにJSが動作しているという謎仕様。 同じようにしたり、rel属性を付けても画像が普通に表示されるだけでJSが働きません。 htmlについては、リンクアドレスが「***.html」の場合のみJSが働きますが、「***.co.jp」などの場合は働きません。 色々調べたのですが、3.0bは最近公開された事もあってか、日本語で説明されたHPが見あたりません。 海外サイトを翻訳したりして調べても、そもそも当方はJS初心者なので理解に苦しんでおります。 おそらく「shadowbox.js」が原因だとは思うのですが、行数も多くどこの記述で何が変わるのかさえ判らない状態で困っております。 どなたか、無知な私にご教示願えないでしょうか。

  • shadowbox.jsについて

    shadowbox.jsとslimbox.jsを併用したいと考えています。 もともとshadowbox.jsをPrototypeで使用し、HTMLを呼び出すのに使用していたのですが、 画像のライトボックス表示にslimbox.js（jquery使用）を使いたいと思い、 両方とも記述したらshadowboxの方が正常に動作しなくなりました。 何か解決策はありますでしょうか。 非常に困っています。お願いします。 ちなみに以下の様なコードをhead内に記述しております。 <script src="../../common/js/prototype.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="../../common/js/shadowbox/shadowbox.css"> <script src="../../common/js/shadowbox/shadowbox.js" type="text/javascript"></script> <script type="text/javascript">Shadowbox.init();</script> <link rel="stylesheet" type="text/css" href="shadowbox.css"> <script type="text/javascript" src="shadowbox.js"></script> <script type="text/javascript">Shadowbox.init();</script> </script> <link href="../../common/css/slimbox/slimbox.css" type="text/css" rel="stylesheet" media="screen" /> <script type="text/javascript" src="../../common/js/jquery.js"></script> <script type="text/javascript" src="../../common/js/slimbox.js"></script> <script type="text/javascript"> //slimbox $(document).ready(function() { $('a[rel*=lightbox]').slimbox(); }); </script>

    • ベストアンサー
    • CSS
  • fc2blogでshadowboxを使用したいと思い

    fc2blogでshadowboxを使用したいと思い http://pakun13.blog44.fc2.com/blog-entry-365.html のブログの記事を参考にして、自分のブログに導入しようと考え、記事に書いてあるように、CSSを書き換えて、必要な画像、JSなどをアップロードをし、テンプレートの編集でHTML編集を書き換えて、使用しようとしたのですが、動画がポップアップ表示されませんでした。 間違いを見つけようと、参考の記事を確認しながら、三回程間違いを探してみましたが、私の中では間違いを見つけられませんでした。 この辺を確認したら良いなどのアドバイスや参考ブログで気づいた事がありあしたら、回答宜しくお願い致します。

  • Shadowbox.jx3.0.3が動かない。

    初めまして、このたびlightbox風のjqueryに惹かれて、shadowbox.jsの導入を考えております。。。が、 公式ホームページでadapterに jQuery を選び、ZIPを解凍して、一番簡単そうな画像表示を試みてみましたが上手くいきません。 色々な解説サイトを見ましたが、手順どおりやってはいるつもりなのですがお手上げになってしまいました。 何度試みても、ただ画像にリンクするだけで、lighboxらしい動きになりません。 以下にソースを掲載させて頂きますので、どうかお力添えお願い致します。。 <html> <head> <title>test</title> <link rel="stylesheet" type="text/css" href="shadowbox.css"> <script type="text/javascript" src="shadowbox.js"></script> <script type="text/javascript"> Shadowbox.init(); </script> </head> <body> <a href="1.jpg" rel="shadowbox" title="My Image">My Image</a> </body> </html> ※index.htmlやshadowbox.css ,shadowbox.jsは全て同階層です。 jqueryもDLして、ヘッダ部分に <script type="text/javascript" src="/jquery-1.5.1.min.js"></script> という一文も入れてみましたが全く動かない状態です。 説明足らずな点も多いと思いますが、どうぞよろしくお願いします。

    • ベストアンサー
    • HTML
  • Shadowboxを使い方が分からない

    下記のサイトを参照して、Shadowboxの運用を試みています。ただ、このサイトには、ダウンロードしたShadowboxデータをどこに格納するのか詳しく書かかれていないので、格納する場所が分かりません。どうかご教授下さい。 *************************************************** 私の運用現状(ある程度フォルダーを分けました。) top folder (全てこのフォルダーに下記データを格納) ⇂ ⇂➝css (folder) ⇂ ⇂ ⇂ ⇂➝shadowbox.css ⇂ ⇂➝images (folder) ⇂ ⇂ ⇂ ⇂➝close.png、 loading.gif next.png、pause.png、play.png、previous.pngが(imageフォルダ)入っている ⇂ ⇂➝js　(floder) ⇂ ⇂ ⇂ ⇂➝shadowbox.js ⇂➝img　(表示する画像や動画) ⇂ ⇂➝huku.html ダウンロードしたShadowbox-3.0.3内にある”LICENSE”ファイルと”README”ファイルは上のどこに置くのでしょうか。 **************************************** lightbox系プラグイン「Shadowbox.js」が便利でかっこいい http://sterfield.co.jp/designer/lightbox%E7%B3%BB%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%8Cshadowbox-js%E3%80%8D%E3%81%8C%E4%BE%BF%E5%88%A9%E3%81%A7%E3%81%8B%E3%81%A3%E3%81%93%E3%81%84%E3%81%84.html ************************** link type="text/css <script type="text/javascript" cssもjavascriptもダウンロードしたShadowbox内にデータがあるのでしょうか ********************

    • ベストアンサー
    • HTML
  • FC2 ブログで動作しない jQuery

    http://www.texotela.co.uk/code/jquery/newsticker/ を参考にページを作成して、ウェブに公開したら、思い通りに動作する様になったのですが、いざ、使用目的先の FC2 ブログに移行すると、どうやっても正常に動作しません。一体何が原因なのでしょうか？FC2 ブログ以外の FTP サーバーにアップロードしたのは正常にフェードアウトして、テキストが変わるのですが、FC2 ブログの場合は、リストのマークが表示され、フェードしないで、項目が全て表示されてしまいます。 ヘッダにソースを入れ <script type="text/javascript" src="http://xxx.xxx/headlines/jquery_min.js"></script> <script type="text/javascript" src="http://xxx.xxx/headlines/jquery_newsticker.js"></script> <script type="text/javascript"> $(document).ready( function() { $("#news").newsTicker(); parseSamples(); } ); </script> CSS をスタイルシートに入れ ボディに <ul id="news"> <li>項目1</li> <li><項目2</li></ul> を入れてるのですが、フェードしたり、リストのマークが消えなかったり、項目の一覧が表示されて、望み通りの結果が出ません。FC2 ブログでは利用出来ないのでしょうか？

  • FC2ブログに画像が貼れない

    ハジメマシテ FC2ブログでブログの記事に画像を貼ろうとし マイピクチャから参照して記事にアップロードしようとすると アップロードに失敗しました。拡張子が対応していません。 * アップロードできるファイルは、500KBまでの拡張子jpg,gif,png,mid,swf,ico,mp3,html,txt,css,js,rdfです。 * banner.jpg,banner.png,banner.gifいずれかのファイル名でアップロードした場合外部URLから呼び出せます。 って出るんですけど解決策がわからないです・・ ちなみに画像は大きくなく、２５０KBくらいなんですが・・ 載せれる様になる方法を教えてくれませんか？

  • 画像拡大機能のjsをスマホで読み込まない

    ホームページの画像拡大表示に、shadowbox.jsを使っています。 このような画像拡大機能を持つJavaScriptjsをスマホで読み込まないHTMLの書き方を教えてください。 <head>内に、以下のように記述しています。 <link type="text/css" href="../css/shadowbox.css" rel="stylesheet" media="all" /> <script type="text/javascript" src="../js/shadowbox.js"></script> <script type="text/javascript"> Shadowbox.init(); </script> PCでこのホームページを表示させた場合は問題無いのですが、スマホではshadowbox.jsを動作させたくありません。 そのための手法を教えてください。 PC・iPadで動作、スマホ（iPhone・Android）で動作させないの区分けで考えています。 または、shadowbox.jsと同じような画像拡大表示jsのケースでも、結構です。 以上、ソースで書いていただけると助かります。 よろしくお願いいたします。

  • [FC2] FC2ブログで絵文字を使うには？

    FC2ブログのコメントで絵文字を使う為にはどうしたらよいのでしょうか？ 私が使っているテンプレートは最初絵文字を選択することができなくて 自分で追加してみたのですが FirefoxやOperaなどではちゃんと絵文字を選択できるのですが IEだとできないもので困っています・・ テンプレートのコメントエリアに <script type="text/javascript" src="http://blog77.fc2.com/load.js"></script> を書いているのですが、何か間違っているのでしょうか・・ ご存知の方がいらっしゃったら教えてくだされば幸いです。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する