WCEX Mobile のテキスト表示

2015 年 8 月 4 日

ホーム フォーラム 拡張プラグイン WCEX Mobile のテキスト表示

このトピックには12件の返信が含まれ、3人の参加者がいます。2 年、 1 ヶ月前 mokusei さんが最後の更新を行いました。

13件の投稿を表示中 - 1 - 13件目 (全13件中)
  • 投稿者
    投稿
  • #75175

    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のタイトル部分のテキストが入りきらず、一部しか見えません。さらによく見ると、そのテキストの一部と注文番号が「在庫状態」のほうに回り込んでいることがわかりました。
    長めのテキストを全部表示させたい場合、どうすればいいでしょうか? (複数行になっても可)
    ご教示いただけますようお願いいたします。

    #75180

    ohnishi
    参加者

    こんにちは

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

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

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

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

    #75181

    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;
    }
    #75207

    mokusei
    参加者

    ohnishiさま

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

    #75208

    mokusei
    参加者

    yasumaxさま

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

    #75221

    yasumax
    キーマスター

    こんにちは。

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

    #75226

    mokusei
    参加者

    yasumaxさま

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

    #75229

    yasumax
    キーマスター

    こんにちは。

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

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

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

    Attachments:
    You must be logged in to view attached files.
    #75232

    mokusei
    参加者

    yasumaxさま

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

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

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

    Attachments:
    You must be logged in to view attached files.
    #75235

    yasumax
    キーマスター

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

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

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

    #75242

    mokusei
    参加者

    yasumaxさま

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

    #75246

    yasumax
    キーマスター

    こんにちは。

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

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

    #75268

    mokusei
    参加者

    yasumaxさま

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

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

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

13件の投稿を表示中 - 1 - 13件目 (全13件中)

このトピックに返信するにはログインが必要です。