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を使用する事が出来ませんでした。説明が分かり難いかもしれませんが、時間がありましたら、アドバイスして頂けると有り難いです。
お礼
黄色い点は画面から言うとなるべく下の方でバラつきがなければ 問題ないと言うことですね。 分かり易い解説をして頂き、ありがとう御座います。