*

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

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

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

録音ミニスタジオ完成の図と12色のリモコンLED電球

構想10年・制作3日の自宅音声収録スタジオの完成です。 ご覧の通

録音(撮影)ミニスタジオの制作DIY

そんな訳で吸音スポンジを壁に取り付けてみた続きです。 調子に乗っ

YAMAHA MG10UXミキサー到着

2018年 物置(事務所or作業場or遊び部屋)の一角を音声収録&撮影

そしてzbrush coreをインストールしてみる話

Blenderに挫折してから一気に3Dにのめり込んでいます。 ま

録音環境を改善する!吸音パネルをDIYとか

久々に更新! すっかり更新グセが抜けてしまい、イマイチやる気が出

→もっと見る




  •  

PAGE TOP ↑