WCEX Mobile のテキスト表示

[mokusei]

——————————————-
WordPress のバージョン：4.2.3
Welcart のバージョン：1.4.20
ご利用のテーマ：Welcart default
症状を確認したブラウザ：Safari 5.1.10
サーバー（会社名、サービス名）：エックスサーバー株式会社、Xserver
SSLの利用：独自SSL　
WordPress のパーマリンク設定：デフォルト
——————————————–

お世話になっております。

WCEX Mobile のテキスト表示についてお尋ねします。
WCEX mobileのバージョン：1.2.10

<問題点>
スマホで商品詳細ページを確認すると、カートのSKUのタイトル部分のテキストが入りきらず、一部しか見えません。さらによく見ると、そのテキストの一部と注文番号が「在庫状態」のほうに回り込んでいることがわかりました。
長めのテキストを全部表示させたい場合、どうすればいいでしょうか？ (複数行になっても可)
ご教示いただけますようお願いいたします。

[ohnishi]

こんにちは

SKU表示名を全表示させるには、
スタイルシートを修正する事で解決できるかと思います。

まずは、該当箇所にどのようなスタイルが
どのファイルで指定されているのかを調べる必要があるかと思います。

Google ChromeやFirefoxなどのブラウザに付属している要素検証を利用していただくと
どんなスタイルが効いているのかなどの確認ができますので、
その後、CSSの微調整を行ってみてください。

どうぞよろしくお願いいたします。

[yasumax]

こんにちは。

スマートフォン用Welcartデフォルトテーマにて、SKUのタイトル名が固定幅で作成されているためでした。
次期バージョンにて、長いSKU名も収まるように可変対応いたします。

お急ぎでしたら下記を参考に修正を行ってください。
【　該当ファイル　】
～省略～/wp-content/themes/mobile_smart_default/usces_cart.css
【　該当箇所　】
10行目～25行目
【　修正コード　】
修正前

.accordion {
	width:418px;
}
.accordion h3 {
	width:auto;
	font-weight:bold;
	font-size: 20px;
	line-height: 40px;
	color: #fff;
	background-image: url(images/detail_syohin_title_a.jpg);
	background-repeat: no-repeat;
	height: 40px;
	padding-right: 15px;
	padding-left: 15px;
	margin-bottom: 10px;
}

　　↓

修正後

.accordion {
	width: 100%;
}
.accordion h3 {
	width:auto;
	line-height: 40px;
	margin-bottom: 10px;
	padding: 0 15px;
	background-color: #2B2B2B;
	background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #1F1F1F), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #1F1F1F),color-stop(.75, #1F1F1F), color-stop(.75, transparent),to(transparent));
	-webkit-background-size: 14px 14px;
	color: #fff;
	font-size: 20px;
	font-weight:bold;
	border: #333 1px solid;
	-webkit-box-shadow: 0 1px 0 #fff inset;  
	-moz-box-shadow: 0 1px 0 #fff inset;
	box-shadow: 0 1px 0 #fff inset;
}

[mokusei]

ohnishiさま

さっそくありがとうございます。
「ブラウザに付属している要素検証を利用する」という方法を教えていただきありがとうございました。
今回は yasumaxさまの方法がより具体的でしたのでそちらを試しました。

[mokusei]

yasumaxさま

具体的にお教えいただきありがとうございました。
さっそく書き換えを行ない、複数のスマホ（iPhoneのみ）で確認してみましたが、見え方は変わりませんでした。変更前と全く同じ状態です。

[yasumax]

こんにちは。

私のほうでは、iPhone6のSafariとGoogle Chromeで確認をいたしました。
ブラウザキャッシュを削除しても変わりませんでしょうか？

[mokusei]

yasumaxさま

お返事ありがとうございます。
iPhone5s（iOS 8.3）のSafariでブラウザのキャッシュを消去して何度か確認しましたが変わりませんでした。
いまGoogle Chromeを新たにインストールして確認しましたが、やはり変わりません。

[yasumax]

こんにちは。

キャッシュ削除しての確認ありがとうございます。
変わりませんか。。。

どんな表示になっているかキャプチャ画像を添付していただくことは可能ですか？
ちなみに添付画像は、私の方でiPhone6のSafariで確認した際のキャプチャ画像になります。

また、スマホのテーマ自体は前述のCSSの修正以外にテンプレートもCSSも編集はしていない状態ですか？

Attachments:

You must be logged in to view attached files.

[mokusei]

yasumaxさま

画面キャプチャ（説明入り）を添付します。

変更箇所は前述のCSSの修正のみです。
テンプレートも、CSSの他の箇所も触っていません。

念のため再度やり直しました。
旧バージョンを削除し、最新バージョンを新規インストールしてから、その箇所のみを修正しました。

Attachments:

You must be logged in to view attached files.

[yasumax]

こんにちは。
ご協力感謝いたします。

キャッシュ系のプラグインなど利用されていますか？
画像を拝見させてもらいましたが、前述で修正した指定が効いていないため、やはり何かしらのキャッシュが効いている感じがします。

普段利用されているブラウザによって設定箇所が異なりますが、パソコンのChrome等のブラウザでスマホ表示を確認することはできますか？
その場合、どんな表示になりますか？

[mokusei]

yasumaxさま

お手数おかけ致します。
キャッシュ系のプラグインが1つありましたので、停止にしましたが状況は変わりません。
また、Google Chromeでスマホ表示をチェックしてみましたが、こちらも見え方は同じです。SKUの全表示にはなっていません。

[yasumax]

こんにちは。

パソコンのGoogle Chromeで確認しても状況が変わらないということですと、そもそものスタイルの修正が効いていないのかもしれません。。。

直接、現象が起こっているサイトを拝見させていただくことは可能でしょうか。
フォーラムにてURLの記載を控えたい場合は、レスキューナビにて不具合調査としてこのフォーラムのURLと現象が起こっているサイトURLを添えてお送り頂けますでしょうか。

[mokusei]

yasumaxさま

いろいろとお手数をおかけしまして申し訳ございません。
基本的なcssの場所を間違えていたことが判明しました。
wp-content/plugins/wcex_mobile 内にあるthemesにも同じものがあり、そちらを書き換えておりました。

#75181のyasumaxさまの修正内容の通りにしたら、テキストの長さに合わせて表示されるようになりました。長いSKU名も全表示されています。解決までいろいろとどうもありがとうございました。

解決済みです。
——————————————-
【正しい該当ファイル】
/wp-content/themes/mobile_smart_default/usces_cart.css
——————————————-

[投稿者]

投稿