- 締切済み
ワードプレスのwelcartカートボタン
こんにちは ワードプレスにwelcartを設置しています。 カートボタンをカスタマイズしたいと考えています。 CSSに @charset "utf-8"; /* CSS Document */ .skubutton{ background-image:"http:/画像" background-repeat: no-repeat; width: 443px; height: 108px; padding: 0px; margin: 0px; border:none; cursor:pointer; overflow:hidden; display: block; } を記述しました。 画像のようなカートの状態になっています。 カートのサイズは変更されましたが、画像が表示されません。 画像を表示するにはどのように記述を変更すればよいでしょうか？
- emura0919
- お礼率0% (0/1)
- CSS
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- outbrave
- ベストアンサー率60% (231/380)
背景画像表示の例です。 background-image: url("http://example.com/back.jpg");
関連するQ&A
- text フォームに背景を設定した時の挙動
<input type="text"> に、CSS による背景をつけました（ただの段差が付いた白い領域、というのを変更したかった）。CSS は次の通り。 .myinputtext { height: 15px; width: 57px; background-image: url(/Resource/inputtext.png); background-repeat: no-repeat; font-size: 9px; margin: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; padding-top: 2px; padding-right: 0px; padding-bottom: 0px; padding-left: 2px; overflow: hidden; } 外観は望みどおりのものが出来たのですが、背景画像以上に幅を取る文字数を入力すると、その入力欄（背景の画像）を超えて文字が入力されてしまいます。overflow をhidden にしても回避できません。 幅を超える文字数入力があったときに、なんとかデフォルトの text input と同様に文字だけをスクロールさせたいのですが、何かうまい方法はあるでしょうか。
- ベストアンサー
- CSS
- oveflow、margin等の表示について質問です
以下のようなhtml （XHTML 1.0 Transitional、文字コードはUTF-8） <body> <div id="wrapper"> <div id="container"> test </div> </div> </body> で、bodyにリピート有りの背景、wrapperにx軸にリピートの背景、containerにリピート無しの背景と背景色に白をcssで設定しました。 containerは中央揃えで上に35pxの空きをもたせたいのですが、containerに「margin-top:35px」とするとIE（6、7）では意図した通りに表示されるのですがfirefoxだとwrapperにも35pxの空きができてしまいbodyの方の背景が見えてしまうといった状態になりました。 containerのmargin-topを指定せず、wrapperに「padding-top:35px」を指定する、または、containerのmarginはそのままでwrapperに「overflow: hidden」を指定すると両方のブラウザで意図した通りに表示されました。 ただ、paddingを指定した方はわかるのですが、なぜoveflowで、しかもhiddenで解決できたのかが全くわかりません。個人的な感覚ではcontainerのmarginをいかす方法で進めたいのですが…。 変な質問ですが、なぜこれで解決できたのが教えていただけると助かります。根本的に間違っている点などもありましたらご指摘していただければ幸いです。説明下手ですが何卒、よろしくお願いいたします。 ---元のcss--- html,body { height: 100%; margin: 0px; padding: 0px; } body { background-image: url(../img/***1.jpg); background-repeat: repeat; background-position: left top; height: 100%; } #wrapper { background-image: url(../img/***2.jpg); background-repeat: repeat-x; margin: 0px; padding: 0px; width: 100%; } #container { background-color: #FFFFFF; background-image: url(../img/***3.jpg); background-repeat: no-repeat; background-position: left top; width: 850px; margin-right: auto; margin-left: auto; height: auto; min-height: 620px; margin-top: 35px; }
- ベストアンサー
- CSS
- ワードプレス メニュー見出し画像の位置変更方法
Wordpressのサイドバーのメニュー左横にある見出し画像変更の表示位置変更について教えて下さい。 テーマでStinger3を使用しており、以下のURLを参考にして見出し画像の内容を変更する方法は分かりました。 http://kichiden.com/stinger-sidebar/ .menu_underh2 { margin-bottom: 20px; margin-top: 20px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 35px; background:#eee;/*背景追加*/ background-image: url(images/ca3.png); background-repeat: no-repeat; background-position: left center; border-bottom: 2px #212121 solid;/*下線追加*/ } 私の作成したブログでは、メニューの見出し横に表示させた画像のサイズを少し大きくしてしまったので、見出し画像に左の余白が無い状態になっています。 上記padding-left: 35px;の数字を大きくしても、 文字が右にズレるだけで、見出し画像の位置は同じで変わりません。 見出し画像だけを右に少しずらすしたいんのですが、どのようにすれば良いのでしょうか？ どうかアドバイスのほど、よろしくお願い致します。
- ベストアンサー
- ホームページ作成ソフト
- 背景を両端に固定する方法
前に人に教えてもらった以下の方法でやったのですが 右側しか表示されなくなりました。どうしてでしょう？画像は左側用と右側用の２種類用意しなくてはいけないのでしょうか？ <style type="text/css"><!-- body{margin:0;padding:0;background:url("image/rose_b2.JPG") #000000 100% 0 repeat-y;overflow:hidden;} #body{overflow:auto;background:url("image/rose_b2.JPG") repeat-y fixed;width:100%;height:100%} --></style> よろしくお願いします
- ベストアンサー
- HTML
- IEでだけ1つのDivがずれる。
現在スタイルシートを使ってレイアウトをしているのですが、 なぜかIEだけ一部のDIVのセンタリングがうまくいきません。 ヘッダー、メニューは共に中央揃えなのですが、その下のメインDIVのみ 10pxくらいだけ左側にずれます。Firefoxではきちんと揃って表示されています。 色々試したのですがどうしても解決方がわかりません。よろしくお願いします。 css body{ text-align: center; margin-top: 0px; margin-bottom: 0px; margin-left: auto; margin-right: auto; padding: 0px; } #header{ display: box; margin: 0px; padding: 10px 0px 15px 0px; background-image: url(header.gif); background-repeat: repeat-x; background-position: center bottom; } #header div{ width: 780px; display: box; margin-top: 0px; margin-bottom: 0px; margin-left: auto; margin-right: auto; padding:0px; } #menu { clear: both; margin: 0px; padding: 0px; background-image: url(menu-bg.gif); background-repeat: repeat-x; height: 50px; } .main{ clear: both; margin: 0px auto 0px auto; padding:0px; text-align: left; width: 780px; bottom: 0px; } #menu ul{ width: 780px; margin: 0px auto 0px auto; padding: 0px; height: 50px; overflow: hidden; } ヘッダー、メニュー共に、背景画像を画面いっぱい横並びにしたいため その内の要素のみをセンターに寄せる形にしています。 htmlでは上記のdiv(ヘッダー・メニュー・メイン)を縦に三つ並べています。
- ベストアンサー
- HTML
- IE6で画像の下に余白が入ってしまいます。
CSSを使ってレイアウトをしているのですが、 <ul> <li>画像</li> <li>画像</li> <li>画像</li> </ul> でなぜか画像ごとに、下の部分に少しだけ余白ができてしまいます。 CSSでmarginやpaddingを0にしたり、 http://www.happy-crossing.com/tagmemo/log/eid11.html にあるようにvertical-align:bottomにしたり・・・ それでもなぜか下の余白が表示されています。 こちらの方は治ったみたいなのですが・・・ 他のブラウザはいろいろ見ましたが、余白などなく表示されていました。 Dreamweaver上でも少し余白が見えています・・・ お心当たりのある方がいらっしゃいましたら、どうかよろしくお願致します。 CSSは以下のように記述しています。 ul { float: left; margin: 0px; padding: 0px; list-style: none; margin-top: 45px; } li { width: 150px; background-repeat: no-repeat; padding-left: 13px; padding-bottom: 0px; height: 140px; float: left; vertical-align: bottom; margin-bottom: 0px; }
- ベストアンサー
- HTML
- bodyから左右に15pxずつ背景画像をのばしたい
cssの基本設定ですが、 背景色をひき、さらにbodyから左右に15pxずつ背景画像をのばしたい という設定を試みていますがうまくいかずご教授いただけたらと思い書き込みさせていただきました。 背景色が #9999cc これを全面に表示し 背景画像を width 800pxで作り下にリピート そしてbodyが width 770pxの #ffffffの白色です。 そして cssで記述して表示してみたところ safaiではきちんと表示されるのですが、firefoxではbodyの幅までしか背景画像が表示されていません。 bodyから左右に15pxずつ背景画像をのばしたいのですが、どうやればよいでしょうか。 現在の状況ですが、 /* ここからcss ------------------------------------ */ *{ color: #333333; font-size: 12px; line-height: 20px; text-decoration: none; margin: 0; padding: 0; word-wrap:break-word; } html { height: 100%; margin: 0px; padding: 0px; background-color: #9999cc; background-image:url(../img/bg.jpg); background-position:center; background-repeat:repeat-y; } body { margin: 0px; padding:0px; color: #333; text-align:center; font-family:"メイリオ",Meiryo,"MS Pゴシック", Osaka, sans-serif; } 本当に困っております。 誰かわかる方がいらっしゃればよろしくおねがいいたします。
- ベストアンサー
- CSS
- ブラウザ間のCSSの表示違いにつきまして
現在、趣味のホームページを作成しているのですが、IEでは意図したとおり表示されるのですが、firefoxではCONTENT内上部（float boxの上）に隙間のようなものができてしまって困っています・・・ CSSは以下になります。 #content { width: 680px; margin: 0 10px; padding: 0; background-image: url(../img/content-back.jpg); background-repeat: repeat-y; text-align: center; overflow: auto; text-align: center; } #left { float: left; width: 456px; margin: 0; padding: 50px 0; text-align: center; } #right { float: right; width: 224px; margin: 0; padding: 50px 0; background-color: #000000; text-align: center; } #footer { height: 60px; margin: 0 10px; padding: 0; background-image: url(../img/footer-back.jpg); background-repeat: repeat-x; text-align: center; clear: both; } CONTENTを親要素として、その中にleftとrightボックスを作成しました。 なお、overflow: auto;をなくしてcontent・left・rightに高さを指定したら隙間はなくなるのですが、共に内容に準じた高さ（auto）にしたくて・・・ どなたか解る方いらしたらご教示お願いします！
- ベストアンサー
- HTML
- ブログを３カラム右右から左右両サイドにしたい。
現在CSSは下記のようになっています。 どこをいじれば右右から左右両サイドにできるのか教えていただけたら嬉しいです。 宜しくお願い致します。 /** 03. Layout - レイアウトの設定 */ /* ----------------------------------------------- */ body { margin: 0; padding: 0; min-width: 960px; text-align: center; background-image: none; background-repeat: repeat; background-position: 50% top; } div#containerWrap { width: 960px; margin: 0 auto 5px; } div#container {} div#content { padding: 10px 0; border-width: 1px; border-style: solid; } div#main , div#sub , div#extra { overflow: hidden; } div#main { float: left; display: inline; width: 538px; } div#main div.column-inner { padding: 0 10px 10px; } div#sub { float: left; display: inline; width: 210px; } div#sub div.column-inner { padding: 5px 10px 0; overflow: hidden; border-width: 1px; border-style: none none none solid; } div#extra { float: left; display: inline; width: 210px; } div#extra div.column-inner { padding: 5px 10px 20px; overflow: hidden; border-width: 1px; border-style: none none none solid; }
- ベストアンサー
- HTML
- FC2ショッピングカート 写真の大きさを変える方法
FC2のショッピングカートでネットショップをしているのですが、表示される画像が小さいので大きくしたいのですが、どこをいじっていいのかわからなくて、困っています。 商品説明のページの写真（画面上で表示されている写真幅約2×3cm）を少し大きくしたいのですが。。。 使用しているテンプレートは custam です。 下のどこかをいじればよいのかな？とおもっておりますが、いかがでしょうか？ 大変申し訳ありませんが、素人ですのでわかりやすく教えていただけると、とっても嬉しいです。 いろいろ検索して調べましたが、わからなくて困っています（涙） どなたか、わかる方教えて頂けると助かります。 /*--盾妬亥風--*/ .sort{ width:460px; margin-top:10px; text-align:left; padding-left:20px; } .sort a{ margin:0px 10px; } .pagelinks{ width:460px; padding-left:20px; } .pagelinks .a{ width:460px; text-align:left; } .pagelinks .b{ width:460px; margin-top:3px; } .pagelinks .b .ahead{ width:20%; float:left; } .pagelinks .b .pageno{ width:60%; float:left; } .pagelinks .b .next{ width:20%; float:right; } .item_list{ float:left; width:33%; padding-left:0px; } .item{ width:150px; text-align:center; overflow:hidden; padding-left:20px; } .item a img{ border:solid #dcdcdc 1px; } .item .name{ text-align:left; margin:3px; } .item .comment{ text-align:left; margin:3px; } .item .other{ margin:3px; text-align:right; } /*--盾妬傷亨ヘ-*/ .item_detail{ text-align: center; font-size: 12px; width: 480px; } .item_detail .thumb{ float:left; margin-top:10px; width:33%; } .item_detail .thumb img{ border:solid #dcdcdc 1px; padding:0px; margin:0px; } .item_detail .thumb a img { background-color:none; display:block; } .item_detail .img-comment{ padding:3px; } .item_detail .comment{ padding:3px; text-align:left; } .item_detail .about{ text-align:right; } .item_detail .about .other{ padding:3px; } /*--チェック--*/ #subtitle{ margin:15px auto 5px; } .check{ margin:0; padding:0 0 30px; width:452px; } .pickupbase { font-size:10px; font-family:Osaka, Verdana, "ＭＳ Ｐゴシック"; margin-right:15px; padding-bottom:15px; width:130px; float:left; overflow:hidden; } .pickupbase a img{ border:solid #dcdcdc 1px; padding:0px; margin:0px; } .pickupname { font-weight:bold; text-align:center; padding-bottom:3px; overflow:hidden; } .pickupprice { text-align:center; padding-top:5px; overflow:hidden; }
- 締切済み
- CSS
