[解決済み] 商品詳細ページのカスタマイズについて

フォーラム 使い方全般 [解決済み] 商品詳細ページのカスタマイズについて

  • このトピックには2件の返信、2人の参加者があり、最後にpipinelaにより11年、 6ヶ月前に更新されました。
3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • 投稿者
    投稿
  • #51816
    pipinela
    参加者

    動作に関するご質問の場合は必ずご記入ください。


    WordPress のバージョン:3.4.1

    Welcart のバージョン:1.1.10

    ご利用のテーマ:twentyten

    症状を確認したブラウザ:Firefox, Internet Explorer

    サーバー(会社名、サービス名):xserver

    SSLの利用: 共用SSL

    WordPress のパーマリンク設定:


    たびたびお世話になります。

    毎回初歩的な質問で申し訳ありません。

    テーマtwentytenでwelcartを使っているのですが、

    商品詳細ページのスタイルのカスタマイズにつまづいております。

    http://organic-tshirts.net/item/original/org-nekoblue/

    ・商品画像の上のタイトル?文字サイズを小さくしたい

    ・商品画像下の商品名~在庫部分を商品画像右側に入れたい

    ・全体を少し左寄りにしたい

    テーマにコピーしたusces_cart.cssで修正するのだと思い、どこをいじればいいのかをGoogleで検索したり、こちらのフォーラムを探したりしても見つけることが出来ないでおります。

    お忙しいところをおそれいりますがご教示願えますでしょうか。

    よろしくお願いいたします。

    #65415
    nanbu
    キーマスター

    こんにちは。

    スタイルを編集するには、まずソースを確認してください。「商品画像の上のタイトル」は<h1 class="item_page_title">となっていますので、h1もしくはitem_page_titleの文字列をusces_cart.cssにあるかを検索します。なければstyle.cssを検索します。

    検索して見つかった場合はそのすライルを変えてみます。ただし、それを編集することで他のところまで影響が出る場合がありますので、他のページも確認しながら編集してください。

    検索して見つからなかった場合は、新たに追加することになります。上記タイトルでしたら、

    .item_page_title {
    font-size: 13px;
    }

    とすれば良いかと思います。

    「商品画像下の商品名~在庫部分」もソースを確認すると、それぞれ<div class="field">で囲まれている事が分かります。

    スタイルの編集は千差万別ですので、ご自分のやりたいことがGoogle検索でヒットすることはまれだと思います。なによりもスタイルを編集するコツを掴んでしまえば、Welcartに限らず役に立つかと思います。

    スタイルの確認にはGoogle Chormeを使うととても便利です。

    #65416
    pipinela
    参加者

    nanbuさま

    ありがとうございます。

    いつも初歩的な質問ですみません。

    おかげさまで解決いたしました。

    Google chorme等のご教示もありがとうございます。

3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • このトピックに返信するにはログインが必要です。