# コンテンツの重なり(フロートの浮き？)、スライドメニュー、写真の縦横中央寄せについて

**URL:** <https://community.shopify.com/t/topic/22708>\
**Category:** 技術的なQ＆A\
**Created:** [October 11, 2020, 9:08pm UTC](https://community.shopify.com/t/topic/22708 "2020-10-11T21:08:41Z")\
**Posts on this page:** 11\
**Page:** 1

## AI-generated summary

ShopifyのSimpleテーマを大きく改変した結果、主にカートページでヘッダー・フッターと内容が重なる不具合が発生し、あわせてコレクション画像の縦横中央寄せ、モバイル用の左スライドメニュー化、モバイル右上アイコンの折り返しも相談された。画像添付とコード断片があり、特にCSS/SCSSとheader・cart関連テンプレートの変更が中心だった。

回答側は、修正点を1つずつ切り分けて確認すること、現在のテーマをバックアップした上で新しいSimpleを入れて比較すること、Theme KitやVS Codeでローカル編集することを提案。商品データはテーマ入れ替えでは消えない点も説明された。

その後、開発者ツールでの確認から、`.supports-js .cart-table { position: absolute; top: 0; }` が重なりの原因候補として示され、この指定を削除・コメントアウトすれば改善する可能性があると指摘された。

最終的に投稿者は自力対応を断念し、外部へ修正依頼する方針を決定。カートの重なりには有力な手がかりが出た一方、画像中央寄せやスライドメニュー等は未解決のまま終了した。

<div class="post-metadata">

**Author:** ![zakkyobiru](https://avatars.discourse-cdn.com/v4/letter/z/bbce88/32.png) [@zakkyobiru](https://community.shopify.com/u/zakkyobiru)\
**Post date:** [October 11, 2020, 9:08pm UTC](https://community.shopify.com/t/topic/22708/1 "2020-10-11T21:08:41Z")

</div>

コード編集初心者です。ネットで調べながらやる程度の知識しかありませんが良ければ力を貸してください。

カートページのみヘッダーとフッターにコンテンツが重なってしまいます。[https://zakkyobiru.myshopify.com/cart](https://zakkyobiru.myshopify.com/cart)

Theme.scss.liquidに問題があると思うので添付します。

 ![スクリーンショット 2020-10-12 5.39.43.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/1/a/1a8445a0f3b013e77ebdb5ded151222b06258d3e.jpeg)

 ![スクリーンショット 2020-10-12 5.39.54.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/2/e/4/2e4fb68261e177d5f11b4bc40fd2863581311acf.jpeg)

 ![スクリーンショット 2020-10-12 5.40.06.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/2/3/2356730031d45dc8a36cf15ec790e3551b28021c.png)

 ![スクリーンショット 2020-10-12 5.41.38.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/4/3/430311f15efdbaf438ec92e59ab9179985ac1847.jpeg)

 ![スクリーンショット 2020-10-12 5.41.53.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/d/6/9/d698e609e5fb9838bf0e3de3e02ec6b17138d0db.png)

また、コレクションページの写真が現在上部に合わせて並んでいますが、写真を縦横中央寄せにしたいです。

_vertical_-_align_: _middle_; & display: table-cell; なども試してみたのですがどうしてもできません。

.

 ![スクリーンショット 2020-10-12 5.44.16.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/2/b/2bbf74395babad561402f9bbeb1c1d0ac22624df.png)

最後に、モバイルページのみ、左からメニューがスライドするようにしたいです。

PCは問題ないのですが、今のままだとメニューのドロップダウンが長すぎて見にくいように感じます。

スライドメニューができるのであれば、左上の検索アイコンがある場所に、メニューアイコン(三本横ライン)を配置したいです。

 ![スクリーンショット 2020-10-12 5.59.55.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/d/6/d66318a67c698912abb60d2b58c0f9608bf2a9cb.png)

 ![スクリーンショット 2020-10-12 6.00.50.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/7/0/70ec92c8f790dacbd9526bce65963cc5a2db9387.png)

 ![スクリーンショット 2020-10-12 6.01.08.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/a/c/accdea51d8f1b45c7b30a7ce81f29d5a92408763.png)

 ![スクリーンショット 2020-10-12 6.01.20.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/4/c/4c2c24f5f3767b0999592e1423bf8e992528f2d0.png)

 ![スクリーンショット 2020-10-12 6.01.31.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/5/e/5e96a64738ae28349edd4669ad48eb9a1de0f9c1.png)

 ![スクリーンショット 2020-10-12 6.01.42.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/c/2/c2a07f9e51458d89c865736bbee3f086a6a08315.png)

それとモバイルページの右上アイコンが、段落ち？カラム落ち？してしまってカートの文字が下段に来てしまうのは直せないのでしょうか、、

たくさんの質問ばかりで申し訳ありませんがどれか分かる部分だけでも教えて頂けると大変助かります。

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

---

<div class="post-metadata">

**Author:** ![junichiokamura](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/junichiokamura/32/299737_2.png) [@junichiokamura](https://community.shopify.com/u/junichiokamura)\
**Post date:** [October 12, 2020, 7:29pm UTC](https://community.shopify.com/t/topic/22708/2 "2020-10-12T19:29:25Z")

</div>

元のテーマとだいぶんかけ離れているように見えますので、もし可能であれば、問題点（修正点）を1つずつ動作確認された方がいいと思います。

それと、画像ではなくてテキストとして、元のテーマ名共に共有いただいた方がいいいと思います。

---

<div class="post-metadata">

**Author:** ![zakkyobiru](https://avatars.discourse-cdn.com/v4/letter/z/bbce88/32.png) [@zakkyobiru](https://community.shopify.com/u/zakkyobiru)\
**Post date:** [October 13, 2020, 5:25am UTC](https://community.shopify.com/t/topic/22708/3 "2020-10-13T05:25:21Z")

</div>

@junichiokamura jさん

ご連絡ありがとうございます。

すみません、初めての投稿で、確かにテキストの方が良さそうですね、ご指摘ありがとうございます。

特に今直したいのがカートページのオーバーラップ？なのですが、

こちらsimpleテーマで、今ほかのアカウントを作りsimpleの元々のレイアウトと比べたのですが、theme.css.liquidのCart page styleに関しては、元々の物と見比べてもほぼ変わらず、コピペしても変わらず、、

また、templatesのcart.liquidも同じようにしたのですが、変わりません。

大変申し訳ないのですが、他に可能性があるとしたらどの部分か想定出来ますでしょうか？もう何が何だか分からなくなってしまっており、少しでもお力添えして頂けますと嬉しいです。

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

---

<div class="post-metadata">

**Author:** ![zakkyobiru](https://avatars.discourse-cdn.com/v4/letter/z/bbce88/32.png) [@zakkyobiru](https://community.shopify.com/u/zakkyobiru)\
**Post date:** [October 13, 2020, 6:31am UTC](https://community.shopify.com/t/topic/22708/4 "2020-10-13T06:31:50Z")

</div>

Simpleテーマでの現在のコード

```css
/*====== Cart page styles ======*/
.cart-table {
  width: 100%;
  margin-bottom: $gutter;
  
   th:first-child {
    padding-left: 0;
  }

  @include media-query($medium-down) {
    thead {
      display: none;
    }

    tr {
      display: block;
    }
    
    
    th,
    td {
      display: block;
      text-align: right;
      padding: $gutter / 2;
      margin: 0;

    td::before {
      content: attr(data-label);
      float: left;
      text-align: center;
      padding-right: 10px;
    }

    .responsive-table __row + .responsive-table__ row,
    tfoot > .responsive-table__row:first-child {
      position: relative;
      margin-top: 10px;
      padding-top: $gutter / 2;

      &::after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: $gutter / 2;
        right: $gutter / 2;
        border-bottom: 1px solid $color-border;
      }
    }
  } 
    
    
  .cart__table-cell--image {
    padding-left: 25%;
    padding-right: 25%;

    @include media-query($medium-up) {
      padding-left: 35%;
      padding-right: 35%;
    }

    @include media-query($large-up) {
      padding-left: 0;
      padding-right: 0;
      width: 15%;
    }
  }
}

.cart__image-wrapper {
  margin: 0 auto;
}

.cart__image-container {
  display: block;
  position: relative;
}

.cart__image {
  display: block;
  width: 100%;

  .supports-js & {
    position: absolute;
    top: 0;
  }
  

  &.lazyload {
    opacity: 0;
  }
}

.cart__note {
  margin-bottom: 50px;

  @include media-query($medium-up) {
    margin-bottom: $gutter;
  }
}

.cart__remove {
  color: $color-body-text;
}

.cart__policies {
  margin-bottom: 50px;
}

.update-cart {
  margin-right: 4px;
}

@include media-query($large-up) {

  .cart__table-cell--meta {
    padding-left: $gutter / 2;
    padding-right: $gutter / 2;
    padding-top: 0;
    padding-bottom: 0;
    width: 30%;
  }

  .cart__table-cell--price,
  .cart__table-cell--line-price,
  .cart__table-cell--quantity {
    width: auto;
    padding: 0;

    span {
      white-space: nowrap;
    }
  }

  .cart__table-cell--price {
    width: 25%;
  }
}

.cart--empty-message {
  .cart--no-cookies & {
    display: none;
  }
}

.cart--continue-message {
  .cart--no-cookies & {
    display: none;
  }
}

.cart--cookie-message {
  display: none;
  padding-bottom: 25px;

  .cart--no-cookies & {
    display: block;
  }
}

.article .list--inline {
  margin-bottom: $gutter / 2;
}

.comments {
  padding-left: 0;
  margin-left: 0;
}

.article__image-wrapper {
  display: block;
  position: relative;
}

.article__image {
  display: block;
  margin-bottom: $gutter / 2;
  width: 100%;

  .supports-js & {
    position: absolute;
    top: 0;
  }

  &.lazyload {
    opacity: 0;
  }
}

```

新しいアカウントを作って、元々のコードと見比べました。

```css
/*====== Cart page styles ======*/

.cart-table {
  width: 100%;
  margin-bottom: $gutter;

  th:first-child {
    padding-left: 0;
  }

  @include media-query($medium-down) {
    thead {
      display: none;
    }

    tr {
      display: block;
    }

    th,
    td {
      display: block;
      text-align: right;
      padding: $gutter / 2;
      margin: 0;
    }

    td::before {
      content: attr(data-label);
      float: left;
      text-align: center;
      padding-right: 10px;
    }

    .responsive-table __row + .responsive-table__ row,
    tfoot > .responsive-table__row:first-child {
      position: relative;
      margin-top: 10px;
      padding-top: $gutter / 2;

      &::after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: $gutter / 2;
        right: $gutter / 2;
        border-bottom: 1px solid $color-border;
      }
    }
  }

  .cart__table-cell--image {
    padding-left: 25%;
    padding-right: 25%;

    @include media-query($medium-up) {
      padding-left: 35%;
      padding-right: 35%;
    }

    @include media-query($large-up) {
      padding-left: 0;
      padding-right: 0;
      width: 15%;
    }
  }
}

.cart__image-wrapper {
  margin: 0 auto;
}

.cart__image-container {
  display: block;
  position: relative;
}

.cart__image {
  display: block;
  width: 100%;

  .supports-js & {
    position: absolute;
    top: 0;
  }

  &.lazyload {
    opacity: 0;
  }
}

.cart__note {
  margin-bottom: 50px;

  @include media-query($medium-up) {
    margin-bottom: $gutter;
  }
}

.cart__remove {
  color: $color-body-text;
}

.cart__policies {
  margin-bottom: 50px;
}

.update-cart {
  margin-right: 4px;
}

@include media-query($large-up) {

  .cart__table-cell--meta {
    padding-left: $gutter / 2;
    padding-right: $gutter / 2;
    padding-top: 0;
    padding-bottom: 0;
    width: 30%;
  }

  .cart__table-cell--price,
  .cart__table-cell--line-price,
  .cart__table-cell--quantity {
    width: auto;
    padding: 0;

    span {
      white-space: nowrap;
    }
  }

  .cart__table-cell--price {
    width: 25%;
  }
}

.cart--empty-message {
  .cart--no-cookies & {
    display: none;
  }
}

.cart--continue-message {
  .cart--no-cookies & {
    display: none;
  }
}

.cart--cookie-message {
  display: none;
  padding-bottom: 25px;

  .cart--no-cookies & {
    display: block;
  }
}

.article .list--inline {
  margin-bottom: $gutter / 2;
}

.comments {
  padding-left: 0;
  margin-left: 0;
}

.article__image-wrapper {
  display: block;
  position: relative;
}

.article__image {
  display: block;
  margin-bottom: $gutter / 2;
  width: 100%;

  .supports-js & {
    position: absolute;
    top: 0;
  }

  &.lazyload {
    opacity: 0;
  }
}

```

こちらはsimpleのオリジナルデザインで、このように作動してます

 ![スクリーンショット 2020-10-13 15.30.37.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/2/6/2670ec273c8438d66f2efddacf255939859c7acf.jpeg)

そして申し訳ありません、よく見ると

```css
th,
    td {
      display: block;
      text-align: right;
      padding: $gutter / 2;
      margin: 0;
    }

```

こちらの最後の } が抜けていることに気付き、私のホームページの方に挿入したところ、カートページの元々のレイアウトは戻ったようですが、ホームページ全体のレイアウトが崩れました。

 ![スクリーンショット 2020-10-13 15.25.38.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/a/d/ad7b33d23fbe6a085ce287f4f4ee56775aefe7a7.png)

 ![スクリーンショット 2020-10-13 15.25.12.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/3/b/3bf05128591339937f52847643bb9e992cd9f409.png)

 ![スクリーンショット 2020-10-13 15.24.56.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/8/7/876d20226e4063b388a943d0b7fa40a43d2a7ff5.jpeg)

しかし、 } を抜くと、ホームページは崩れませんが、カートページのレイアウトが崩れます。

 ![スクリーンショット 2020-10-13 15.27.16.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/7/a/7adae8aa0f7eaa6848380a6ee17cf989cd54609d.jpeg)

もし原因が分かる方がいらっしゃればよろしくお願いいたします、、

---

<div class="post-metadata">

**Author:** ![junichiokamura](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/junichiokamura/32/299737_2.png) [@junichiokamura](https://community.shopify.com/u/junichiokamura)\
**Post date:** [October 13, 2020, 6:38am UTC](https://community.shopify.com/t/topic/22708/5 "2020-10-13T06:38:40Z")

</div>

複合的に修正が影響してそうなので、scssファイルのみ戻しても戻らないと思います。

まず、現在のテーマをrenameしてバックアップを取った上で、もういちどまっさらのSimpleを入れてみてはどうでしょうか？

その上で、バックアップしたテーマをダウンロードして、そのzipをこの投稿にアップロードしてもらえれば、私や他の人が自分のストアにアップロードして使えるので、そこで解決策が見つかるかもしれません。

(Shopifyはデータなどはテーマと独立してストアの方で管理されるので、ご自身のストアの情報は入りません）

テーマを深くいじる場合は、オンラインのエディタ上で直接ではなくて、下記のTheme kitなどを使ってローカルで編集することをお勧めします（ローカルでいじると、ディレクトリ検索などができてCSSやJSの関連性がおいやすくなります）。

[https://shopify.github.io/themekit/](https://shopify.github.io/themekit/)

Visual Studio Code などには、liquid プラグインがあるので、簡単な構文チェックなどもついてきます。

---

<div class="post-metadata">

**Author:** ![zakkyobiru](https://avatars.discourse-cdn.com/v4/letter/z/bbce88/32.png) [@zakkyobiru](https://community.shopify.com/u/zakkyobiru)\
**Post date:** [October 13, 2020, 10:19am UTC](https://community.shopify.com/t/topic/22708/6 "2020-10-13T10:19:39Z")

</div>

@junichiokamura さん

そうでしたか、、分からないまま素人が色々といじってしまってはダメですね、、

またTheme Kitというものもお恥ずかしながら知りませんでした。

たくさん教えていただいてありがとうございます。

Simpleをちがう名前(例えばSimple zakkyoなど)に変更して テーマファイルをダウロードする ボタンを押すということですよね。

それはそのまますぐにこちらにアップロードすることは出来ないものでしょうか？

一度まっさらにしてから、というのが少々怖いのですが、それは今あげている商品などはまたバックアップデータを入れ直した際に追加し直さなければならないということでしょうか？

もしよろしければ教えて頂けると嬉しいです。

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

---

<div class="post-metadata">

**Author:** ![zakkyobiru](https://avatars.discourse-cdn.com/v4/letter/z/bbce88/32.png) [@zakkyobiru](https://community.shopify.com/u/zakkyobiru)\
**Post date:** [October 13, 2020, 10:23am UTC](https://community.shopify.com/t/topic/22708/7 "2020-10-13T10:23:06Z")

</div>

@junichiokamura

度々すみません、私は今見比べるためにもう一つのアカウントを作ったので、そちらにある元々のsimpleデータもダウンロードする、というのでは解決出来ませんか？

解釈が間違っていたら申し訳ありません、、

---

<div class="post-metadata">

**Author:** ![junichiokamura](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/junichiokamura/32/299737_2.png) [@junichiokamura](https://community.shopify.com/u/junichiokamura)\
**Post date:** [October 14, 2020, 1:29am UTC](https://community.shopify.com/t/topic/22708/8 "2020-10-14T01:29:30Z")

</div>

> Simpleをちがう名前(例えばSimple zakkyoなど)に変更して テーマファイルをダウロードする ボタンを押すということですよね。

> それはそのまますぐにこちらにアップロードすることは出来ないものでしょうか？

ダウンロードするとzipになるので、それをそのまま下の添付メニューからあげれるはずです。

> 一度まっさらにしてから、というのが少々怖いのですが、それは今あげている商品などはまたバックアップデータを入れ直した際に追加し直さなければならないということでしょうか？

まっさらになるのはテーマ自体だけで、商品などのデータ全てはShopify本体に保存されていて影響を受けないのでご安心ください。

> 度々すみません、私は今見比べるためにもう一つのアカウントを作ったので、そちらにある元々のsimpleデータもダウンロードする、というのでは解決出来ませんか？

元々のSimple、つまりまっさらのものはこちらでも手に入るので大丈夫です。ほしいのは、今たくさん修正されているSimpleのコードです。

---

<div class="post-metadata">

**Author:** ![zakkyobiru](https://avatars.discourse-cdn.com/v4/letter/z/bbce88/32.png) [@zakkyobiru](https://community.shopify.com/u/zakkyobiru)\
**Post date:** [October 14, 2020, 9:28am UTC](https://community.shopify.com/t/topic/22708/9 "2020-10-14T09:28:21Z")

</div>

@junichiokamura

ご連絡ありがとうございます。

添付ができなかった為、こちらにアップロードしたのですが確認できますでしょうか？

修正済みsimple

[https://10.gigafile.nu/1021-c271499ccceb96b3ee812a80ef22822de](https://10.gigafile.nu/1021-c271499ccceb96b3ee812a80ef22822de)

元々のsimple

[https://10.gigafile.nu/1021-dcab51cd6f6e2e525ce4ec4e495f4816c](https://10.gigafile.nu/1021-dcab51cd6f6e2e525ce4ec4e495f4816c)

Assets / theme.scss.liquid

Layout / theme.liquid

あたりかなとは思うのですが、あとはcollection、product関係、Section / header.liquidも修正しました。

Template / cart.liquidは元のoriginalに戻せているはずです。

もしよければ見て頂けると嬉しいです。

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

---

<div class="post-metadata">

**Author:** ![Jizo\_Inagaki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/jizo_inagaki/32/149480_2.png) [@Jizo\_Inagaki](https://community.shopify.com/u/Jizo_Inagaki)\
**Post date:** [October 20, 2020, 2:22am UTC](https://community.shopify.com/t/topic/22708/10 "2020-10-20T02:22:33Z")

</div>

ストアのソースを開発者ツールで表示させて調べただけなので正解かはわかりませんが、添付画像のように以下の指定を消せば上に移動したパーツを元に戻せるとは思います。

```css
.supports-js .cart-table {
    /* 下記の指定をコメントアウトか削除 */
    position: absolute;
    top: 0;
    /* ここまで */
}

```

 ![スクリーンショット 2020-10-20 11.06.53.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/9/7/97729ee970d7bc7c668caec401666555a3d8add0.jpeg)

ただしこの指定はSimpleのオリジナルにはない模様で(デモストアによる確認: [https://themes.shopify.com/themes/simple/styles/light/preview](https://themes.shopify.com/themes/simple/styles/light/preview))、なぜここに書かれているのか不明であり削除による影響までは確認していません。

そのため影響を確認しながら対応を検討いただければと思います。

---

<div class="post-metadata">

**Author:** ![zakkyobiru](https://avatars.discourse-cdn.com/v4/letter/z/bbce88/32.png) [@zakkyobiru](https://community.shopify.com/u/zakkyobiru)\
**Post date:** [October 23, 2020, 9:34pm UTC](https://community.shopify.com/t/topic/22708/11 "2020-10-23T21:34:14Z")

</div>

@Jizo_Inagaki 様

連絡が大変遅くなってしまい申し訳ございません。

そして開発者ツールなるものでお調べ頂き誠にありがとうございます！

ですが私の力不足で上手くいかず、、皆様のお力をお借りしても私自身のスキルが圧倒的に足りない為、今回は外部の方に修正依頼することを決意いたしました。

折角考えて下さったのに申し訳ありません。

こちらに投稿したことで勉強になることが沢山あり、きちんと勉強してみたいと思えました。

改めて新しい失敗で質問することになってしまう気がしますが、その際はまたお力添え頂ければ嬉しいです。

それまでに私自身ももう少し力をつけておく努力をしておきます。

閲覧して下さってどうもありがとうございました！