*

WordPressの最強無料セット BizVektorテーマでWelcartを搭載してみる2

公開日: : 最終更新日:2013/06/18 WordPress ,

前回で色合いは一応統一できた。しかしよく見ると左右が揃っていない。
そこで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;
}

これも追記して調整。

20130208013620624

だいたい綺麗になりました。

WordPressの場合、cssファイルが複雑に関係してくる。どのCSSが効いているのか探すのが大変なので chromeのデベロッパーツールで影響しているcssファイルを探している。

使い方は簡単で、ブラウザウィンドウの右上にあるツールメニューから、[ツール]から[デベロッパーツール]をクリックするだけ。

th_2013020801391084f

該当するソース部分(左下)を選択すると右側に影響しているCSSファイルと設定がでてくる。チェックを外すと一時的に無効にすることができるので、変化の確認を確かめたい時に便利。

これを知るまでWordpressのCSSはブラックボックス状態でした^^;


Sponsored Link


 
 

関連記事

WordPressの最強無料セット BizVektorテーマでWelcartを搭載してみる

かなり高機能でレスポンシブな無料のWordpressテーマ「BizVektor」。こいつに無料なのに

記事を読む

すごく面白くて、とってもくだらないのに効果のある広告が話題

「いまだにこれを越える折り込みチラシを見たことがない」とTwitterで話題になっている広告がありま

記事を読む

ご質問は掲示板へお願いいたします。

Message

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


Optionally add an image (JPEG only)

Sponsored Link

エレコム GRAPH GEAR NEO カメラバッグDGB-P01BKにジンバルを入れる

やっぱり高いけどEndurance (エンデュランス) カメラバッグの

エレコム GRAPH GEAR NEO カメラバッグDGB-P01BKが北の国から

一年中GWの美少女です。 Lowepro カメラリュック フリッ

MOZA Mini-S スマホ用スタビライザーが届いた!

1万円弱で買えるスマホ用ブラシレスジンバルの新型 MOZA Mini-

GoPro Hero7 Black用 保護ケース アルミ合金保護フレームがいいよって話

別に大した話ではありません。 最近書くことが少ないのでたまには書

期待の新製品 MOZA Mini-S スマホ用スタビライザーが発売されたみたい

教えてもらった新製品のホームページで MOZA Mini-Sが紹介され

→もっと見る




  •  

PAGE TOP ↑