*

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


 
 

関連記事

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

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

記事を読む

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

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

記事を読む

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

Message

メールアドレスが公開されることはありません。

CAPTCHA


Optionally add an image (JPEG only)

Sponsored Link

気になる情報・新製品発見メモ

日頃ネットをウロウロしていて記事にするほどでもない情報、記事にするほど

【開封】SmallRig Drop-In Baseplate (Manfrotto 501PL QR Plate Compatible) 2006

引き続き SmallRig Universal Shoulder Pa

【開封】SmallRig Universal Shoulder Pad 2057

最初にお断りしておきますが、いわゆる「単なる開封」記事です。予めご了承

【雑談】URSA mini の設定確認とか安物時計を貰った話

寒くなってきましたがスッキリ晴れ渡る日曜日。久しぶりに予定もなくノビノ

URSA mini & Filmconvert アップデート祭り

いつものように雑談更新。今更お断りすることも無いとは思いますが、今回も

SONY α6300 24p 30p 60p 120pで画質比較

世間では黒金とか言うケシカラン状況になっています。 浮かれポンチ

→もっと見る




  •  

PAGE TOP ↑