それらのショップにはほとんどの場合「動くバナー」が設置されていたりしませんか?「どうやってやるんだろう」「うちの店舗では無理だな」そんな風に思っている担当者の皆様ご安心下さい。ハカセの研究室なら簡単にコピペだけで導入出来ます。今まで出来なかった事が出来る。うざい感じで始まりましたが、本日はやってみたいと考えてる方も多いはずの「jQuery(ジェイクエリー)」を使用した動くバナーの導入方法を説明します。jQueryとは?オープンソースのJavaScriptライブラリの一つ。Team」が開発・メンテナンスしている。これだけ読んでもさっぱり何の事かわからないかも知れません。実際私は1ミリも解りませんが、簡単に説明するとJavaScriptというプログラム言語を簡単にしてくれる拡張パーツみたいなものです。(多分...)「簡単にしてくれる」と書きましたが、正確には「少ないコードで」と言った方が正しいかも知れません。コードが少なくて済めば当然ページは軽くなるので、読み込みで待たされる様な事も少なくなります。大きなメリットとしては、ほとんどのデバイスのほとんどのブラウザで動いてくれると言う事があります。一昔前、ホームページの動くパーツと言えばgifアニメかFlashでした。Flashはプレイヤーがインストールされていないと再生出来ない(動かない)うえ、iPhoneやiPadなどのiOSでは実質再生不可だったりと不便でした。(もちろん便利な点もたくさんあります)そこでここ数年人気になって来たのがjQueryを使った数々の仕掛け。動くバナー、ロールオーバーのアクション、スムーススクロールなど実に多くの事に使われています。このサイトでも派手なところから地味なところまで、結構な数のjQueryのコードが動いています。ちなみに画面左下にあるページ上部へ戻るボタンを押すとスムースに上部までスクロールするのですが、そちらのコードはこんな感じ。false;});});ちなみにこのサイトを参考にしました。KLUTCHEたったこれだけのコードで「アンカー(#)へのリンクをクリックしたらニューンとスムーズにスクロールしろ」的な事を実現しているのです。仕組みは良くわかりませんがすごい奴です。jQueryは出来る子です。やってjQueryを(正しくはjQuery依存のコードを)楽天のページで動かすのか。jQueryバナー実装の流れバナーの画像を用意jQueryファイルのリンクを貼るJavaScriptとHTMLを書くCSSで調整(必要であれば)iframeで商品ページやカテゴリページに読み込むなぜわざわざiframeで読み込むのかというと、商品ページやカテゴリページなど楽天RMSで作るページにはscriptタグが使用出来ないからです。楽天ショップで外部スタイルシートを利用する方法バナーの画像を用意こればっかりはこちらで用意出来ないので、ご自分でご用意下さい。記事内ではダミーの画像を使用します。ダウンロードして下さい。2.0.2」のリンクを右クリックしてファイルを保存して下さい(Macの方はoption+クリック)。ダウンロードした「jquery-2.0.2.min.js」をGOLDにアップします。アップしたjQueryライブラリファイルを読み込むタグを、GOLDのページの</body>の直前あたりにコピペ。src="アップした「jquery-2.0.2.min.js」のURL"></script>JavaScriptとHTMLを書くここでちょっと補足説明。バナー」とかで検索すると色々なコードが公開されていますが、そのコードには「プラグイン」タイプと「コードのみ」のタイプがあります。「プラグイン」タイプの場合は、コードが外部ファイル(~.jsというjavascriptファイル)になっているので、上で読み込んだjQueryのライブラリファイルと同じようにGOLDにアップした上でリンクを貼ります。type=”text/javascript”></script>で囲んで該当のコードを記載します。※なんでjavascriptを<body>の最後に書くかって言うのは、めんどくさいので説明しませんがその方がページの読み込みが早いからと覚えておいて下さい。実際にやってみるここを参考に作って見ます。jQueryでレスポンシブ対応のサムネイル付きクロスフェードスライドショーを作る方法|BlackFlagリンク先の説明通りに作ってみれば、ほとんど調整しなくても簡単に出来るはずです。(感謝です)GOLDにアップするページのソースはこんな感じになるはずです。setInterval(function(){switchNext();},delayTime);}timer();}});});});</script></body></html>AKIKO様のご指摘によりスタイルシートを一部修正。2013/11/19見本はこんな感じです。※文字コードを楽天ページ用に「euc-jp」に修正しました。2013/10/22CSSで調整(必要であれば)今回は参考にしたblack-flag.netさんで全部用意してくれてたので、サクッとコピペのみで行けました(感謝・感謝)が、iframeで読み込む事を考えて下記の1行を追加しました。margin:0;}/*全体の入れ物を左寄せに*/iframeで商品ページやカテゴリページに読み込む出来たページの動作確認をしたら、GOLDにアップして、バナーを置きたいページの置きたい部分に下記のコードを追加します。align="left"></iframe>こんな感じで表示されるはずです。なんだそんなに難しくないじゃんどうでしょう、私の文章力の無さで説明は長くなってしまいましたが、仕組みさえわかってしまえばそんなに難しくないのではないでしょうか。動くバナーを設置したらすぐ売上が上がるってものではありませんが、人気【ひとけ】を演出できたり、狭いスペースで複数の商品へのリンクが設置出来たり、動く事で目立ったりとメリットは少なからずあります。ネット上にはまだまだたくさんのコードが公開されていますので、色々と導入してみてはいかがでしょう(やりすぎ注意です)。毎日少しづつでも「お客さんが来たくなる売り場」「安心して買いたくなる売り場」を作っていく事が大事だと思います。17:05博士様こんにちは。何かご助力いただければと思います。08:56mmmtonatto様コメントありがとうございます。Chromeなどのブラウザに入っている保護機能の事らしいので、他のブラウザで見てみるとかすると見られるかも知れません。私もよくわからなくてごめんなさい。15:48博士さま初心者ですので、申し訳ございませんがもう少し詳しく教えていただければ助かります。ダウンロードした「jquery-2.0.2.min.js」をFTPでアップしました。アップしたjQueryライブラリファイルを読み込むタグを、GOLDのページというのがいまいち勉強不足で分かりません。当方、楽天でTOPページはGOLDではなく直接RMSを利用しております。お手数ですが宜しくお願いします。22:39安森さま返事が遅くなりましたがコメントありがとうございます。javascriptってやつは、RMSで作るページでは使えません。(使おうとしても”許可されてないHTMLが含まれてます”みたいなエラーが出ます)そのためGOLDの領域(FTPでアップする奴)にHTMLファイルを用意して、そこでjQueryを動かす必要があります。この記事で言うと「GOLDにアップするページのソースはこんな感じになるはずです」のあとのコードをメモ帳などにコピペして「○○.html」というファイル名で保存し、FTPでアップする必要があります。src="jquery-2.0.2.min.js"></script>って部分で読み込んでいます。「src=”jquery-2.0.2.min.js”」の部分でアップした「jquery-2.0.2.min.js」のURLを参照しているのですが、HTMLファイルと同じディレクトリ(フォルダ)にアップしたのであればそのままでいけますが、別のディレクトリにアップしたのであれば、変更する必要があります。(URLの参照の仕方が分からなければこちらを参考にしてみて下さい。絶対パスと相対パス|WEBページ作りのお勉強そしてそのFTPでアップしたHTMLファイルを「iframeで商品ページやカテゴリページに読み込む」以下のコードを参考に必要なページ(バナーを設置したいページ)に読み込むって感じです。(FTPでアップしたファイルのURLは、アップ先のフォルダを特に指定していなければ、「http://www.rakuten.ne.jp/gold/あなたのお店の固定URL/○○.html」の様になるはずです。)文章が下手で申し訳ありませんが、お役に立てば幸いです。17:13初めましてこんにちは!わかりやすい、説明ありがとうございます。CHROMEでは、表示されるのですが、IEでは、iframeの場所が真っ白になってしまいます。18:00平山様コメントありがとうございます。考えられる原因としては「HTMLの文法間違い」や「文字コードの間違い」などでしょうか。ソースコードをこちらのページなどでチェックしてみてはいかがでしょう。HTML構文チェックサービス文字コードに関しては楽天のページは基本的に「euc-jp」です。書いてて気が付きましたが、見本のHTMLは「utf-8」になってますね・・・。(直しておきます)どうしてもわからなければ、ソースコードをメールで頂くか、サイトのURLを教えて下されば、分かる範囲でお答えしますよ。(直ぐに返事出来るとは限りませんが・・・)よろしくお願いします。htmlの部分の指示ができていなかったようです。そこの部分を修正すると解決できました。13:35あと追加で質問なのですが、スライドショーをランダムに表示するなどは、簡単に指示できるものでしょうか?連続での質問失礼します。解決してなによりです。技術系の問題は解決しないとヘコミますよね。私も現在進行中で問題が・・・それは置いといて、ランダム表示の件ですが、javascriptを理解していれば出来ます。そんなに簡単では無いと思います。現実的なところで言えば、ランダム表示に対応したjQueryのプラグインなどを探すのが早いと思います。わかって来たらチャレンジしてみるのも面白いと思いますよ。01:21博士様とてもわかりやすい解説でありがたく拝読致しました。平山様と同じ現象について相談させてください。上記コードを参考にhtmlを組みGOLDへアップロード→iframeで読み込み→IEは真っ白、IE以外のブラウザでは表示OK。タグを確認するとUTF-8になっていたので、平山様とのやりとりを拝読し、意気揚々とeuc-jpへ変更すると、IEのみならず、SafariやChromeでも真っ白の表示になってしまいました。<UTF-8>IEのみ真っ白、他ブラウザ表示OK。<EUC-JP>全ブラウザ真っ白。DOCTYPE宣言が原因なのか?と平山様の書き込みと見本ページのソースを手がかりにタグを見てみましたが、良くわからなくなってしまいました。DOCTYPEはと書いていれば間違いないのでしょうか。?教えて頂けると助かります。19:32toriii様コメントありがとうございます。doctypeはこんな感じであれば大丈夫だと思います。charset=euc-jp"><title>無題ドキュメント</title></head><body></body></html>あとはエディタ(HTMLを書いているソフト)がeucに対応している必要があると思います。宣言文だけでなくソフト側から文字コードを変更する必要があるのかも知れません。参考になればTerapadで簡単コード変換あとはソースコードを見てみないとなんとも言えないかなぁ・・・。21:39博士さまご教授ありがとうございます。Weaverを使っています。Transitionalで作成し、下記宣言で書きましたがやはり真っ白になります。UTF-8にすればIE以外は表示OK。他に疑えるところはありますでしょうか。21:41宣言を書いたはずが、、表示されませんでした。ちなみにTerapadはWindowsのみに対応しているようで使えませんでした。「修正→ページプロパティ→タイトル/エンコーディング」でエンコーディングが「日本語(EUC)」になっていますでしょうか?症状だけを見ると文字コードが起因の様に思われるのですが、これで直らなければちょっと僕の知識では厳しそうです・・・。01:08博士さま度々ありがとうございます。タイトル/エンコーディングは「日本語(EUC)」になっていました。試しにiframeで読み込んでいるページを直接開いてみても、UTF-8だとIE以外は表示OK、EUC-JPだと表示不可でした。試しに博士さまが公開されているタグを変更せずそのまま貼付けても同様の現象、ソースを見ると文字化けがあるという状態です。文字コードっぽいですよねぇ。みなさんが設置出来ているという事は当方だけのなにかだと思います。単純なミスのような気がしているのですが、見つけられず。新規のHTMLファイルにペーストしてみてはいかがでしょうか?コピペ時にクリップボードにテキスト以外の情報までコピーされる事は意外とよくあります。ブラウザで表示されない状態の時(真っ白の時)、ブラウザでソースコードを表示して、コードが文字化けしているようでしたら、多分文字コード周りの問題だと思います。(先に言うべきでした・・・w)解決してみれば大したこと無い問題も、解決までは苦労するものです。諦めずに頑張ってください。17:50博士さま解決しました!原因が分からずじまいなのですが、参考サイトでご紹介されていた「KLUTCHE」のサイトのタグを使うとIE6からモダンブラウザまで問題なく表示することが出来ました。タグを見ても違うところはJqueryのバージョンぐらい...?ひとまずご報告させて頂きました。20:18toriii様とりあえず解決して何よりです。jqueryのバージョンですか、僕の苦手とする分野なのでそうなるとお手上げかも知れません。お役に立てませんでしたが、WEBページの作成は問題解決の連続ですので、これからも頑張ってください。試行錯誤の過程はメモ書きでもログを残すようにするとその後の成長が段違いだそうです。(僕も心がけてはいるのですが・・・)今後ともよろしくお願い致します。17:52博士様はじめまして、私は超初心者ですがよろしくお願い致します楽天のTOPページに画像のスライドショーを設置したく調べていましてこちらのサイトにたどり着きました。コピペをさせて頂き、楽天GOLDにアップし一応動作確認まではできましたが修正したい部分がありご連絡させて頂きました。メイン画像とサムネイル画像の横幅を合わしたく色々やってみましたがサムネイル画像の方が短く両端が短くなってしまいます。【ここを参考に作って見ます。FlagさんのPAGEで見ますとメイン画像とサムネイル画像の両端が合っておりこの様に修正したいのですが恐れ入りますがご回答頂きましたら大変ありがたいです。21:28AKIKO様コメントありがとうございます。確かに今見たところ、サイズあってませんね。0;}こんな感じにしてもらうと直るはずです。ソースは後で直して置きます。早々のご回答ありがとうございました。スタイルシート部分書き直しましたらうまくいきました。今からHP上にアップいたします。本当にありがとうございました。22:17AKIKO様こんな僕でも多少はお役に立てた様で何よりです。これからもよろしくお願い致します。18:35ハカセさまいつも参考にしております。win7、IE10で「互換表示ON」にしたところ、動くバナーが見えなくなってしまいました。他のブラウザやiPadでは普通に見ることが出来ます。19:58ハカセ様この度こちらのjQueryバナー実装を拝見させて頂き新しい楽天サイト内にて準備をしております。参考になり助かっております。お陰様で無事作業は完了しましたが、2点ほど問題がございまして1.IEで見た場合、フレームの淵(左側と上側のみ)に青いラインが入っており修正が出来ませんでした。はかせ様のサンプルバナーも同様にこちらのPCのIEだと表示されております。クローム等ではラインはなく問題ございません。2.メインビジュアルの画像箇所の<a>タグにリンクを貼っておりますがページ移動をせず、jQuery内でリンク先が無理やり表示される状態となっております。恐縮ではございますが、ご回答頂けますと幸いです。20:07solid様コメントありがとうございます。IEでみた時青い線が出るこれは画像にリンクを貼ると古いブラウザ(特にIE)ではリンクカラーのボーダー(枠線)が表示される事から発生しています。これを解決するには、スタイルシートに下記の一行を加えて下さい。無しにするって意味です。リンクがiframe内で表示されるこれも私の説明不足でしたが、jQueryのバナーはGOLDでのページ。表示させるのはRMSで作ったページなど別のページ。バナーにリンクを貼った場合そのままだとバナーのページでリンク先に飛んでしまいます。タグを下記の様に修正して下さい。これはリンクを親要素(iframeを読み込んでいる元のページ)で表示させるという意味です。説明が若干雑になってしまいましたが、お役に立てれば幸いです。16:03ハカセ様ご返信頂きありがとうございますお陰様で、2点どちらも無事に解決でき大変納得のいくHPへと仕上がっております本当にありがとうございました。今後とも拝見させて頂きますので、よろしくお願い致します。00:51博士様こんにちわ。いつも参考にさせて頂いております。jquery-2.0.2.min.jsファイル、作ったバナー画像そして御社サイト内の上記htmlをコピペにて作成したファイルをcyberduckにてupしました。そのhtmlファイルをifremeにて楽天rmsに貼りましたがいまいち動作してくれません・・htmlの書き換え等がきちんとできていないのか・・?ftpでupしたファイルもブラウザにてurlを貼ってもエラーとなってしまい、upできていないのかすら分かっておりません。初心者なもので困っております。10:49yu様コメントありがとうございます。動作しないというのは表示されないということでしょうか?エラーの内容はどのようなものでしょうか?もう少し詳しく教えて頂けるとお役に立てるかも知れません。23:56博士様ご返信ありがとうございます。おっしゃる通り表示されないのです・・・。初心者なもので、htmlの記述が間違っているのか、ファイルのアップロードが間違っているのか・・分からない事が分かっていない状態です(><)どうぞ宜しくお願い致します。08:52yu様アップロードしたURLにアクセスしして「404」のエラーと言う事は、アップしたHTMLファイル自体が見えない状態にあると思われます。「アップロード後、「403」や「404」のエラーが表示される」http://support.justsystems.com/faq/1032/app/servlet/qadoc?QID=050425-2そのファイルにアクセス出来てページが真っ白だとしたら、コードの間違いなどが考えられますが、まずは上記サイトを参考に404エラーを解決して見てください。01:55博士様ありがとうございます。上記サイトにて確認しましたがやはり404表示です・・・http://www.rakuten.ne.jp/gold/articolo/cabinet/images/banner1.jpgがurlです。hpは楽天goldで作成していませんのでhttp://www.rakuten.ne.jp/gold/articoloこのurlでtopページは開きません。そこがいけないのでしょうか??ftpのやり方がいけないのかと思いfailezillaにて試してみても結果は同じでした・・goldとの接続はできているかと思います。csv,等の表示は確認できています。00:32博士様たびたび申し訳ございません・・サーバー上にupする事はできました!上記の通りupしたところhtmlのソースの部分が表示されてしまい、スライドどころか画像も表示されません。画像のみであれば表示されています。width()の()内すべてに数字をいれるのでしょうか??宜しくお願い致します。問題の解決にはまず事実(今の状態)と原因の特定が必要です。質問をする場合は出来るだけ詳しい現状をお知らせ下さい。手当たり次第に対応せず、一つ一つ順番に確実に確認しましょう。(手当たり次第の対応と、「やったはず」って言う思い込みは問題の解決を遅らせます。私も何度も痛い目を見ましたw)・作成したHTMLは動くのか?ローカルで保存したHTMLをブラウザで開くと正しく表示されますか?→動かない場合HTMLの作成時点で何か間違ってます。動くようにしましょう。・サーバ(楽天GOLD)へのアップロードは出来ているかcyberduckやfilezillaなどでエラーが起きていませんか?→エラーが表示されてアップロードされていないftpの設定などアップロードのやり方が間違いです。→エラーは無く、アップロード成功している・アップロードしたHTMLのURLは間違っていませんか?http://www.rakuten.ne.jp/gold/articolo/が御社のGOLDの大元のURLです。http://www.rakuten.ne.jp/gold/articolo/cabinet/images/banner1.jpgであれば、「cabinet」ってフォルダの中に「images」ってフォルダがあり、その中に「banner1.jpg」って画像がある状態です。※それでも解決しない場合のみお読み下さい。found」って事はあまり考えられないのですが、パーミッションの設定が問題かも知れません。全てのユーザーが「読む」事が出来る様にして見てください。http://d.hatena.ne.jp/web-production-beginner/20110403/p2それでも解決しない場合、コンタクトフォームからメール下さい。対応出来ない場合もありますが、直接ご相談に乗ります。23:24博士様ご丁寧な対応本当に感謝しています。ありがとうございます。13:25yu様お役に立てて何よりです。none;}この部分で中央配置になっているはずです。参考にしてみて下さい。上記の説明通りで、スライドバナーを作成することができました!すごくわかり易い説明で本当に助かりました、ありがとうございます。楽天GOLDにUPしトップページに貼り付けたのですが、リンクの表示がうまくできません。画像をクリックするとリンク先には飛ぶには飛ぶのですが、表示されるのが、バナーの画像部分のみリンク先に飛び、貼り付けたトップページ自体は表示が変わりません。(説明がうまくできず、伝わりにくいかもしれませんが・・・)ちなみにトップページはRMSで作成し、GOLDで作成していません。09:13質問者様コメントありがとうございます。ご質問の問題はリンクタグ(aタグ)のターゲットを指定すれば解決するはずです。何も設定しないとその窓の中でリンク先に移動してしまいます。iframeを呼び出した親のHTMLがリンク先に移動するtarget=”_blank”iframeを呼び出したページとは別のページでリンク先を開くtarget=”_self”iframe内のHTMLがリンク先に移動する(指定していない場合これになります)target=”_top”iframeを呼び出した一番上の階層のHTMLがリンク先に移動するの4つがありますので、用途に併せて設定して下さい。(ホントはnewってのもあるんですが、良くわからないので割愛)よろしくお願いします。迅速なご回答ありがとうございます!早速ご指示頂いたよう変更しましたら、無事表示され解決いたしました!的確なご説明ありがとうございました。本当に感謝いたします!!今後ともよろしくお願いいたします。11:50博士様お世話になっております。当方2度目の質問になります。楽天市場内の買い物かごのカスタマイズについてお伺いします。CSSを楽天ゴールド内に設置し、リンクをかけましたが、指定した買い物かごのgifファイルが表示されません。リンク、CSSは下記の通りですが、どこか間違っていますでしょうか。ご教授頂けると幸いです。指定部分の記述の問題だと思われます。57px;BackgroundプロパティでURLの記載はこんな感じになるはずです。セミコロン「;」はCSSでは、プロパティの終わりを示すので、途中に入るのは誤りとなります。あとついでに指摘させて頂くと「input」で大きく指定してしまうと、ページ内の別の「input」要素にもスタイルが効いてしまうので危険かも知れません...。ご回答ありがとうございます!ご指摘いただいた通り、修正致しましたが、やはりうまくいきません。あと、「input」の指定につきましてもご指摘いただき、ありがとうございます。詳しいものがおらず、公開されているものをそのまま転用致しましたので、内容がいまいち理解できておりません。他に良い方法がございましたらご教授頂けますでしょうか。14:42質問者様まずはこちらの記事をお読み下さい。楽天ショップで「買い物かごに入れる」ボタンをカスタマイズする方法その上でうまくいかない場合、「何をしたのか」「何が出来ていて、何ができていなのか」をご記載の上、再度リンク先のページにコメント欄よりご質問頂ければ幸いです。18:21ハカセ様jQueryのバージョンを1.9.1にしたらうまくいきました。supportedと書かれていました。ありがとうございました。先の質問は削除くださいませ。15:46como様コメントありがとうございます。後の方にお役に立つと思い、こちらのコメントは残させて頂きます。jQueryのバージョンは私も良く見逃しますので、要チェックですね。解決してなによりです。22:41博士さん、敬服いたします。7~8年前より、画像を動かしてみたいと思っていて、GIFアニメ・フラッシュ・Java、う~んとなっていた所にCSSが表れ、もはやさっぱり。それでも一念発起するも、自動で作成できるスライドショーが関の山。画像は動けどリンクには飛ばず逆にみっともないので外してしまい、それでもどうにかしたいとJavaの構文は理解できてもいざとなると、【HTMLのBODY部分にどうの】と言われると、???となってしまい、いざJavaをどこにどうするのかで躊躇してしまっておりました。あっちで調べこっちで調べ、博士さんのサイトも存じておりましたが、シンプルにまるっとコピペをしたら、あっさり2時間で全て解決・動作致しました。こちらのQ&Aのご対応されていらっしゃる姿勢といい、まさに敬服の一言です。技術だけでなく、人としても成長させて頂きました。ありがとうございます。お礼を言わずにはいられませんでした。産まれて初めてのこのような書き込み故、不作法をお許しください。ご覧になられる方には不要のコメントかと存じます。お読みになられましたら、お手数をお掛け致しますが削除して頂ければ幸甚です。作業が夜半になられる事もあるかと存じます。お身体ご自愛ください。本当にありがとうございます。様はじめまして、すみません、初心者です。サイトを見て、jQueryでスライドショーを作りました。iframeでUPしようとしますが、真っ白で表示されません。解決できませんでした。当方、素人で申し訳ないのですが助けていただきたいのです。一度見ていただけませんでしょうか?サイトをこの前見つけて、ほんと有難いです。仕事で急に楽天サイト担当になり、右も左もわからず、運営してます。サイトURLも記載してます。お暇なときに見ていただいて、ご指摘いただければ幸いです。09:20takesita様コメントありがとうございます。どこの会社でもネットショップ担当は突然任命されるものです(笑)苦労はありますが、やりがいのある面白い仕事だと思います。「モノを売る(買ってもらう)」楽しさを覚え、スキルを身につけて会社の人たちを唖然とさせてやりましょう(笑)ページのソースを拝見しました。Found)というメッセージが出てきます。詳細を見ると「jquery-2.0.3.min.jsが見つかんねーよ」と怒られているようです。src="jquery-2.0.3.min.js"></script>のjqueryファイルのURLを変えてやると動きました。src="http://a.ichiba.jp.rakuten-static.com/com/js/d/pa/pa2.min.js"></script>この記載は多分不要と思われますので、削除した方が良いと思います。(楽天市場で使ってるJavaScriptファイルだと思います)削除しないと下記のような警告が表示される可能性があります。以上、お役に立てれば幸いです。今後共当サイトをよろしくお願い致します。返信、本当にありがとうございます!!教えていただいた通りに行いました。表示されました!!本当に感謝しきれません!助かりました。温かいコメントもありがとうございます。任命されるものなのですね(笑)低コストで成果を求められてまして、ほんと悩んでばかりでしたので、こちらのサイトは、ほんと有難いです。隅々まで読ませていただいて、勉強させていただきます!また、助けていただくかと思いますが、宜しくお願い致します。ありがとうございました。初めまして、いつも参考にさせていただいておりますsabanoと申します。こちらのアイフレームを楽天サイトで導入することになり現在テストページで改修を行っていますがアイフレーム下のサムネイルが表示されません。上のスライドショーは正確に表示されるのですがサムネイルのみ、仮画像を挿入しても反応せず...。当方素人なので、ソースをコピペして行っているのですがサムネイルが表示されない点で考えられる要因は何かありますでしょうか?素人丸出しの質問で大変申し訳ございません。09:14sabano様コメントありがとうございます。ご返信が遅くなりました。ご質問の内容なのですが、恐らくですがifrmeの設定で高さが足りてないのでは?と思われます。height="500"></iframe>こんな感じのコードの「height=”500′′」の部分を調整してみるとうまくいくかも。初めまして、スライドバナーを検索していてコチラにたどり着きました。tonecchiと申します。こちらのスライドバナーを参考にさせていただき、うまく表示したのですが、どうしても、スライドバナーの下に余白ができてしまい、消すことができません。フレームタグの調整などしてみましたが、どうしたら消えるのか分からずご連絡させていただきました。サイトURLhttp://www.rakuten.co.jp/huusuikazan/スライドバナーURLhttp://www.rakuten.ne.jp/gold/huusuikazan/sankou.htmlです。アドバイスいただければ幸いでございます。09:28tonecchi様ページのソースを拝見したところ、iframeの読み込み時に、heghtが400ピクセルで指定されています。バナーはメインが250ピクセル、サムネイルが63ピクセルとなっている様ですので、313ピクセルで大丈夫なはずです。style="border:none;"></iframe>これの「height=”400′′」を調整して見てください。19:14博士様さっそくのご返信ありがとうございます。「height=”313′′」に変更すると余白がなくなりました。ありがとうございました。今後も参考にさせていただきます。初めまして、パソコン超初心者のyukaです。楽天トップページの作成を頼まれ、1からHTMLを勉強し始めたばかりなのですが、気まぐれ社長から「スライドショーを作って」との要望を受け、このサイトにめぐりあいました。スライドショーは出来たので、マイコンピュータに保存した.htmlを開くと見れるんですが、FTPから楽天GOLDにアップしたら、スライドはするのに全ての画像が×印になって表示されません(涙)FTPにjqueryもいれたし、画像も楽天GOLDの.htmlと同じフォルダ内にいれてあります。HTMLを始めたばかりでどこをどうすればいいのかもわかりません。20:03yuka様コメントありがとうございます。画像がバツ印になるという事は画像のURLが間違っている(または画像が見つからない)ということです。・画像をアップしていない・画像のリンクがローカルの絶対リンクになっている。どちらかでは無いでしょうか。ローカルの絶対リンクってのは「file:///C:/Users/hoge/hoge.jpg」みたいな記述になっている奴の事です。画像を呼び出すimgタグのURLの部分をご確認下さい。src="hoge.jpg">↑のhoge.jpgの部分が画像のURLです。11:35ハカセ様ご回答ありがとうございます。画像のリンクを楽天のR-cabinetにアップした画像のURLにしたところ、パソコンのフォルダ内ではスライドショーが表示されました!しかし、FTPで楽天GOLDに入れて、楽天GOLDにアップしたスライドショーを開くと画面が真っ白で何も表示されなくなりました。コールセンターに電話してもサポート対象外とのことだったので、いろいろと検索してみたのですが、同じような状況の対処法を見つけられず、また質問してしまい申し訳ありません。FTPではバイナリ転送モードで楽天GOLDにいれています。保存時のファイル名はslideshow.htmlとしています。保存時のファイルの種類はすべてのファイルにしています。ファイル作成時の文字コードの指定はEUCにしています。文字コードをUTF-8に変えてみたのですが、まったく同じ状況になります。お忙しい中、大変ご迷惑をおかけ致しますが、対処法がありましたらお教え下さい。真っ白っていう状況から一番考えられるのはjQueryのファイルへのリンクが通っていない(URLが間違っている)または、アップし忘れかな?と思われます。その辺を再確認してもまだ解決しなければ、もう少し詳しい状況をお知らせの上、再度ご相談下さい。実際のページのURLなどを貰えれば一番早いです。公開したくなければ、お問合せフォームなどからメールでご相談下さい。返答できるかはお約束出来ませんが、出来る限りの対応は致しますよろしくお願い致します。16:10初めまして、いつも勉強させていただいております。スムースに上部までスクロールを作ったのですが、iframeだとその指定部分しか表示されず、どうやってrmsにリンクを貼っていいやらわからず、途方に暮れております。お力添えいただけますと助かります。13:27SU様コメントありがとうございます。スムーススクロールをRMSのページ(商品ページやカテゴリページ)に反映したいと言う事でしょうか?残念ながらJavaScript(jQueryを含む)はGOLDの中でしか使えませんので現状では、RMSのページでの実装は不可能だと思われます。実験してみないと何とも・・・もし「どこかの店舗でやっていた」など情報をお持ちでしたらお知らせ下さい。お役に立てずにスミマセン。お返事ありがとうございます。スムーススクロールをRMSのページ(商品ページやカテゴリページ)に反映したいと言う事でしょうか?↑はい。下記HPを参考にさせて頂きました。カテゴリページでしょうか?http://www.rakuten.ne.jp/gold/sesto/2015style.htmlお忙しい中申し訳ありません。気長にお待ちしておりますので、よろしくお願い申し上げます。09:07SU様ご紹介頂いたSESTOさんのページはGOLDですね。GOLDのページならスムーススクロールも動作します。