HPにスライドショーが反映されません。

前へ 次へ
このQ&Aのポイント
  • Macユーザーの方がHPにスライドショーを反映させる方法を教えてください。
  • HTMLタグを使用してスライドショーを設置しましたが、写真が反映されずデザインも崩れます。
  • 他のサイトに掲載されているタグを試してみましたが上手く反映されません。お力をお借りしたいです。
回答を見る
  • ベストアンサー

HPにスライドショーが反映されません。

Macユーザーです。OSは10.9.5です。FC2でページを作っています。 HPにスライドショーを設置したいと思い、HTMLタグを用いてページの編集をしました。 ですが、写真が反映されなかったりページのデザインが崩れたりしてしまいます。 こちら(http://matome.bgah.jp/2014/01/javascript-bxslider/)にあるスライドショーの最終形が理想だったので、HTMLタグは本当にそのまま貼り付けて、写真はFC2のディレクトリ内にあるので既存のアドレスと置き変えました。結果、写真は反映されましたが大きさが変えられず、画面いっぱいいっぱいに表示されてしまいました。 またどこもソフトのダウンロードが必須なようで、添付先のURLに書いてある必要なものはダウンロードしました。ただ、ファイルを同じ場所に作る、imgファイルを作ってそこに使いたい写真を入れる、というのも何だか疑問です。HPのタグではPCに入っているものに干渉できませんよね？ここの説明がよくわかっていないから出来ないのでしょうか？ URL先のような綺麗なスライドショーを作るにはどうしたら良いのでしょうか… 他のサイトに掲載してあるタグを試しにやってみても上手く反映されませんでした。 タグを使わなくても簡単に出来る方法があればそれも教えて頂きたいです。 どうか詳しい方、お力を貸してください…

  • Mac
  • 回答数2
  • ありがとう数0

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

  • ベストアンサー
  • toast5
  • ベストアンサー率37% (239/638)
回答No.1

そのうまくいかないページのURLをここに晒してくれれば話は早いのに・・・ 「HPのタグではPCに入っているものに干渉できませんよね」という一文を見ても、 「ソフト」という語の用法を見ても、何かまだ根本的なところを 理解しておられない、ような気がします。でも大丈夫です。すべては慣れです。 >写真は反映されましたが大きさが変えられず 写真のサイズはあらかじめ調整しておいた方がいいです。 その、画像ファイル自体のサイズを。 えー、デスクトップにひとつフォルダを作ってください。 フォルダ名はとりあえず「test」。 で、以下の６つを「test」の中に（同一階層に）置きます。 http://jquery.com/download/からダウンロードした ▼「jquery-1.11.1.min.js」 http://bxslider.comからダウンロードした「jquery」フォルダの中の、 ▼「images」フォルダ（スライドショーの部品が入ってる） ▼「jquery.bxslider.css」 ▼「jquery.bxslider.js」 以下は自分で作る。 ▼「sample1.jpg」から「sample4.jpg」までを入れた「img」というフォルダ ▼test.html 以上、三角形つけた６つです。６つを、並列に置く。ここまで、いいですか。 ちなみに CSSファイルとかJavaScriptファイルとかは 「ソフト」じゃないです。あくまでファイル。 で、最後の「test.html」の中身は、以下をコピペ。 「<div align="center">」なんてのは褒められたもんじゃないのかも 知れませんが、いつの日にか、慣れたらてきとうに改善してください。 <!--↓↓↓ここから--> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>sample</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> <!-- body {margin-top:100px; } --> </style> </HEAD> <body bgcolor="FFFFFF"> <script type="text/javascript" src="jquery-1.11.1.min.js"></script> <script type="text/javascript" src="jquery.bxslider.js"></script> <link href="jquery.bxslider.css" rel="stylesheet" /> <script type="text/javascript"> $(document).ready(function(){ $('.bxslider').bxSlider({ auto: true, //自動再生有効 slideWidth:600, //スライドショーの幅 }); }); </script> <div align="center"> <ul class="bxslider"> <li><img src="img/sample1.jpg"></li> <li><img src="img/sample2.jpg"></li> <li><img src="img/sample3.jpg"></li> <li><img src="img/sample4.jpg"></li> </ul> </div> </body> </html> <!--↑↑↑ここまで--> 以上の結果↓ https://dl.dropboxusercontent.com/u/47661325/test/test.html https://dl.dropboxusercontent.com/u/47661325/test.zip あと、HTML関連の話題では、MacユーザーだとかOSのバージョンとかは 基本的に無関係です。だから今後はこっち↓の方がいいかも。 http://oshiete.goo.ne.jp/category/252

umi7373
質問者

補足

toast5様 ご指摘とご指導ありがとうございます。 今までより一番形に近く作製することができました。 ですが、何故か写真の反映が出来ません…test.htmlを開いても、何も無いスライドが展開されるのみです。 これはどのように解決したら良いのでしょうか… 写真の大きさを、頂いたものと同じくらいの大きさにしても反映されませんでした… https://www.dropbox.com/sh/ily44a9h2atrqge/AAAeRDM4S0vdI0bU1QnWhPg9a?dl=0

その他の回答 (1)

  • toast5
  • ベストアンサー率37% (239/638)
回答No.2

あと、URLの末尾に余計なカッコがついてるので、 クリックしても404エラーになります。正しくはこう。 http://matome.bgah.jp/2014/01/javascript-bxslider/ あと、 >imgファイルを作ってそこに使いたい写真を入れる それはファイルじゃなくて、フォルダです。

  1. カテゴリ
  2. パソコン・スマートフォン
  3. Mac

関連するQ&A

  • おすすめのスライドショーを作るソフトを教えて下さい

    ホームページに、写真が見れるギャラリーのページがあり、スライドショーを使って写真を公開しています。 HPを作るときに使った「ホームページ　ビルダー」内にある機能を使い、スライドショーを作ったのですが、新しい写真をアップする時に、既存のスライドショーに追加が出来ず、毎回初めからの作り直しをしなくてはならず、どうにかならないものかと、思っています。 スライドショーは、どのソフトを使っても、後から写真を足す事は出来ないものなのでしょうか？ スライドショーを作るソフトがたくさんあるのも知っているのですが、どのソフトを使えば、求めている事ができるのか、いまいち解らず、困っています。 HPも、スライドショーも、初めて作ったので、そういった作業が、あまり得意ではありません。 初心者でも使いやすく、私の求める用途に合ったスライドショーが作れる、ソフトを御存じの方、教えて頂けないでしょうか？ できれば、フリーソフトを希望しています。 宜しくお願い致します。

  • ウェブサイトのスライドショーについて

    ウェブサイトでよくトップページなどに写真のスライドショーがありますが、あのスライドショーはどのようなファイル形式で作ったらいいのでしょうか。 ・・・MP4、、、SWF、、、どれも一長一短な感じなのですが、どの形式が主流なのでしょうか。 どうぞよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • ＨＰにスライドショーをのせたいのですが…

    自分の店のＨＰを作ろうとおもっているのですが、トップページとスタッフ紹介にスライドショウを入れたいのですが、どのようにしたら良いのでしょう？出来れば写真が「パッパッ」と切り替わるのではなく、フェードイン、フェードアウトで切り替わってほしいのです。 かつ、そのページを開いたときに写真がページ内をスライドしてほしいのですが…。初心者には無理ですか？ ちなみにソフトはＨＰビルダーver11のプレミアパックを買ったので、 「Free motion」なるflash作成ソフトがついております。が、なんせど素人なもんで全然使い方がわかりません。 イメージとしてはこのようなＨＰにしたいのですが…。 http://www.devinyl.net/main.html

  • スライドショー

    　過去の「教えて」に回答された写真のスライドショーの作り方の説明では、やり方が理解出来ません。ものすごく簡単で、分かりやすい、作り方を教えてください。 　スライドジョーを作ってＨＰに載せたいと考えています。

  • bxsliderでスライドショーの間違い教えて

    ホームページ制作素人の質問で申し訳ありません。 「bxslider」を用いてスライドショーを作成しようとしていますが、jQueryのホームページから必要ファイルをダウンロードし、ガイドに従いサンプルをコピペして一番基本的な(と思われる)ものを作成してみましたが、張付けた画像が4枚縦に並んで表示されるだけで、「スライドショー」的なものになりません。 プログラムの理解が基本的に不十分な素人の厚かましい質問で恐縮ですが、下記の記述のどこが間違っているか、どう修正すれば良いか、などどなたかご教示下さればありがたく思います。 <head> <!-- jQuery library (served from Google) --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <!-- bxSlider Javascript file --> <script src="jquery.bxslider.min.js"></script> <!-- bxSlider CSS file --> <link href="jquery.bxslider.css" rel="stylesheet" /> </head> <script type="text/javascript"> $(document).ready(function(){ $('.bxslider').bxSlider({auto: true,autoControls: true}); </script> <ul class="bxslider"> <li><img src="http://www.geocities.jp/画像ファイル1.jpg" /></li> <li><img src="http://www.geocities.jp/画像ファイル2.jpg" /></li> <li><img src="http://www.geocities.jp/画像ファイル3.jpg" /></li> <li><img src="http://www.geocities.jp/画像ファイル4.jpg" /></li> </ul> </html>

  • ＨＴＭＬファイルのスライドショー

    ＨＴＭＬファイルのスライドショーを作成してくれるようなソフトってあります？ ＃たとえば２０個のHTMLファイルがあるフォルダを対象。 ＃ソフトで、そのインデックスページもどきを作成してくれる。 ＃クリックして次々表示。

  • スライドショーのようなＨＰを作成したい

    写真中心のＨＰを作成しています。 ＨＰを開いて、ボタンを押すと、windowsXPのスクリーンセーバーにあるスライドショーのように、表示させる事は、出来るのでしょか？ ソフトには、どんな物があるのでしょうか？

  • ＨＰのスライドショーがエラーになります。

    パソコン初心者です。 ＨＰでの写真のスライドショーをみると、エラーがでて、ストップしてしまいます。 Internet Explorerを8に戻せば見ることができます。 どうすれば、戻さずに見ることができるでしょうか？ 分かりにくい説明で申し訳ありません。よろしくご回答をお願いします。

  • インナーフレーム内で、HPのスライドショー的なものを作りたいです。

    インナーフレーム内で、HPのスライドショー的なものを作りたいです。 具体的には、 １．数種のURLをピックアップしておく ２．インナーフレーム内に、別のHP(の一部分)を表示 ３．数秒おきに、別のページを順次表示 としたいです。 初心者でこれから勉強するのですが、似たようなソフトは無いか、こういったことが可能かどうかだけでも知りたいです。 ご存知の方がいらっしゃいましたら、よろしくお願いいたします。

  • JavaScriptでスライドショーを作ってみたい。

    毎回お世話になっています。 僕は最近HP製作をしていて、だんだん慣れてきたので、JavaScriptやHTMLなどのスクリプト系にチャレンジしています。 ネットで調べてみると、JavaScript使ってスライドショーができるそうなのですが、スクリプトをコピーしてやってもうまくいきません。 http://www1.seaple.ne.jp/sirayuri/tenji/kawazu/kawazu.htm 上のアドレスのようにある、スライドショーのようにクロスフェードしながら写真を変えたいのですが、写真の一部しか出てこない、2枚目の写真が出てこないような問題が出てきます。 prImg1.srcの部分もわからないので、下のような感じでよろしいのでしょうか？ prImg1.src="L:\***\img\top_pict.png"; SRC=保存先指定ですか？ スクリプトの説明を見ていてもよくわからないので、ここに質問させていただきました よろしくお願いしますm(_ _)m

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する