無料会員登録

アカウントをお持ちですか? ログインする

ログイン

パスワードを忘れた🔐

アカウントを持っていない? 無料会員登録

Forgot Password

Lost your password? Please enter your email address. You will receive a link and will create a new password via email.

アカウントをお持ちですか? ログインする

質問するにはログインが必要です✋

パスワードを忘れた🔐

アカウント作成が必要 無料会員登録
ログイン無料登録

Experting

Experting Logo Experting Logo
検索
質問する✋

Mobile menu

Close
質問する
  • 🏠Home
  • 😀プロフィール
  • 💭コミュニティ
  • ❓質問
  • 🔖投票
  • 🔄タグ
  • 🎉バッジ
  • 😎ユーザー
  • 🔰ヘルプ
Home / 質問 /Q 275
Next
受け付け中
コトミ
コトミ

コトミ

  • 4 質問
  • 1 回答
  • 0 ベストアンサー
  • 38 ポイント
プロフィールを見る
  • 2
コトミビギナー
質問日: 2020年6月 3日2020-06-03T14:52:48+09:00 2020-06-03T14:52:48+09:00カテゴリー: ITサービス

Shopifyで2カラムを作成する方法

  • 2

Shopifyの商品ページを2カラムにする方法で苦戦しています。どのように行えばよろしいでしょうか? ご教授いただきたいです。

shopify
  • 2 2件の回答
  • 496 ビュー
  • 0 フォロワー
  • 0
回答する
シェア
  • Facebook

    2件の回答

    • 評価数
    • 古い順
    • 新しい順
    1. ヤン・アレックス

      ヤン・アレックス

      • WEB開発者
      • 0 質問
      • 1 回答
      • 0 ベストアンサー
      • 224 ポイント
      プロフィールを見る
      ヤン・アレックス プロフェッショナル WEB開発者
      2020-06-03T15:50:07+09:00→ 回答日:2020年6月 3日 (3:50 pm)

      [テーマ]> [テンプレートエディタ]から Style.css.liquid ファイルを開き、以下のコードを貼り付けます

      .one-half-column-left {
      width:48%;
      float:left;
      }
      
      .one-half-column-right {
      width:48%;
      float:right;
      }
      
      @media only screen and (max-width: 600px) {
      .one-half-column-left, .one-half-column-right, 
      .one-third-column, .one-third-column-last {
      float:none;
      width:100%;
      margin-right:0;
      }
      }
      
      そして、2カラムにしたい箇所に、以下なおコードを挿入します。
      
      <div class="one-half-column-left">
      <p>Insert the content for the left column here.</p>
      </div>
      <div class="one-half-column-right">
      <p>Insert the content for the right column here.</p>
      </div>
      <br style="clear:both;" />
      
      これで2カラムになるはずです。
      
      
      
      

       

       

      • 0
      • 返信する
      • シェア
        シェア
        • シェア: Facebook
        • シェア: Twitter
        • シェア: LinkedIn
        • シェア: WhatsApp
    2. hodaka888

      hodaka888

      • WEBデザイナー・実業家・開発者
      • 0 質問
      • 22 回答
      • 1 ベストアンサー
      • 671 ポイント
      プロフィールを見る
      hodaka888 マスター WEBデザイナー・実業家・開発者
      2020-06-03T15:15:31+09:00→ 回答日:2020年6月 3日 (3:15 pm)

      こんにちは。

      以下のファイルに次のコードを追加することで実装できます

      product-template.liquid

       

      通常のテーマでしたら、以下のように設定できます

      <div class="grid"> <div class="grid__item one-half">First column</div> <div class="grid__item one-half">Second column</div> </div>

      もしスマホで1カラムにしたい場合は以下のコードで対応できます。

      <div class="grid"> <div class="grid__item medium-up--one-half">First column</div> <div class="grid__item medium-up--one-half">Second column</div> </div>

       

      • 0
      • 返信する
      • シェア
        シェア
        • シェア: Facebook
        • シェア: Twitter
        • シェア: LinkedIn
        • シェア: WhatsApp
    回答する(無料会員様は自由に回答ができます)

    回答する(無料会員様は自由に回答ができます)
    コメントをキャンセル

    ブラウズ

    Sidebar

    関連する質問

    • 日本向けのShopifyの配送日時指定のアプリはありますでしょうか?

      • 1件の回答
    • Shopifyの事例サイトはどこかにありますでしょうか?

      • 1件の回答
    • Shopifyで無料でサイトマップを作成できるアプリについて

      • 1件の回答
    • Shopifyの無料テーマSimpleとSupplyの違い

      • 1件の回答
    • Shopifyの会員登録の姓名を入れ替える

      • 1件の回答
    質問する

    Explore

    • 🏠Home
    • 😀プロフィール
    • 💭コミュニティ
    • ❓質問
    • 🔖投票
    • 🔄タグ
    • 🎉バッジ
    • 😎ユーザー
    • 🔰ヘルプ

    Footer

    運営:クチコミネット

    © 2020 Experting. All Rights Reserved
    運営: クチコミネット.

    リンクの挿入/編集

    リンク先 URL を入力してください

    または既存のコンテンツにリンク

      検索キーワードが指定されていません。最近の項目を表示しています。 検索もしくは上下矢印キーを使って項目を選択してください。