jQueryでappleっぽい画像ギャラリー設置したいです
- 最近勉強し始めた初心者が、http://www.skuare.net/test/jAppleGal.htmlで紹介されていた画像ギャラリーを自分のホームページに組み込みたいと思っています。しかし、設置方法やjquery.jsのダウンロード場所などが分からず、質問しています。
- 画像ギャラリーを自分のホームページに組み込むためには、まずjquery.jsをダウンロードする必要がありますが、どこに配置すれば良いか分からないという質問です。
- また、HTMLコードやCSSの組み込み、そしてjQueryの使い方についても分からない部分があり、質問させていただいています。
- ベストアンサー
jQueryでappleっぽい画像ギャラリー設置したいです
http://www.skuare.net/test/jAppleGal.htmlで紹介されていた画像ギャラリーを私のホームページにも組み込みたいと思っているのですが、CSS・JAVAを最近本を買ったりして勉強しはじめた初心者なだけに、紹介されている設置方法だけでは理解できなく質問させていただきました。 (1)とりあえずjQueryからjquery.jsをダウンロードはしましたが、こjquery.jsはどこにどうすればいいのでしょうか？ (2) <div id="main"> <div id="gallery"> <div id="slides"> <div class="slide"><img src="画像パス1" width="920" height="400" /></div> <div class="slide"><img src="画像パス2" width="920" height="400" /></div> <div class="slide"><img src="画像パス3" width="920" height="400" /></div> <!-- 画像にはwidthとheightを指定します --> </div> <div id="menu"> <ul> <li class="fbar"> </li> //区切り線用 <li class="menuItem"><a href=""><img src="サムネイル画像パス1" /></a></li> <li class="menuItem"><a href=""><img src="サムネイル画像パス2" /></a></li> <li class="menuItem"><a href=""><img src="サムネイル画像パス3" /></a></li> </ul> </div> </div> </div> このコードはhtmlのheadに組み込むのでしょうか？それともbodyでしょうか？ (3) 次にCSSを記述します。 特に難しい部分はないので、cssを見ていただくとして・・・ とありますが、リンク先のcssはいじらなくてもそのまま使用すればいいのでしょうか？ 最後に、jQueryを記述すれば完成です。 $(document).ready(function(){ var totWidth=0; var positions = new Array(); $('#slides .slide').each(function(i){ positions[i]= totWidth; totWidth += $(this).width(); if(!$(this).width()) { alert("Please, fill in width & height for all your images!"); return false; } }); $('#slides').width(totWidth); $('#menu ul li a').click(function(e){ $('li.menuItem').removeClass('act').addClass('inact'); $(this).parent().addClass('act'); var pos = $(this).parent().prevAll('.menuItem').length; $('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450); e.preventDefault(); }); $('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact'); }); とありますが、これはどこに組み込めばいいのでしょうか？また何も触らなくてもいいのでしょうか？ 他にも分からないところだらけなので、立て続けに質問させていただくと思いますが、お手数おかけしますが力を貸してください。 よろしく御願いいたします。
- poupou
- お礼率29% (63/212)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
とりあえずはご提示のページのソースをごらんになってください。 何をどこに記述するのかはそれでわかると思います。 ご提示のページの場合、前半に説明文やコードが示されていて、特にHTMLやコードの部分は<pre>～</pre>内で表示するようにしていて「<」や「>」は文字実体参照にしてあります。 細かいことは抜きにしても、この辺の不要な部分を除いていけば、必要なものが残ることになります。 後は、実際に表示したい内容に合わせて、CSSとHTMLを修正すれば（しなくてもよいかも）よろしいかと… （1）別ファイルとして保存し、 <script ～～ src="～～"></script>で読みこんでいます （2）その部分はHTMLのソースです。 （3）<head>内または<body>内でも可能です。 ご提示のページでは<head>内。<script>～</script>内に記述します
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
＃1です。 （3）の内容をうっかり読み違えていて、まったく違う内容を書いていました。 ＜訂正です＞ CSSはそのままでももちろん使用可能ですが、質問者様がどのような内容をどのように表示させたいのかによって、調整するほうがよろしいかと思います。 HTMLソースの構成を変えたりした場合も、同様に、調整が必要になる可能性が大です。
関連するQ&A
- Jqueryスライダーが動きません。
WEB制作の素人です。 簡単といわれている「FlexSlider2」ですが、私がやったところ、 画像は出たもののスライドにならず、そのまま上下に出てしまいます。 一度見ていただき、間違えを教えていただけますか？ （ちなみにスムーススクロールは動きます） <!-- TemplateEndEditable --> <link href="../common.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="../js/smoothScroll.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="../js/jquery.flexslider-min.js"></script> $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", pauseOnAction: false, slideshowSpeed: 3000 }); }); </script> <!-- TemplateBeginEditable name="head" --> <!-- TemplateEndEditable --> <!-- TemplateParam name="id" type="text" value="index_page" --> </head> <body id="@@(id)@@"> <div id="wrapper"> <!---ヘッダー---> <div id="header"> <h1><a href="../index.html"><img src="../image/title.gif" width="477" height="79" alt="title"/></a></h1> </div> <p><img src="../image/ribon.jpg" width="800" height="40" alt="Topライン"/></p> <!---トップ画像---> <div id="main_visual"> <div class="flexslider"> <ul class="slides"> <li><h2><img src="../image/slide_image/01.jpg" width="400" height="300" alt="Top画像"/></h2></li> <li><img src="../image/slide_image/02.jpg" width="400" height="300" alt="Top画像"/></li> </ul> </div> </div> よろしくお願いします。
- ベストアンサー
- JavaScript
- 同じjqueryを２つ並べて動かしたいけど動かない
いつもお世話になっています。 http://39kn.com/2011/06/05/5528/ のものを横に並べて動かしたいのですが下のソースの書き方をすると手前だけ動いて、２つめは動きません。 どうすれば動きますか？？ 理想は■が１つのスライダーデモの部分だとすると、■■と横に並ぶ形で使いたいです。 <body> <div class="1"> <div id="scroller"> <div class="scroller-title"> <span class="left">ドメイン＆レンタルサーバー</span> <span class="right"> <div id="controller"> <div id="stop_scroll_cont"><a id="stop_scroll"><img src="images/stop.png" align="absmiddle" /></a> Stop Scroll</div> <div id="play_scroll_cont"><a id="play_scroll"><img src="images/play.png" align="absmiddle"/></a> Play Scroll</div> </span> </div> </div><!-- /scroller --> <div id="Vertical"> <ul id="TickerVertical"> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> </ul> </div><!-- /Vertical --> </div> <div class="2"> <div id="scroller"> <div class="scroller-title"> <span class="left">ドメイン＆レンタルサーバー</span> <span class="right"> <div id="controller"> <div id="stop_scroll_cont"><a id="stop_scroll"><img src="images/stop.png" align="absmiddle" /></a> Stop Scroll</div> <div id="play_scroll_cont"><a id="play_scroll"><img src="images/play.png" align="absmiddle"/></a> Play Scroll</div> </span> </div> </div><!-- /scroller --> <div id="Vertical"> <ul id="TickerVertical"> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> </ul> </div><!-- /Vertical --> </div> </body> </html>
- ベストアンサー
- JavaScript
- Jqueryスライドが動きません。教えてください
WEB制作の素人です。 皆さんが簡単といわれている「FlexSlider2」ですが、画像は出たもののスライドにならず、 登録した画像がそのまま出てしまいます。 一度見ていただけますでしょうか？（ちなみにスムーススクロールは動きます） <!-- TemplateEndEditable --> <link href="../common.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="../js/smoothScroll.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="../js/jquery.flexslider-min.js"></script> $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", pauseOnAction: false, slideshowSpeed: 3000 }); }); </script> <!-- TemplateBeginEditable name="head" --> <!-- TemplateEndEditable --> <!-- TemplateParam name="id" type="text" value="index_page" --> </head> <body id="@@(id)@@"> <div id="wrapper"> <!---ヘッダー---> <div id="header"> <h1><a href="../index.html"><img src="../image/title.gif" width="477" height="79" alt="title"/></a></h1> </div> <p><img src="../image/ribon.jpg" width="800" height="40" alt="Topライン"/></p> <!---トップ画像---> <div id="main_visual"> <div class="flexslider"> <ul class="slider"> <li><h2><img src="../image/slide_image/01.jpg" width="400" height="300" alt="Top画像"/></h2></li> <li><img src="../image/slide_image/02.jpg" width="400" height="300" alt="Top画像"/></li> </ul> </div> </div> よろしくお願いします
- ベストアンサー
- JavaScript
- 同HTML内で複数のjQueryを設置したいです
買ってきたjQueryの本を元に複数のjQueryを使用し、 タブメニュータイプのものと自動スライドショータイプのを 同じHTML内に入れたいのですが両方ともうまくいきません。 いろいろ自分なりに調べたのですが、わからないです。 うまくいく方法をどうか教えてもらえないでしょうか？ 宜しくお願いします。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>細かなCSS設定なしに、画像をロールオーバーさせる</title> <link rel="stylesheet" href="css/base.css" type="text/css" media="all" /> <script src="js/jquery.rollover.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="js/jquery.easing.1.3.js" type="text/javascript"></script> <script src="js/jquery.slideviewer.1.2.js" type="text/javascript"></script> <script type="text/javascript"> jquery(function() { jquery('div#gallery').slideView({ easeFunc: 'easeInOutBack',//少しバックするアニメーション easeTime: 1200,//アニメーションの時間 toolTip: true,//ツールチップの表示 ttOpacity: 0.5//ツールチップの透明度 }); }); </script> </head> <body> <div id="wrap"> <div id="gnav"> <ul> <li><a href="#"><img src="images/btn_01.jpg" alt="トップページ"></a></li> <li><a href="#"><img src="images/btn_02.jpg" alt="会社概要"></a></li> <li><a href="#"><img src="images/btn_03.jpg" alt="制作実績"></a></li> <li><a href="#"><img src="images/btn_04.jpg" alt="お問い合わせ"></a></li> <li><a href="#"><img src="images/btn_05.jpg" alt="お問い合わせ"></a></li> </ul> </div> <!-- END #gnav --> <div id="wrap"> <h1><img src="images/douga/logo.jpg" alt="PHOTO GALLERY" width="439" height="81" /></h1> <div id="gallery" class="svw"> <ul> <li><img src="images/douga/img_01.jpg" alt="PHOTO GALLERY 01" width="655" height="430" /></li> <li><img src="images/douga/img_02.jpg" alt="PHOTO GALLERY 02" width="655" height="430" /></li> <li><img src="images/douga/img_03.jpg" alt="PHOTO GALLERY 03" width="655" height="430" /></li> <li><img src="images/douga/img_04.jpg" alt="PHOTO GALLERY 04" width="655" height="430" /></li> <li><img src="images/douga/img_05.jpg" alt="PHOTO GALLERY 05" width="655" height="430" /></li> <li><img src="images/douga/img_06.jpg" alt="PHOTO GALLERY 06" width="655" height="430" /></li> <li><img src="images/douga/img_07.jpg" alt="PHOTO GALLERY 07" width="655" height="430" /></li> </ul> </div> </div><!-- END wrap --> <img src="images/arimura_ocean3.jpg" class="ocean"> <img src="images/arimura_ocean3.jpg"> <p class="pagetop"><a href="#"><img src="images/btn_pagetop.jpg" alt="上へ戻る" class="rollover"></a></p> </div> <!-- END #wrap --> </body> </html>
- ベストアンサー
- その他（プログラミング・開発）
- jqueryで画像切り替え
この場をお借りして教えて頂ければ幸いです。 jqueryについて、今現在添付画像のようなサムネイルをマウスオーバーしますと、 メイン画像が切り替わるようなものをｊjqueryを使用して制作しました。 ここから、setIntervalを使用して画像が何もしなければ勝手に切り替わるように、 またマウスオーバーをしている際は切り替わらないように、そしてマウスアウトしたら そこの画像から順にsetIntervalが開始されるようにしたいと思っております。 そこの作業が出来ず困っておりまして、是非ともお教え頂ければと思います。 今現在のhtml , css , jsの方は記載しておきます。※reset.cssは除きます。 <body> <div id="wrap"> <div id="sec1"> <div id="photoBox"> <ul id="photo"> <li><img src="img/plan1.jpg" alt="食1" /></li> <li><img src="img/plan2.jpg" alt="食2" /></li> <li><img src="img/plan3.jpg" alt="食3" /></li> </ul> <ul id="thumb"> <li class="first"><img src="img/plan1_s.jpg" alt="" /></li> <li><img src="img/plan2_s.jpg" alt="" /></li> <li><img src="img/plan3_s.jpg" alt="" /></li> </ul> </div> </div> </div> </body> -------------------------------------------------------------------- div#wrap{ width:394px; margin:0 auto; } div#photoBox{ width:394px; height:391px; padding:40px 0; border-bottom:1px solid #CCC; } div#photoBox ul#photo{ width:394px; height:295px; padding-bottom:5px; position:relative; } div#photoBox ul#photo li{ width:394px; height:295px; display:block; position:absolute; top:0; left:0; } div#photoBox ul#thumb{ width:394px; height:91x; position:relative; } div#photoBox ul#thumb li{ float:left; padding-left:5px; } div#photoBox ul#thumb li.first{ padding-left:0; } --------------------------------------------------------- (function(){ var photo = $('#photo').find('li'); var thumb = $('#thumb').find('li'); photo.hide().eq(0).show(); thumb.hover(function(){ $(this).stop().fadeTo('fast', 0.6); photo.stop().fadeTo('fast', 0) .eq($(this).index()) .stop().fadeTo('fast', 1); }, function(){ $(this).stop().fadeTo('fast', 1); }); })
- ベストアンサー
- JavaScript
- jQueryを使ってある画像を別の画像に置き換えたい。
jQueryを使ってある画像を別の画像に置き換えたい。 jQueryを使って、<body class="info">の時にだけ <ul id="global-nav">の中の画像「info.gif」を「info_on.gif」に 置き換えるということをしたいです。 <body class="info"> <ul id="global-nav"> <li><img src="info.gif" /></li> <li><img src="about.gif" /></li> </ul> </body> ↓↓↓ <body class="info"> <ul id="global-nav"> <li><img src="info_on.gif" /></li> <li><img src="about.gif" /></li> </ul> </body> どのように記述をしてやるとうまくいきますでしょうか。 色々試しているのですがうまくいきません。 よろしくお願いします。
- ベストアンサー
- JavaScript
- jQuery タブとスライダーの併用
jQuery UIを使ったタブの中ひとつひとつにスライダーを置きたいのですが どうしても1つめのタブでしかスライダーが正しく動作しません。 overflow:hidden; が原因なのでしょうか。 どのように書き換えれば動作するようになるでしょうか。 スライダーはflexsliderを http://flexslider.woothemes.com/thumbnail-controlnav.html タブはこちらページを参考にしました http://alphasis.info/2011/07/jquery-ui-tabs-bottom/ css #jquery-ui-tabs { font-size: 12px; color: #666666; } .jquery-ui-tabs-bottom { position: relative; } .jquery-ui-tabs-bottom .ui-tabs-panel { height: 410px;width: 80%; overflow: auto; } .jquery-ui-tabs-bottom .ui-tabs-nav { position: absolute !important; left: 1px; bottom: 1px; right: 1px; padding: 0 0px 0px 0px; } .jquery-ui-tabs-bottom .ui-tabs-nav li { margin-top: -1px; border: 1px solid #d3d3d3 !important; border-top: !important; border-radius: 10px !important; color: #666666; } .jquery-ui-tabs-bottom .ui-tabs-nav li:hover { margin-top: 0px; border: 1px solid #aaaaaa !important; border-top: !important; border-radius: 10px !important; } .jquery-ui-tabs-bottom .ui-tabs-nav li.ui-tabs-selected { margin-top: 0px; border: 1px solid #000 !important; border-top: !important; border-radius: 10px !important; background-color: #cd5c5c !important; } script <script type="text/javascript"> // Can also be used with $(document).ready() $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", controlNav: "thumbnails" }); }); jQuery( function() { jQuery( '#jquery-ui-tabs' ) . tabs(); jQuery( '.jquery-ui-tabs-bottom .ui-tabs-nav, .jquery-ui-tabs-bottom .ui-tabs-nav > *' ) . removeClass( 'ui-corner-all ui-corner-top' ) . addClass( 'ui-corner-bottom' ); } ); </script> HTML <div id="jquery-ui-tabs" class="jquery-ui-tabs-bottom"> <ul> <li><a href="#jquery-ui-tabs-1">その1</a></li> <li><a href="#jquery-ui-tabs-2">その2</a></li> <li><a href="#jquery-ui-tabs-3">その3</a></li> </ul> <div id="jquery-ui-tabs-1"> <div class="flexslider"> <ul class="slides"> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> </ul> </div> </div> <div id="jquery-ui-tabs-2"> <div class="flexslider"> <ul class="slides"> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> </ul> </div> </div> <div id="jquery-ui-tabs-3"> <div class="flexslider"> <ul class="slides"> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> </ul> </div> </div>
- 締切済み
- JavaScript
- CSSで画像を中央に持っていく方法。
簡単な問題です。 画像を liの枠内の上下左右中央に配置するには、どうすればいいでしょうか？ 画像のサイズがまちまちなので、 paddingなどで数値を指定するのは、NGです。 vertical-align:middleはだめでした。 text-align:centerで左右の中央に持って行く所まで、できました。 HTML ==================== <ul class="book_slide"> <li><img src="image/bookmihon.jpg" width="51" height="75" alt="*" /></li> <li><img src="image/bookmihon.jpg" width="51" height="75" alt="*" /></li> </ul> ====================== css ======================= ul.book_slide li{ float:left; height:114px; width:80px; border:1px solid #000; text-align:center; } =======================
- ベストアンサー
- CSS
- jQueryの導入方法について
jQueryの導入が上手くいかず、全く動かなくて困っております。 サイト（http://labs.opentone.co.jp/?p=4923）から説明があったURLから実装に必要なjQueryをダウンロードしました。 ・jquery.flexslider.js ・flexslider.css そして下記コードを入力しました。 <link rel="stylesheet" href="flexslider.css" type="text/css"> <script src="jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="jquery.flexslider.js"></script> さきほど取得した画像をスライドショーを表示させたい場所に下記の通り指定します。 画像名を「sampleX.png」としています。 <div class="flexslider"> <ul class="slides"> <li><img src="images/sample1.png"></li> <li><img src="images/sample2.png"></li> <li><img src="images/sample3.png"></li> <li><img src="images/sample4.png"></li> <li><img src="images/sample5.png"></li> </ul> </div> 最後にflexfliderの関数を呼び出してスライドショーを実行させます。 $("document").ready(function(){ $('.flexslider').flexslider(); }); 以上のことを行ってjQueryらしい動作どころか画像すら表示されませんでした。（画像パスは入力し直しています） 他にダウンロードするものやコードを書かなければならないことなど、動作に必要なものについて教えて頂けませんでしょうか。 ※上記以外のことは一切行っておりません 何卒よろしくお願い致します。
- ベストアンサー
- CSS
- jQueryについて
jQueryのクロスフェードとlightboxを同一ページに設定しています。 よく分かっていないのに、コピペで作っていますが、 クロスフェードをするとlightboxが動作しません。 設定をどう変更したら出来るようになりますか？ どなたか助けてください。 <link rel="stylesheet" type="text/css" href="cssjs/jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript" src="cssjs/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="cssjs/jquery.lightbox-0.5.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript" src="cssjs/target.js"></script> <script type="text/javascript"> $(function(){ var setImg = '#rightimg'; var fadeSpeed = 1500; var switchDelay = 5000; $(setImg).children('img').css({opacity:'0'}); $(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed); setInterval(function(){ $(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg); },switchDelay); }); </script> <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script> <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script> <title>あかさたな</title> </head> <body> <div id="outer"><!--outer START--> <div id="container"> <div id="header"><!--header START--> <h1>いろはにほへと</h1> </div><!--header END--> <div id="menu"><!--menu START--> <ul id="bar"> <li><a href="index.html">HOME</a></li> <li><a href="ka.html">ABC</a></li> <li><a href="history.html">DEF</a></li> <li><a href="kaga.html">GHJ</a></li> <li><a href="admission.html">KLM</a></li> <li id="sen"><a href="link.html">りんく</a></li> </ul> </div><!--menu END--> <div class="don"></div> <div id="eyecatch"> <div id="leftimg"></div> <div id="rightimg"> <img src="images/1.jpg" width="300" height="300" alt="" /> <img src="images/2.jpg" width="300" height="300" alt="" /> <img src="images/3.jpg" width="300" height="300" alt="" /> <img src="images/4.jpg" width="300" height="300" alt="" /> </div> </div> <div id="contents"><!--contents START--> <h2>最新ニュース</h2> <h3>あかさたな</h3> <div id="gallery"> <ul> <li><a href="top/3.jpg" title="かきくけこ"><img src="top/3s.jpg" width="193" height="272" alt="かきくけこ" /></a></li> <li><a href="top/1.jpg" title="あいうえお"><img src="top/1s.jpg" width="182" height="272" alt="あいうえお" /></a></li> <li><a href="top/2.jpg" title="あいうえお"><img src="top/2s.jpg" width="182" height="272" alt="あいうえお" /></a></li> </ul> </div>
- 締切済み
- JavaScript
お礼
お礼遅くなり申し訳ありません。 何度もアドバイスありがとうございます！ 教えていただいた通り（といっても自分の知識がそこまでマスターしてないからだと思います）やってみたのですが、 うまくいきません。 どう説明したらいいかこんがらがってきてるので、また後日再質問させていただきたく思いますので、そのときもしよろしければアドバイスいただければ、嬉しいです。 本当にありがとうございます。