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

zakkyobiru
新規メンバー
10 0 0

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

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

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

スクリーンショット 2020-10-12 5.39.43.pngスクリーンショット 2020-10-12 5.39.54.pngスクリーンショット 2020-10-12 5.40.06.pngスクリーンショット 2020-10-12 5.41.38.pngスクリーンショット 2020-10-12 5.41.53.png

 

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

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

 

.スクリーンショット 2020-10-12 5.44.16.png

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

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

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

スクリーンショット 2020-10-12 5.59.55.pngスクリーンショット 2020-10-12 6.00.50.pngスクリーンショット 2020-10-12 6.01.08.pngスクリーンショット 2020-10-12 6.01.20.pngスクリーンショット 2020-10-12 6.01.31.pngスクリーンショット 2020-10-12 6.01.42.png

 

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

 

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

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

0 件の「いいね!」
junichiokamura
Community Manager
Community Manager
925 208 346

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

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

Technical Partner Manager, Japan
0 件の「いいね!」
zakkyobiru
新規メンバー
10 0 0

@junichiokamura jさん

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

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

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

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

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

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

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

0 件の「いいね!」
zakkyobiru
新規メンバー
10 0 0

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

/*====== 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;
  }
}

 

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

/*====== 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

 

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

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

 

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

スクリーンショット 2020-10-13 15.25.38.pngスクリーンショット 2020-10-13 15.25.12.pngスクリーンショット 2020-10-13 15.24.56.png

 

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

スクリーンショット 2020-10-13 15.27.16.png

 

 

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

0 件の「いいね!」
junichiokamura
Community Manager
Community Manager
925 208 346

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

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

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

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

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

https://shopify.github.io/themekit/

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

 

Technical Partner Manager, Japan
0 件の「いいね!」
zakkyobiru
新規メンバー
10 0 0

@junichiokamura さん

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

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

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

 

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

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

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

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

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

 

 

 

0 件の「いいね!」
zakkyobiru
新規メンバー
10 0 0

@junichiokamura 

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

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

0 件の「いいね!」
junichiokamura
Community Manager
Community Manager
925 208 346

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

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

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

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

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

 

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

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

Technical Partner Manager, Japan
0 件の「いいね!」
zakkyobiru
新規メンバー
10 0 0

@junichiokamura 

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

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

 

修正済みsimple

https://10.gigafile.nu/1021-c271499ccceb96b3ee812a80ef22822de 

元々のsimple

https://10.gigafile.nu/1021-dcab51cd6f6e2e525ce4ec4e495f4816c 

 

Assets / theme.scss.liquid

Layout / theme.liquid

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

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

 

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

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

 

 

0 件の「いいね!」
jizo
先駆者
226 80 249

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

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

スクリーンショット 2020-10-20 11.06.53.png

 

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

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