• 締切済み

WordPressで画像に枠が入ってしまいます。

wordpress でホームページを制作していますが、写真に枠線が入ってしまいます。どの部分を消したらいいのかがわかりません。有料テンプレートを買ってしまって特にわかりません。。。どなたかお助けください。 CSSは @charset "UTF-8"; /* CSS Document */ /* -------------------------------------------------- setting ----------------------------------------------------- */ body { background:#ededed url(images/bg/default.gif);} p { font-size: 110%; line-height:1.6em } li{list-style:none;} .row { width: 980px; } @media only screen and (max-width: 767px) { p { font-size: 115%; } } /* -------------------------------------------------- header ----------------------------------------------------- */ header.row { padding-top:23px; padding-bottom:20px; } header.row .nine.columns{ padding:0; } header h1 { margin:0; padding:7px 0 0 0; line-height:1em; font-size: 36px; color:#666; font-family:Georgia, "Times New Roman", Times, serif; font-weight:lighter; float:left; text-align:left; } header img{ border:none; } header h1 a { color:#666; text-decoration:none; } header h1 a:hover { color:#fff; } header #tagline { color:#333; font-size:small; float:left; line-height:37px; padding-top:7px; padding-left:15px; } header #contact { text-align:right; } header #contact #phone { font-weight:bold; font-size: large; color:#666; line-height:1em; } header #contact #phone a { color:#666; } header #contact #icon img { margin-left:5px; vertical-align:middle;} header h3 { margin:0; margin-bottom:5px; padding-left:7px; font-size:14px; } header .widget_RGBdesign_Contact#contact h3 { border-left:0px #FFFFFF solid; padding-left:0px; padding-bottom:5px; } header .widget_search#contact h3, header .widget_search#contact label { display:none; } header form, header p { margin:0; padding:0; } header .widget_search#contact #s {width:70%; float:left; margin:0; padding:0;} header .widget_search#contact #searchsubmit {width:30%: float:right; margin:0; padding:0; font-size: 20px; margin-top:0.3em;} header .widget ul li { display: inline; } header:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }

  • HTML
  • 回答数1
  • ありがとう数0

みんなの回答

  • tkmojo
  • ベストアンサー率50% (105/207)
回答No.1

有料テンプレートなら、ある程度しっかりデザインされていると思うので、 cssがこれだけって事は無いと思うのですが…他に無いですか? 「写真の枠線」が意図したborderなのか、リンクにデフォルトで付く枠線なのかは この質問文からははっきりしませんが、もし後者だとすれば以下の指定で解決します。 img{ border:none; } 前者だとすれば、他にcssがあって指定しているとしか考えられないので、 firebug等でどのcssのどの指定が効いているのか調べるといいと思います。

関連するQ&A

  • XHTML、CSSレイアウトでフッターを常に最下部に配置するには?

    フッターを最下部に表示したいのですが、#footerに position: fixed; bottom:0;を付け加えてもフッター だけ最下部に表示されコンテンツ部分がついてきません。 ヘイトに100%をつけくわえるのでしょうか? どうかご教授願います。 body { margin: 0; padding: 0; text-align:center; font-family:"MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size:1em; background-color:#CCCCCC; } ol,ul,li { margin: 0; padding: 0; } li { list-style:none; } h1,h2,h3,p { margin: 0; padding: 0; } #container { margin: 0 auto; text-align: left; width: 740px; height: 100%; background-color:#FFFFFF; } #header { width:740px; height:80px; margin:0; padding:0; background-color:#FFFFFF; background-image:url(img/nine_rogo.gif); background-repeat:no-repeat; background-position:left center; } #contents { width:740px; height:100%; margin:0; padding:0; background-color:#FFFFFF; } #menu { float:left; width:140px; height: auto; margin:0; padding:0; background-color:#FFFFFF; color:#000000; } #main { float:right; width:580px; height:auto; margin:0; padding:0 0 0 10px; background-color:#FFFFFF; color:#000000 } #footer { clear:both; width:740px; height:auto; background-color:#FFFFFF; color:#000000; font-size:1em; padding:0.3em 0; text-align:center; }

  • CSS IDごとのCLASS指定

    以下のようなCSSがあった場合に、それぞれのIDに同じ名前で中身の違うCLASSを指定する事は出来るのでしょうか? #main{ margin:0; padding:0; background: transparent; float : left; font-size : 0.8em; } #menu{ margin:0; padding:0; width:140px; float : left; font-size : 0.8em; background :url('img/back.gif') no-repeat left top; color:#17F600; } #mainにはこれ、 .txt { font-size : 1em; line-height : 120%; margin:0 0 5px 380px; padding:0 0 0 30px; text-align : left; color:#69788A; } #menuにはこれ .txt{ font-size : 1em; padding:0 0 0 10px; margin:5px 30px 5px 0; text-align : left; color:#69788A; border-bottom:1px solid #CFDEEF; } といったかんじなのですが…

    • ベストアンサー
    • HTML
  • フッターの画像の位置づけ指定方法がわからない

    ヘッダー・メイン・サイドバー(左右)・フッターの5コマ組みのサイトを表現したいのですが、 フッターに指定した画像を全体サイズでセンターに寄せて(画像の上に、真ん中寄せでテキストを乗せたい)反映させるにはどうしたらいいのでしょうか。フッターに指定しているjpg画像のサイズは、(○●.jpg);511×229pxです、よろしくお願いします。 <style type="text/css"> body /* コンテナ */ div#container{width: 100%; margin-left: auto; margin-right: auto} /* ヘッダー */ div#header{background-color: #ffffff;             font-color:#4876ff; /*background-image: url(.jpg);*/ background-repeat: no-repeat; background-position: center top;          /*padding: 28px 20px 150px*/ } div#header h1{margin: 0} div#header p{color: #ffffff; font-size: 0.50em; margin: 0} /* メイン */ div#main{width: 100%; float: left; margin-right: -230px} /* コンテンツ */ div#content{width: 100%; float: right; margin-left: -186px; margin-right: auto; margin-bottom: 25px} div#content h2, div#content h3, div#content p {margin-left: 186px; margin-right: 230px} div#content h2{background-color: #92c9ff; background-image: url(); background-repeat: repeat-x; border: solid 1px #84c2ff; font-size: 0.875em; color: #00688b; line-height: 32px; padding-left: 6px; margin-top: 0; margin-bottom: 0} div#content h3{background-color: #ffffff; background-image: url(); background-repeat: no-repeat; background-position: 0px 2px; font-size: 0.875em; line-height: 22px; padding-left: 26px; margin-top: 30px; margin-bottom: 0} div#content p{font-size: 0.75em; line-height: 1.6; margin-top: 10px} /* サイドバー */ div#sidebar{ background-image:url(.jpg); width: 170px; float: left; margin-bottom: 25px} ul.sidemenu{font-size: 0.90em; margin-top: 0; margin-left: 0; padding-left: 0; line-height: 0} ul.sidemenu li{list-style-type: none} ul.sidemenu li a{       display: block; line-height: 25px; text-decoration: none;    text-align:right background-img:url(.gif);       padding-left: 10px} ul.sidemenu li a:hover{background-color: #cdc1c5               color: #8b1c62 } ul.sidemenu ul {margin: 0;       padding: 0} ul.sidemenu ul li a {background-img:url(gif); color:#5d478b; border-bottom: solid 1px #ab82ff;        line-height: 24px} ul.sidemenu ul li a:hover {background-color: #eee0e5;                   color:#ffffff;      border-bottom: solid 1px #ab82ff; } p.feed{margin-bottom: 10px} p.feed a{font-size: 0.75em; color: #444444; text-decoration: none; line-height: 30px; border: solid 1px #888888; padding: 5px} p.feed img{border: none; vertical-align: middle} /* 右サイドバー */ div#sidebar-right{width: 150px; float: right} div.info{border: solid 1px #84c2ff; margin-bottom: 18px} div#sidebar-right h2{background-color: #c6e3ff;   background-image: url(); color: #3c5916; font-size: 0.75em; text-align: center; padding: 5px; margin-top: 0; margin-bottom: 3px} div#sidebar-right p.photo{text-align: center} div#sidebar-right p{font-size: 0.75em; margin: 10px 5px} div#sidebar-right ul{font-size: 0.75em; margin: 5px; padding: 0} div#sidebar-right ul li {background-image: url(); background-repeat: no-repeat; background-position: 0 6px; padding-left: 13px; list-style-type: none} /* フッター */ div#footer{background-image:url(○●.jpg);       background-repeat: no-repeat; width: 100%; margin-top: ; padding-top: 8px; clear: both} address{font-size: 0.75em; font-style: normal; text-align: center} </style> ・・・・・・・・ここまで指定 ここから、html打ち込み↓ <!-- フッター --> <div id="footer"align="center"> ~~テキスト文章~~<br> <address><big>~アドレスのテキスト~</address></big> <br>○○おなじくテキスト</div> <div align="center"> ~◆◆サイトの名前~   <img src="○○.jpg"border="0"bordercolor="#87ceeb"alt=""> <br><br> </body> </html> 少しいじると、おかしな反映になります、お助け下さい。

    • 締切済み
    • CSS
  • WordPress レスポンシブテーマのCSS

    http://atsumare.wp.xdomain.jp/ 上記のURLでWordPressを使ってレスポンシブデザインの自作テーマを構築中です。 クラス「glay」でくくったボックスがスマホだと本文に食い込んでしまって困っています。 下記のものがスマホ用スタイルシートです。 /**************************************** スマホ用 ****************************************/ @media screen and (max-width:640px){ #main-1 { max-width: 100%; width: 100%; } /* ページヘッダー */ body.home header { background-size:cover; background-image:url("http://atsumare.wp.xdomain.jp/wp-content/uploads/2019/09/bg.jpg"); width:100%; height:200px; } header img{ background-size:cover; display:inline-block; margin-left:auto; margin-right:auto; } h1 { position:absolute; top:0; left:0; margin-left:50px; margin-top:100px; color:#fff; font-size:24pt; } header img { background-size:cover; /* width:640px; height:200px; */ } .right-dw { display:inline-block; position:relative; width:100%; float:left; } header nav { display: none; } /* コンテンツエリア */ article { width:100%; display:block; padding-left: 5px; padding-right: 5px; box-sizing: border-box; } img { max-width:100%; height:auto; margin: 5px 5px 5px 5px; float:left; background-size:cover; } .right-dw { clear:both; display:block; position:relative; width:100%; height:auto; float:left; } .glay { border:dotted 2px #696969; display:block; color:#696969; padding:2px; margin:15px 15px 15px 15px; position:absolute; } /* フッターエリア */ footer { max-width:100%; width:500px; display:block; text-align:center; margin-left:auto; margin-right:auto; } .footer { width:130px; display:inline-block; text-align:left; color: #000; font-size: 10pt; margin-left:auto; margin-right:auto; } small { font-size:10pt; } } どなたかご教示ください。

    • 締切済み
    • CSS
  • マージン?空白?を変えたい

    以下のコードで左右のマージン?空白?を変えたいのですが、どうすればよいのでしょうか? 現状、ヘッダのメニューを9個までは普通に設置できるのですが、10個になると二段になってしまうので、ちょっとみっともないのです。文字サイズは変更したくないです。 /* ----- header-menu (default color #f3193d) --------------------------------------------------------------------------------------------------------------------------- */ .header_menu { float:right; display:inline; margin:20px 0 0 0; height:52px; background:url(img/header_menu_right.gif) no-repeat right top; } .menu { float:left; background:url(img/header_menu_left.gif) no-repeat left top; font-size:11px; height:52px; margin:0; } .menu, .menu ul { line-height:1; margin:0; padding:0; } .menu li { position:relative; float:left; border-left:1px solid #444; height:48px; margin:2px 0 0 0; z-index:10; } .menu ul li { height:auto; border-left:none; padding:0; left:auto; margin:0; } .menu a:link, .menu a:visited { color:#999; display:block; padding:19px 30px 14px; position:relative; } .menu a:hover { color:#f3193d; text-decoration:none; background:#333; } .menu ul { position:absolute; top:48px; left:0; display:none; opacity:0; width:200px; } .menu ul ul { margin:0 0 0 189px; top:0; }

    • ベストアンサー
    • HTML
  • wordpress ヘッダー画像 横に並べる方法

    テーマはStinger3を使っています。 ヘッダー画像を二つ横に並べたいのですが縦になってしまいます。(header2がheader1の上に来ます。) #header1 { height: auto; margin-left: auto; margin-right: auto; width: 700px; padding: 0 0 0 290px; } #header2 { height: auto; margin-left: auto; margin-right: auto; width: 251px; } floatを使えば横に並べることはできたのですが、 ウィンドウサイズを小さくした時にレイアウトが崩れるので他の良い方法はないでしょうか? 理想としては左側にheader2右側にheader1間に10pxの余白、ウィンドウサイズを小さくした時に、header1とheader2が左方向に移動していく(右から左に向かって小さくした場合) どうすればいいでしょうか? 教えてください。

    • ベストアンサー
    • CSS
  • 背景の色がコンテンツ部分にも表示されてしまいます

    サイトに背景色をつけて、コンテンツ部分は白にしたのですが、どうしても背景色が表示されてしまいます。今はbody以外の各divの背景を白にしていますが、contentsの右下が背景色が表示されてしまします。 お手数ですが、ご指摘頂けると幸いです。よろしくお願いいたします。 <html> <body> <div id="wrapper"> <div id="header"></div> <div id="contents"> <div id="banner"></div> <div id="navi"> <h2><a href="../service/index.html"><em>あああ</em></a></h2> 中略 </div> <div id="bread"><a href="index.html">トップページ</a> &gt; あああ</div> <div id="main"> <p>あああ</p> </div> <div id="sidenavi"> <h3>あああ</h3> <p>あああ</p> </div> <div id="pagetop"><a href="#"></a></div> <div id="footer">Copyright (c) 2009 All Right Reserved </div> </div> </body> </html> <css> body { text-align: center; margin: 0px; padding: 0px; background: #FFCCFF; } #wrapper { text-align: left; margin: 0px auto; padding: 0px; height: 800px; width: 850px; background: #FFFFFF; } #header { margin: 0px; padding: 0px; height: auto; width: 850px; background: #FFFFFF; } #contents #banner { background: url(image/banner.jpg) no-repeat; margin: 0px; padding: 0px; height: 304px; width: 850px; } #contents #navi { background: url(image/menu.jpg) no-repeat; margin: 0px; padding: 0px; height: 61px; width: 850px; } #contents #navi2 { background: url(image/menu2.jpg) no-repeat; margin: 0px; padding: 0px; height: 61px; width: 850px; } #navi h2 { font-size: 12px; margin: 0px; padding: 0px; float: left; } #navi em { visibility: hidden; } #navi2 h2 { font-size: 12px; margin: 0px; padding: 0px; float: left; } #navi2 em { visibility: hidden; } #contents { margin: 0px; padding: 0px; height: 500px; width: 850px; background: #FFFFFF; } #contents #sidenavi p { font-size: 95%; line-height: 1.1em; margin-right: 5px; margin-left: 5px; } #sidenavi h3 { font-size: 105%; font-weight: bold; border-left: 7px solid #FF3366; padding-left: 5px; background: #FFCC33; margin: 0px; padding-top: 5px; padding-bottom: 5px; } #navi a { margin: 0px; padding: 0px; height: 61px; width: 169.5px; display: block; text-decoration: none; } #navi2 a { margin: 0px; padding: 0px; height: 61px; width: 170px; display: block; text-decoration: none; } #contents #main { margin: 10px 0px 0px; padding: 0px 10px 10px; height: auto; width: 610px; float: left; font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "メイリオ"; background: #FFFFFF; } #contents #pagetop { clear: both; background: #FFFFFF; margin: 0px; padding: 0px; } #contents #sidenavi { margin: 10px 5px 0px 0px; padding: 0px; float: right; width: 200px; border: 1px dashed #FF3399; background: #FFFFFF; } #footer { font-size: 90%; color: #FF3366; text-align: center; margin: 0px; padding: 10px 0px 0px; clear: both; border-top: 1px dotted #333333; border-right-color: #333333; border-bottom-color: #333333; border-left-color: #333333; background: #FFFFFF; } #main p { font: bold 120% "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; color: #FF3399; padding: 0px; margin-top: 5px; margin-bottom: 5px; } #pagetop img { text-align: center; padding-top: 10px; margin: 0px; padding-bottom: 10px; padding-left: 5px; } .p1 { font-size: 130px; color: #FF3366; padding: 10px; width: 590px; border: 2px dashed #FF3399; background: #FFCCFF; margin: 10px; text-align: center; } #main img { margin: 0px; padding: 0px 0px 10px; } #contents #bread { margin: 5px 0px 0px; padding: 5px 5px 0px 10px; font-size: 100%; width: 830px; }

  • CSSのリスト 背景画像が表示されません

    横並びのメニューを作成したいと思っています。 text-indent:-999pxを利用して、背景画像のみを表示させようとしているのですが、h1はうまくいくもののリスト(li)についてはまったく表示されません。 ちなみにtext-indentを使用しなければ背景画像は表示されますが、かなり画像が下にずれ込んでしまっています。 よろしくお願いします。 #header h1 { margin: 5px 0 0 20px; padding: 0; width: 248px; height: 143px; float: left; text-indent: -9999px; font-size: 130px; background: url(../images/logo.jpg) no-repeat #FFFFFF; background-position: center; } ul { margin: 0; padding: 0; width: 635px; height: 54px; } li{ float: left; list-style: none; margin: 0; padding: 5px; font-size: 50px; text-indent:-999px; } li#top { background: url(../images/menu/top.jpg) no-repeat; }

    • ベストアンサー
    • HTML
  • ホームページテンプレートダウンロード

    ホームページのテンプレートをダウンロードしました。 内容は下記のとおりです。 しかしこのままアルファエディットに貼り付けてもイメージ通りになりません。 他にimageフォルダが付いていてgifが4つあったのですが これをどこかに貼り付けなければならないのでしょうか? 教えてください。よろしくお願いします。 @charset "UTF-8"; /* --------------------- * FONTSIZE MODEL * * --------------------- * 63% -> 10pxに相当 * 70% -> 11pxに相当 * 75% -> 12pxに相当 * 82% -> 13pxに相当 * 88% -> 14pxに相当 * 94% -> 15pxに相当 * 100% -> 16pxに相当 * 107% -> 17pxに相当 * 113% -> 18pxに相当 * 119% -> 19pxに相当 * 125% -> 20pxに相当 * --------------------- */ /* ========BASIC======== */ * { font-family:Verdana, Helvetica, sans-serif; color:#333; } body { margin:0; padding:0; line-height:1.6; letter-spacing:1px; background:#EFEFEA; } br { letter-spacing:normal; } a { color:#333; text-decoration:none; } a:hover { color:#DF8713; text-decoration:none; } img { border:0; } h1,h2,h3,h4,h5,h6 { margin:0; } /* ========TEMPLATE LAYOUT======== */ div#top { width:778px; margin:0 auto; border-left:1px solid #ccc; border-right:1px solid #ccc; background:#fff; } div#header { width:774px; margin:0 2px; background:#4f3333; } div#menu { width:774px; margin:0 2px; background:#ccc; } div#contents { clear:both; width:774px; margin:0 2px; padding:10px 0; } div#main { float:left; width:554px; padding:0 5px; } div#sub { float:right; width:200px; padding-right:5px; } div#footer { clear:both; width:774px; margin:0 2px; } /* 回り込み解除 */ div#contents:after { content:""; display:block; height:0; clear:both; visibility:hidden; } /* ========HEADER CUSTOMIZE======== */ div#header h1 { margin:0; padding:0 10px; font-size:150%;/* 24px相当 */ color:#fff; line-height:80px; } div#header h1 a { color:#fff; } div#header h1 a:hover { color:#DF8713; } /* ========MENU CUSTOMIZE======== */ div#menu ul { margin:0; padding:0; } div#menu li { float:left; font-size:82%;/* 13px相当 */ color:#333; list-style-type:none; } div#menu li a{ display:block; margin-right:1px; padding:0 20px; color:#fff; line-height:2.5; background:#9C6565; } div#menu li a:hover{ color:#fff; background:#DF8713; } /* 回り込み解除 */ div#menu ul:after{ content:""; display:block; height:0; clear:both; visibility:hidden; } /* ========MAIN CONTENTS CUSTOMIZE======== */ div#main a { color:#DF8713; } div#main a:hover { border:0; color:#DF8713; border-bottom:1px solid #DF8713; } div#main h2 { margin-bottom:3px; padding:2px 2px 2px 5px; font-size:94%;/* 15px相当 */ font-weight:bold; border-left:5px solid #4E3333; background:url(images/bg_h2.gif); } div#main h3 { margin-bottom:2px; padding-left:25px; font-size:82%;/* 13px相当 */ background:url("images/bg_h3.gif") 0 50% no-repeat; } div#main p{ margin:0 0 1em 0; font-size:82%;/* 13px相当 */ } /* ========SUB CONTENTS CUSTOMIZE======== */ div#sub .section { margin-bottom:10px; padding:10px; background:#DEDDD0; } div#sub h2 { padding-bottom:5px; text-align:center; font-size:94%;/* 15px相当 */ font-weight:bold; color:#fff; border-bottom:1px solid #93847B; } div#sub ul { margin:0; padding:5px 0 0 10px; } div#sub li { margin:0; padding-left:12px; font-size:82%;/* 13px相当 */ background:#DEDDD0 url("images/bg_list.gif") 0 50% no-repeat; list-style:none; } /* ========TOTOP CUSTOMIZE========= */ div#totop { padding:10px; text-align:right; font-size:82%;/* 13px相当 */ } div#totop a{ padding:0 0 0 12px; background:url("images/bg_totop.gif") 0 60% no-repeat; } /* ========FOOTER CUSTOMIZE======== */ address{ padding:20px 0; text-align:center; font-style:normal; font-size:75%;/* 12px相当 */ color:#333; border-top:1px solid #ccc; }

  • safariだけCSSが崩れてしまいます

    safariだけCSSが崩れてしまいます。 初心者ですが、教えて下さい。 コンテンツ部分の中に、画像(説明文付き)を横並びに3列並べて表示するためにfloatで指定してあります。 下記のように並べたいのですが、safari以外のブラウザでは全てうまく表示されるのに、safariだけ2と3が下に落ちて崩れてしまいます。 1 2 3 4 5 6 どのようにしたら横に並んでくれるのか、わかりません。。 どうかお詳しい方、ご教授下さい。 ______________________________________ #secondary { float:left; width:705px; padding:10px 0 0 15px; margin:0; } .index .module { float:left; width:210px; margin:0 17px 0 0; padding:0 4px; text-align:left; } .galleries { background:#eee; float:left; width:100%; margin:0 0 15px; position:relative; } .gallery .galleries { float:left; position:relative; width: 720px; margin:0 0 15px; padding:0; list-style:none; padding-top:10px; line-height:1.4em; } .gallery .galleries .thumb { float:left; margin:0 10px 10px 0; } .index .galleries { margin-bottom:5px; } .galleries ul { float:left; margin-left:0; margin-bottom:0; list-style:none; text-align:left; } .galleries li { background-image:none; float:left; position:relative; width:220px; height:6.4em; overflow:hidden; margin-bottom:0; padding:75px 0 1.6em 15px; } .archive .galleries li { height:10.5em; } .galleries h3 { margin:0 10px 0 4px; font-size:100%; } .galleries h3 a, .galleries a.img, .galleries h3 a:visited { border-width:0; } .galleries .img { position:absolute; top:4px; left:15px; } .galleries .img img { display:block; } .galleries p { margin:0 10px 0 4px; } .galleries div { margin:0 4px; } .gal { background:url("../images/bg_gal.gif") 11px 0px no-repeat; margin:0; } html>body .gal { background-image:url("../images/bg_gal.png"); }

    • 締切済み
    • CSS