fc2blogでshadowboxの導入に関する問題

このQ&Aのポイント
  • fc2blogでshadowboxを導入する際に動画がポップアップ表示されない問題が発生しています。
  • 参考にしたブログの記事を確認しながら間違いを探してみましたが、解決できませんでした。
  • アドバイスや参考ブログで気づいたことがあれば、教えていただきたいです。
回答を見る
  • ベストアンサー

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

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

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

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

関係ないかもしれませんが、shadowboxを使うのにjQueryは必須でありません。 jQueryの機能を使わないなら、 shadowbox.jsとshadowbox.cssのみで動作します。 私も前にfc2blogでshadowboxを試した事あります。ご提示の記事のように テンプレートにshadowbox.cssとshadowbox.jsを追加するだけで、 できたと記憶してます。 あなたが何故できないかは、コードを少しでも出してくれないと推測困難です

windowsweb
質問者

お礼

Flickrの質問と合わせて何度も回答して頂き有難う御座います。 補足を書いたのですが、一部間違えている所がありましたので、 http://okwave.jp/qa/q6007162.html にもう一度質問を立てました。 時間がありましたら、回答頂けると有り難いです。

windowsweb
質問者

補足

yyr446さん回答有難うございます。 コードについてですが、参考サイトを順に追っていきますと 最初に参考サイト 1~3に書いてあるように jQueryとShadowbox jsをダウンロードして解凍しました。 次に、参考サイト 4~5 に書いてあるように、LICENSE、README、shadowbox css 以外ををfc2にアップロードして、shadowbox cssをメモ帳で開き画像のように書き換えました。 書き換えた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="動画のURL"><img src="サムネイル画像のURL" width=サムネイルの大きさ border=0 </a> を使用してみましたが、ポップアップされずに、youtubeに飛ばされるだけでした。 知識がないので、参考ブログを参考にして自分なりにやってみましたが、shadowboxを使用する事が出来ませんでした。説明が分かり難いかもしれませんが、時間がありましたら、アドバイスして頂けると有り難いです。

関連するQ&A

  • 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="動画のURL"><img src="サムネイル画像のURL" width=サムネイルの大きさ border=0 </a> を使用してみましたが、ポップアップされずに、youtubeに飛ばされるだけでした。 知識がないので、参考ブログを参考にして自分なりにやってみましたが、shadowboxを使用する事が出来ませんでした。説明が分かり難いかもしれませんが、時間がありましたら、アドバイスして頂けると有り難いです。

  • fc2ブログのカスタマイズ

    fc2ブログを普段使っているのですが、 ちょいとわからないところがあるので質問させていただきます。 何がしたいのかというと ○トップページのメインカラムに、最新記事ではなく、記事一覧を表示させたい。 ○その記事一覧は、タイル状に配置したい。 こんな風に。 http://harapekoandhighfly.blog106.fc2.com/ ○テンプレートは http://birith.blog84.fc2.com/blog-entry-5.html?template=Fons03_2c&i... を使っている。 分かりにくいかもしれませんが 詳しく教えてください。お願いします。

  • 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」が原因だとは思うのですが、行数も多くどこの記述で何が変わるのかさえ判らない状態で困っております。 どなたか、無知な私にご教示願えないでしょうか。

  • 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
  • high slideをFC2ブログで

    http://saruyan.blog61.fc2.com/blog-entry-216.html こちらのサイトさんの記事を参考にして、highslideをFC2ブログに導入して、起動したのですが何枚も続けて画像を貼り付けると画像の右側にマージンが入るのですが、これを無くすためにはhighslideのどこを書き換えれば直るのでしょうか? こちらがサンプルページになります http://sampleyoudesu.blog.fc2.com/blog-entry-1.html 使用しているhighslideのバージョンは3.3.8になります。 回答の方宜しくお願い致します。

  • 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
  • FC2ブログのテンプレート設定CSSが分りません

    http://mysticdiary.blog99.fc2.com/blog-entry-373.html この方の配布されているテンプレートをどうしても使わせて頂きたいのですが うまくできません。 ホームページビルダーなどでホームページを作ったり、HTMLは多少分かる程度なのですが CSSは全くわかりません。 勉強しなければ駄目ということも分かっておりますが、これを設定するのに どういった勉強をしたら良いでしょうか。 参考になるようなアドバイス、サイトや書籍などを教えて下さい。

  • FC2ブログの使い方を教えて下さい。

    FC2ブログの使い方を教えて下さい。 FC2ブログを開設したのですが (1)FC2ID管理画面がどこにあるのかわかりません。 参照/http://k242.blog13.fc2.com/blog-entry-252.html (2)「過去の記事の管理」→「選択した項目の一括設定」→「コメント×トラックバック×」を選択して、適用ボタンを押しても 「受け付ける」になったままです。 記事にチェックはいれています。 原因としてはどういったことが考えられますか。 初期設定ではコメント、トラックバックとも「受け付けない」を選択しています。 ブログページにコメント・トラックバック欄は表示されていないので 受け付けない状態に設定されているのでしょうか。 参照/http://k242.blog13.fc2.com/blog-entry-253.html

  • FC2ブログ タイトル一覧

    http://pepe6868new.blog113.fc2.com/blog-entry-85.html ここにある記事のタイトル一覧みたいにしたいのですが どういう手順ですればいいのでしょうか。 やっぱりHTMLとかCSSを書き換えないとダメですか? カテゴリとは別なのかな・・ 知ってる方がいましたら回答よろしくお願いします。

  • fc2ブログのプラグイン

    すみません。 ほとんど、HTMLはわかりません。 fc2のブログで下記のプラグインを使っているのですが ttp://pcafe.blog3.fc2.com/blog-entry-304.html このままだと、新しい記事が小さな数字になり 古い記事が大きな数字になります。 これを逆にしたいのですが出来ますでしょうか。 よろしくお願いします。

    • ベストアンサー
    • HTML

専門家に質問してみよう