WordPressの最強無料セット BizVektorテーマでWelcartを搭載してみる2
前回で色合いは一応統一できた。しかしよく見ると左右が揃っていない。
そこでCSSを修正。下記のファイルたちに書き込んでいく。
themes/child/style.css
themes/child/usces_cart.css
まずは商品をマスター登録してみた。商品ページを開くと….画像の右に商品名などがくるはずが下に落ちてる…
落ちないように修正。
#itempage h3 {
省略
clear: none;
}
次にカートに投入。カートのテーブル内にあるタイトル部分が白文字なので読めない。これも修正。
#cart_table th {
color: #666;
}
カート上部の進行状況を示す横棒の右側が下がっているのを修正。
#content div.usccart_navi ol.ucart {
list-style-type: none;
list-style-image: none;
height: 31px;
width: 100%;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
padding: 0px;
}
と 頭に #content を追加することで解決。全体が短いようなので
div.usccart_navi li.ucart {
background-color: #CCC;
display: block;
float: left;
margin: 0px;
height: 29px;
color: #FFFFFF;
font-size: 14px;
line-height: 29px;
text-align: center;
padding-top: 2px;
padding-bottom: 0px;
padding-right: 0px;
padding-left: 0px;
width: 25%;
}
と width:25%に変更する。
数量を変更した場合…部分は
#cart .upbutton {
text-align: right;
padding-right: 20px;
}
と追記して調整。
テーブルが右側にはみ出して枠線が切れている問題と、数量の枠がはみ出している点は
#content form input[type=”text”] {
padding: 0px;
margin: 0px;
width: 90%;
}
#content tr td {
padding: 10px 6px;
}
これも追記して調整。
だいたい綺麗になりました。
WordPressの場合、cssファイルが複雑に関係してくる。どのCSSが効いているのか探すのが大変なので chromeのデベロッパーツールで影響しているcssファイルを探している。
使い方は簡単で、ブラウザウィンドウの右上にあるツールメニューから、[ツール]から[デベロッパーツール]をクリックするだけ。
該当するソース部分(左下)を選択すると右側に影響しているCSSファイルと設定がでてくる。チェックを外すと一時的に無効にすることができるので、変化の確認を確かめたい時に便利。
これを知るまでWordpressのCSSはブラックボックス状態でした^^;
Sponsored Link
関連記事
-
WordPressの最強無料セット BizVektorテーマでWelcartを搭載してみる
かなり高機能でレスポンシブな無料のWordpressテーマ「BizVektor」。こいつに無料なのに
-
すごく面白くて、とってもくだらないのに効果のある広告が話題
「いまだにこれを越える折り込みチラシを見たことがない」とTwitterで話題になっている広告がありま
ご質問は掲示板へお願いいたします。