[解決済み] アップグレード時のレイアウトの不具合

[sakurai]

お世話になります。

wlcartを0.7.3から1.0.6に手動でアップグレードを

行ったのですが、カートページのレイアウトが崩れてしまいました。

調べてみたのですが、usc-e-shop/css/usces_cart.cssが

読み込まれていないようです。

以前投稿されていた「usces_cart.cssを読みに行っていない」

という記事は読んだのですが、回答の前に解決されたようで、

書かれていた解決方法がちょっと私にはわからなかったので、

詳しく教えて頂けませんでしょうか。

[確認ブラウザ]

・IE9

・Firefox 3.6.23

・Google Chrom 14.0.835.202

※Google Chromではレイアウトは崩れませんでした。

[nanbu]

こんにちは。

＞※Google Chromではレイアウトは崩れませんでした。

と言うことは、usces_cart.css は読み込まれていると思われますが、ソースは確認されていますでしょうか。この様なソースが確認できれば読み込まれているという事になります。

<link href="http://************/wp-content/plugins/usc-e-shop/css/usces_cart.css" rel="stylesheet" type="text/css" />

＞手動でアップグレードを・・・

とありますが、解凍してFTP でPUT したのでしたら、念のために全てのファイルが更新されているか確認してみてください。

今回の症状とは関係ないかもしれませんが、アップグレードも含めプラグインのインストールは圧縮ファイルをそのままアップロードする方法が良いかと思います。

＞以前投稿されていた「usces_cart.cssを読みに行っていない」・・・

この記事にある、wp_head() はテーマ内のheader.php に有ります。アップグレードの際にテーマを編集していないのであれば、これは関係ないと思います。

どの様に崩れているのか、実際に見てみないと何とも言えない感じです。

[sakurai]

早い返答ありがとう御座います。

レイアウト崩れのイメージがつかみ難いので

スクリーンキャプチャをアップ致しました。

・Firefox_SC.jpg ：Firefoxでのキャプチャ

・Chrome_SC ：Google Chromでのキャプチャ

※どちらも[発送・支払い方法]ページになります。

ソースの確認なのですが、

FirefoxのFirebugというアドオンでソースを表示し、

確認したのですが、上記に提示して頂いた一文は確認できました。

ですが、Firebugで「発送・支払い方法」の「li」要素に

使われているcssを表示しますと、ver0.7.3の時は

・wp-content/plugins/usc-e-shop/css/usces_cart.css

・wp-content/themes/welcart_default/style.css

の2ファイルが表示されるのですが、

ver1.0.6にアップデートした後ですと

・wp-content/themes/welcart_default/style.css

しか表示されませんでしたので、usces_cart.cssが

読み込まれていないのではないかと思った次第になります。

手動アップグレードですが、上書きはしていないので

ファイルが更新されていないという事はないと思います。

ファイルの日付は念の為確認致しましたが、問題はありませんでした。

以上よろしくお願い致します。

[attachment=4510,17] [attachment=4510,18]

[nanbu]

新しいバージョンは、カートページ関連の以下の部分のclass が変更されています。

<div class="usccart_navi">

<ol class="ucart">

<li class="ucart usccart usccart_cart">カートの中</li>

<li class="ucart usccustomer">お客様情報</li>

<li class="ucart uscdelivery">発送・支払方法</li>

<li class="ucart uscconfirm">内容確認</li>

</ol>

</div>

usces_cart.css をテーマフォルダに置いてカスタマイズしている場合は修正が必要です。新しいバージョンのwp-content/plugins/usc-e-shop/css/usces_cart.css を参考にしてください。

[sakurai]

返答ありがとう御座います。

すべてのファイルをグレップしてみたのですが、上記ソースで指定されている

「usccustomer」,「uscdelivery」,「uscconfirm」

を定義している箇所が見つかりませんでした。

申し訳ありませんが、新しいバージョンのソースを参考にする方法について詳しく教えて頂けないでしょうか。

[nanbu]

セレクタ　div.usccart_navi ol.ucart　と　div.usccart_navi li.ucart　を確認してみてください。

恐らくwidth: 24%; などが無いのではないかと思います。もし的を外してましたらまたご連絡下さい。

[sakurai]

返答ありがとう御座います。

上記に定義していただいた処理を行いました。

かなりレイアウトが正常になったのですが、

まだ少し不具合が残っています。

さらに他のファイルの修正が必要なのでしょうか。

それともテーマ内CSSの修正の仕方が悪かったのでしょうか。

以下の処理を行いました。

01.テーマ内のCSSファイルの「Welcart cart page CSS」と定義されている部分を新しいバージョンの定義にすべて置き換えました。

02.テーマ内のimagesディレクトリに

　　　cart_navi_bg1.jpg　～　cart_navi_bg4.jpg

　　　をコピーしました。

03.01で定義した画像のパスを修正しました。

　　　「../images/cart_navi_bg1.jpg」

　　　　　　　　　　↓

　　　「./images/cart_navi_bg1.jpg」

[スクリーンキャプチャ]

・after_SC.jpg　　：ver1.0.6時の画面

・before_SC.jpg 　：ver0.7.3時の画面

以上よろしくお願い致します。

[attachment=4529,21] [attachment=4529,22]

[sakurai]

レイアウトの件、解決致しました。

テーマ内のCSSファイルに以下を追加致しました。

#cart table {

border: 1px solid #CCCCCC;

width: 99%;

}



#cart .num {

text-align: center;

white-space: nowrap;

width: 3%;

}

#cart th {

background-color: #999999;

color: #FFFFFF;

line-height: 1.3em;

white-space: nowrap;

}

#cart th, #cart td {

border-color: #FFFFFF #CCCCCC #CCCCCC #FFFFFF;

border-style: solid;

border-width: 1px;

padding: 3px 5px;

text-align: center;

vertical-align: middle;

white-space: normal;

}



#cart input.quantity {

font-size: 13px;

text-align: center;

width: 40px;

}



#cart .quantity {

text-align: center;

white-space: nowrap;

width: 5%;

}

何度も返答ありがとう御座いました。

[nanbu]

お手数をおかけしました。うまく行って良かったです。

フロントのレイアウトに関わる変更はできるだけ避けたいと考えていますが、利便性を考慮して変更する場合もございます。今後もテンプレートの変更が有る場合はアップグレードの際に告知して行きますので、「コミュニティー」をご覧頂けたらと思います。よろしくお願いいたします。

[投稿者]

投稿