bxSlider画像の外枠を消す方法

このQ&Aのポイント
  • 質問者はカラーミーショップを利用しており、bxSliderを使用して画像スライドショーを作成しています。
  • 画像には外枠とシャドウが付いており、質問者はそれを消して写真のみにしたいと考えています。
  • しかし、質問者が試したCSSコードはうまく動作せず、解決策を求めています。
回答を見る
  • ベストアンサー

bxSliderの画像の外枠を消したいです。

カラーミーショップを利用しています。 「スライドショーの設定」を利用し、画像をアップしますと、画像に外枠とシャドーが付きます。 これを消して写真のみにしたいので「bxSliderの外枠を消す」等を検索しましたら、下記のコードを見つけたので、共通CSSのトップページの項目の所にコピペしてみたのですが、枠が消えず、うんともすんともなりません。 .bx-wrapper { background-color: transparent; margin: 0px auto; border: none; box-shadow: none; } .bx-wrapper img { display: block; margin: 0px auto; } 独学で、必要な箇所だけ調べてサイトをカスタマイズしているので、基本が全くなっていません。 今日1日ずっとトライしているのですが、全然出来ないので、情けないやら、悲しくなって来ました。 解決方法をご存知の方がいらしたら、教えて頂けますか。 すみません、どうぞよろしくお願いします。 因みに、HTMLは下記コードです。 <{if $slideshow_html}> <div class="slider"> <{$slideshow_html}> </div> <script type="text/javascript"> //<![CDATA[ $(function(){ $('#slider').bxSlider({ auto: true, pause: 2000, speed: 1000, controls: false, captions: true, mode: 'fade' }); }); //]]> </script> <{/if}>

  • CSS
  • 回答数2
  • ありがとう数4

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

  • ベストアンサー
回答No.2

>CSSの中にあるスライドショーのタグがどれなのかも見つけられないレベル それ簡単ですよ。表示されているパーツを右クリックして 「検証」(GoogleChromeの場合) これで、関連する表示物の設定値が全部出ます。 (最初に私が添付した画像みたいに) 後は、この中で、それっぽいパラメタを探して インタラクティブ書き換え(ブラウザの中だけでCSSを書き換えてどこが変化するかを調べる) →思った通りの変更結果になったら、  そのCSSを書き換えるか、  別のCSS/ClassまたはIDのStyleで上書き。  完成! また、CDNから取り込んでる場合、元のCSSはいじれないので、 別のCSSで上書きする方がいいでしょうね。 $('#slider').bxSlider({ auto: true, pause: 2000, speed: 1000, controls: false, captions: true, mode: 'fade' }); この部分が、スライダのコンストラクタなので、 この直後に、該当のCSSを書き換えるコードを埋め込んでもOKですよ。CSSファイルを追加したくないなどの理由がありそうなら。 どっちかの方法で、ま~解決するとは思いますが。 ではファイトです!

heiko09
質問者

お礼

なんかですね... 出来ましたよ!!やったー! お恥ずかしい話し「検証」を初めて触ってみました。 これ凄く便利!うわぁ~ありがとうございます!! 上書きをしてプレビューを見てみたら、出来ていました。 他、ちょこちょこ触ったのですが、どこを触ったのか 分からないので、もうやめておきます(笑) ご親切に、本当に本当にありがとうございます。 もっとちゃんと勉強しますね。 本当にありがとうございました!

その他の回答 (1)

回答No.1

書かれてるソースがHTMLではないので、 リファレンスから抜粋しますが、 https://bxslider.com/ https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css これの30行付近 -webkit-box-shadow: 0 0 5px #ccc; box-shadow: 0 0 5px #ccc; border: 5px solid #fff; これをつぶせばいいだけみたいです。 こっちでは、それだけで消えましたよ。 後は、そのCSSでオーバーライドすればよいかと。 (もしかしたら、元々オプションがあるのかもしれませんが、  そこまでは調査してません。あくまでCSSで消せるか?のみを  検証して、消せるね!までの調査で終了しました)

heiko09
質問者

お礼

早々にありがとうございます! 出来ました!とご報告したいところなのですが、力及ばず... 朝から色々試してみたのですが、未だ出来ません。 そもそも、CSSの中にあるスライドショーのタグがどれなのかも見つけられないレベルで、もっと勉強が必要です。 頂いたご回答で出来るのだと思います。 ただ私が出来ないだけ...涙 折角教えて頂いたのに、申し訳ございません。 頂いたご回答を参考に、勉強しながらトライしてみますね。ご親切に、本当にありがとうございました。

関連するQ&A

  • jQuery bxSlider 画像に変更

    jQueryのスライダー「bxSlider」矢印画像を追加してテキストを画像に変更したい =========== コード =========== <script> $(document).ready(function(){ $('.bxslider').bxSlider({ auto: true, pagerCustom: '#bx-pager' }); }); </script> =========== html =========== <ul class="bxslider"> <li><a href=""><img src="http://xxx.com/image/01.png" /></a></li> <li><a href=""><img src="http://xxx.com/image/02.png /></a></li> </ul> =========== 表示画面 =========== スライド画像の下に、 PrevNextのテキストリンクがでてきます。 =========== 実装したい事 =========== 本体サイトの用に スライド画像の左右に矢印画像を入れたい PrevNextのテキスト文字を消して●●●の画像に変更したいです。 本体サイト http://bxslider.com/ jquery.bxslider.cssの97行目辺りを変更してみましたが、変わりません。 カスタマイズをご存知の方がおられましたらご教授ください。 /* DIRECTION CONTROLS (NEXT / PREV) */ .bx-wrapper .bx-prev { left: 10px; background: url(http://xxx.com/images/pre.png) no-repeat 0 -32px; } .bx-wrapper .bx-next { right: 10px; background: url(http://xxx.com/images/next.png) no-repeat -43px -32px; }

  • jQuery bxSlider でのアニメーション

    jQueryのbxSlider を使用して、6枚のスライドギャラリー的なものを作っています。 各スライドがスライドした後に、onAfterSlide: function() を使用してオブジェクトのフェードをしたく以下の様に記述しています。1枚目から5枚目では、各スライドをした後にオブジェクトをフェードインでアニメーションができるのですが、最後のスライドのオブジェクトのみがアニメーションしません。コードは以下になります。どなたか最後のオブジェクトもアニメーションするスクリプトを教えていただけますでしょうか? <script type="text/javascript"> $(function(){ var slider = $('#slider1').bxSlider({ controls: true, duration: 2000, easing: 'easeInOutQuart', onAfterSlide: function(currentSlide){ if(currentSlide==0){ $("#block").fadeIn("slow"); }else{ $("#block").hide(); } if(currentSlide==1){ $("#block2").fadeIn("slow"); }else{ $("#block2").hide(); } if(currentSlide==2){ $("#block3").fadeIn("slow"); }else{ $("#block3").hide(); } if(currentSlide==3){ $("#block4").fadeIn("slow"); }else{ $("#block4").hide(); } if(currentSlide==4){ $("#block5").fadeIn("slow"); }else{ $("#block5").hide(); } } }); $('.thumbs a').click(function(){ var thumbIndex = $('.thumbs a').index(this); slider.goToSlide(thumbIndex); $('.thumbs a').removeClass('pager-active'); $(this).addClass('pager-active'); return false; }); $('.thumbs a:first').addClass('pager-active'); }); </script> <ul id="slider1"> <li class="slider1-1"> <div id="block" style="background-color: red; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;"> </div> </li> <li class="slider1-2"> <div id="block2" style="background-color: white; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;"> </div> </li> <li class="slider1-3"> <div id="block3" style="background-color: black; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;"> </div> </li> <li class="slider1-4"> <div id="block4" style="background-color: black; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;"> </div> </li> <li class="slider1-5"> <div id="block5" style="background-color: black; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;"> </div> </li> <li class="slider1-6"> <div id="block6" style="background-color: #FFF; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;"> </div> </li> </ul> <div class="thumbs"> <a href=""><img src="img/1.jpg" width="50" height="50" /></a> <a href=""><img src="img/2.jpg" width="50" height="50" /></a> <a href=""><img src="img/3.jpg" width="50" height="50" /></a> <a href=""><img src="img/4.jpg" width="50" height="50" /></a> <a href=""><img src="img/5.jpg" width="50" height="50" /></a> <a href=""><img src="img/6.jpg" width="50" height="50" /></a> </div>

  • dreamweverでホームページの外枠がうまくできません。

    こんにちは。いつも参考にさせていただいてます。 現在dreamweverMX2004でホームページを作っているのですが、外枠のボーダーがうまくできず困っています。css初心者でパソコンはmacです。よろしくお願いします。 まず全体の枠をwrapperとクラスを指定して .wrapper { margin: 0px; padding: 0px; width: 800px; border: thin solid #99CCFF; height: auto; } こう設定し、ヘッダをtopと下記の様に指定し .top { margin: 0px; padding: 0px; height: 80px; width: 800px; } 左にボタンを下記の様に指定し .botan { margin: 0px; padding: 0px; height: auto; width: 200px; float: left; font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 12px; } 本文を下記のようにボタンの右に来る様にしました。 .naiyou { margin: 0px; padding: 0px; width: 600px; height: auto; float: left; } 上のように指定し全体をセンターにそろえてます。 画面上では外枠が下まであるのですが ブラウザでプレビューしたらヘッダの少ししたの部分までで終わり 下までボーダーがきません。分かる方おられましたら教えてください。 よろしくお願いします。

  • CSSで親ボックスの背景画像を設定してもNN7.01で表示されない

    例えば、下記のように記述して「wrapper」ボックスで 「bodybg.gif」という画像を垂直方向に並べたいのですが、IE6ではうまく表示されますが、NN7.01だとヘッダー部分以外のボックスに背景画像が表示されません(><;) /* html * / <div id="wrapper"> <div id="header"></div> /* ヘッダー */ <div id="pagebody"> /* pagebody内2カラム */ <div id="content"></div> /* 右寄せ */ <div id="leftside"></div> /* 左寄せ */ </div> </div> /* css * / #wrapper { width: 600px; margin-left: auto; margin-right: auto; margin:0px; background: url(../img/bodybg.gif) repeat-y; padding: 0px; } CSSで毎回つまづくところですが、どうにもこうにも対処方法が見つかりません(T_T) どなたか力をかしていただけないでしょうか・・・

    • ベストアンサー
    • CSS
  • bxsliderが動かない

    Javascript初心者なのですが、自分のサイトにbxsliderを置きたいと思っています。 試しに白紙のHTMLファイルに以下のように記述してみました。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>test</title> <link href="css/jquery.bxslider.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/jquery.bxslider.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.bxslider').bxslider({ auto: true, }); }); </script> </head> <body> <ul class="bxslider"> <li><img src="images/pic1.jpg"></li> <li><img src="images/pic2.jpg"></li> <li><img src="images/pic3.jpg"></li> <li><img src="images/pic4.jpg"></li> </ul> </body> </html> jsやcssの場所は正しいです。 しかし、表示してみると画像が4枚縦に並んで表示されるだけとなってしまいます。 Firefox, Chrome、IEの各最新版で試しましたが同様でした。 どの部分が間違っているのでしょうか?ご教授お願いします。

  • Jqueryで画像タイトル表示させる

    ギャラリーを作っていいるのですが、それぞれの画像ごとに説明文やタイトルを表示させたいのです。 サムネイルクリック後に大きな画像を、そのしたに説明文・タイトルをそれぞれ同時に表示させる方法を教えてください。 以下がソースになります。 (jQueryプラグインでサムネイルにフェードをかけています) ■HTML■ <!DOCTYPE html> <html> <head> <title>フォト ギャラリー サンプル #01</title> <link href="style.css" rel="stylesheet" type="text/css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script> <script type="text/javascript"> $(function(){ $('a img').hover( function(){ $(this).fadeTo(200, 0.6); }, function(){ $(this).fadeTo(200, 1.0); } ); }); </script> </head> <body> <div id="wrapper"> <div class="image"> <div id="n1"><img src="big_01.jpg"title="aaaaaaaaaa/></div> <div id="n2"><img src="big_02.jpg" title="aaaaaaaaaa"/></div> </div> <div id="thum"> <ul> <li><a href="#n1" class="thum"><img src="thum_01.png" /></a></li> <li><a href="#n1" class="thum"><img src="thum_01.png" /></a></li> </ul> </div> </div><!--wrapper--> </body> </html> ■CSS■ #wrapper{ width:840px; border:solid #F00 1px; margin: 0 auto; padding: 0 40px; } .image { overflow: hidden; margin-top: 16px; width: 300px; height: 474px; border: 1px solid #ddd; float:left; } #thum{ margin-left: 310px; height:474px; } #thum img { border: #eee 2px solid; height:100px; width:100px; padding: 5px; margin-left: 7.5px; margin-bottom: 7px; float:left; } #thum li{ display:inline; list-style:none; } よろしくお願いします。

    • 締切済み
    • CSS
  • スタイルシートの外枠について質問です。

    スタイルシートの外枠について質問です。 外部ファイルに .container{background-color:white; position: absolute; left: 50%; width: 900px; height:1500px; ;border:8px; border-style:ridge;margin:30px 0px 100px -450px ;border-color:#00ff66} と記入、htmlに <link rel="stylesheet" href="(スタイルシートのURL)" type="text/css"> </head> <body> <!-- --> <div class="container"><!--全体の横幅など指定 --> </div> </body> </html> と書きました。 margin:30px 0px 100px -450pxで指定したように、ブラウザ上から30pxあけて外枠が表示され始めますが、外枠の下がブラウザにぴったりくっついてしまいます。 場合によっては外枠の下が見えなくなるようで、100pxあけての表示が上手くできません。 どこが間違っているのか、教えていただけると大変助かります。

  • ページ全体をセンタリングできません

    フルCSSでWEB作成をしていますが、ページ全体をセンタリングしたいのですが、IEで見ると右にずれてしまいます。ネットでいろいろ検索をして試してみたのですが、うまく行きません。 HTMLは <div id="centering"> <div id="wrapper"> </div> </div> で、CSSは #centering { text-align: center; width: 100%; position: absolute; margin: 0px; padding: 0px; } #wrapper { width: 900px; margin: 0px auto 0px auto; padding: 0px; text-align: left; です。 これではだめなんでしょうか。

    • ベストアンサー
    • CSS
  • ディスプレイサイズにあわせた背景画像

    html、cssは独学、javaはネットに上がっているものを活用させていただく程度の質問者です。 メインコンテンツ<wrapper>と<body>にかけて右角にラインの画像を斜めに貼り付けたサイトを作成しようと思っています。 今のところ下記のように書いているのですが、これだとlineのwidth=300pxのせいで、ブラウザに横スクロールが出来てしまいます。この横スクロールが出ないように設定したいのです。 例えば、ディスプレイのサイズを取得してlineのwidthを調整するとかlineを斜めにリピートするとか。 なにかよい方法がありましたら、お教え下さい。よろしくお願い致します。 *****html部分************************************ <body> <div id="wrapper"> <div id="header"> <div class="line"></div> </div> </body> ************************************************ *****css部分************************************ body{ width:auto; margin:0; padding:0; background:url(../images/body_bg.jpg) repeat; } div#wrapper{ width:850px; margin:0 auto; padding:0; background:url(../images/wrapper_bg.gif) repeat-y; } div#header{ width:850px; height:210px; margin:0 auto; background:url(../images/header_bg.gif) no-repeat;//ライン画像の一部 position:relative; } div#header div.line{ width:300px; height:200px; background:url(../images/line.jpg) repeat-x;//ライン画像 position:absolute; left:850px; top:0; } ************************************************

  • jqureryスライドショーが上手くいきません。

    こんにちは。 web初心者です。 今、jqueryを使いスライドショーを作っているのですが 上手く行きません。 5枚の画像を重ねてフェードイン フェードアウトみたいな形にしてるのですが、最後の画像だけdisplay: none;が適用されなくてきれいに表示出来ません。 どなたか詳しい方、宜しくお願い致します。 <HTML> <div id="contents"> <div class="slideshow"> <img src="top30.jpg" width="950" height="450"> <img src="top21.jpg" width="950" height="450" class="alt"> <img src="top20.jpg" width="950" height="450" class="alt"> <img src="top22.jpg" width="950" height="450" class="alt"> <img src="top23.jpg" width="950" height="450" class="alt"> </div> </div> <CSS> #contents { width: 950px; margin-right: auto; margin-left: auto; height: auto; .slideshow { width: 950px; border-top-width: 1px; border-top-style: solid; clear: both; padding-top: 60px; height: auto; position: relative; float: left; } .slideshow img { position: absolute; } .slideshow img .alt { display: none; }

専門家に質問してみよう