*

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

簡単にSONYカメラとURSA mini 4.6Kの色を合わせる LUTS

少し色々試してみて、とっても気に入ったので改めてご紹介してみます。

MOZA AirCrossのPIDを調整してみる美少女

最初に MOZA AirCrossをPCに繋いで調整する手順を簡単に紹

JJC 液晶シェード(液晶フード) SONY α6000 α6300 α6500 用を試す!

おじさんが液晶フードを試してみたけど...というお話をしまーす!

MOZA AirCross 3軸手持ちジンバルを買ってみた【動画編】

Amazon様で「4,990円OFFのクーポンが適用されています」とい

無料の動画素材サイトをメモ

自分用の動画素材サイトをメモ。 ライセンス等は当然ですが自己責任。良

→もっと見る




  •  

PAGE TOP ↑