未分類

テンプレート加工覚書

商品画像のサイズ変更

1303行
.p-entry-item__mainimage img {
FONT-WEIGHT: 500;
display: block;
height: auto;
width: 50%; ←元は100%
object-fit: cover;

適切なサイズ

.p-entry-item__mainimage img {FONT-WEIGHT: 100;display: block;height: auto;width: 100%;object-fit: cover;}
.p-entry-item__subimages { flex: 0 0 auto; margin-left: -10px; width: 400px; }
.p-entry-item__subimage { height: 100px; margin-bottom: 0px; width: 100px; }
.p-entry-item__subimage:last-child { margin-bottom: 0; }

トップページスライダーの価格表示
1052行
↓フォントサイズ元は14pix
.p-index-carousel__item-price {font-size: 0px;font-weight: 400;line-height: 2;}

 

商品ページのサブ画像をメインの下に配置

1298行-1347行までを下記に
/* welcart single item */
.p-entry-item__title { font-size: 28px; font-weight: normal; line-height: 2; margin-bottom: 42px; margin-top: -0.5em; }
.p-entry-item__title .p-article__soldout { margin-left: 10px; vertical-align: 6px; }
.p-entry-item__images { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; margin-bottom: 50px; }
.p-entry-item__mainimage { flex: 1 1 auto; }
.p-entry-item__mainimage img { display: block; height: auto; width: 100%; object-fit: cover; }
.p-entry-item__images { display: block; margin-bottom: 24px; }
.p-entry-item__subimages { flex: 0 0 auto; margin-left: 10px; width: 100px; }
.p-entry-item__subimage { height: 100px; margin-bottom: 10px; width: 100px; }
.p-entry-item__subimage:last-child { margin-bottom: 0; }
.p-entry-item__subimages { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin-left: 0; margin-top: 10px; width: auto; }
.p-entry-item__subimage img { cursor: pointer; display: block; height: 100%; width: 100%; object-fit: cover; }
.p-entry-item__subimage { height: auto; margin-bottom: 0; margin-right: 10px; }
.p-entry-item__subimage:last-child { margin-right: 0; }
.p-entry-item__body-cart { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; margin-bottom: 60px; }
.p-entry-item__body-cart .p-entry-item__body { margin-top: 0; width: 100%; }
.p-entry-item__carts { line-height: 2; }
.p-entry-item__cart { background: #f7f7f7; padding: 35px 20% 40px; }
.p-entry-item__cart + .p-entry-item__cart { margin-top: 30px; }
.p-entry-item__cart p { margin-bottom: 14px; }
.p-entry-item__cart .itemGpExp { margin-bottom: 14px; }
.p-entry-item__cart > :last-child { margin-bottom: 0; }
.p-entry-item__cart-skuname { font-size: 115%; }
.p-entry-item__cprice.p-strike{ text-decoration: line-through; }
.p-entry-item__price { line-height: 1; }
.p-entry-item__cart-option input { border: 1px solid #ddd; padding: 8px; }
.p-entry-item__cart-option select { border: 1px solid #ddd; padding: 6px 8px; }
.p-entry-item__cart-quantity input { border: 1px solid #ddd; line-height: 29px; padding: 2px 4px 2px 8px; width: 60px; }
.p-entry-item__cart-button { margin-bottom: 0 !important; margin-top: 20px; position: relative; }
.p-entry-item__cart-button::before { color: #fff; content: “\e93a”; font-family: “design_plus”; font-size: 20px; line-height: 1; margin-left: -58px; margin-top: -0.5em; position: absolute; top: 50%; left: 50%; }
.p-entry-item__cart-button .p-button { padding-left: 35px; width: 100%; }
.p-entry-item__cart-soldout { background: #ccc; color: #fff; margin-bottom: 0 !important; margin-top: 20px; padding: 11px 12px; text-align: center; }
.p-entry-item__cart .p-entry-item__cart-error_message { margin-top: 15px; }
.p-entry-item__cart .p-entry-item__cart-error_message:empty { margin-top: 0; }
.p-entry-item__tabs-container { margin-bottom: 60px; }
.p-entry-item__tabs { border-left: 1px solid #ddd; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin: 0 0 -1px 0 !important; padding: 0; position: relative; }
.p-entry-item__tabs li { background: #f7f7f7; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; border-right: 1px solid #ddd; line-height: 2; margin: 0; padding: 0; min-width: 20%; word-break: break-all; }
.p-entry-item__tabs li label { cursor: pointer; display: block; height: 100%; margin: 0; padding: 10.5px 20px; text-align: center; }
.p-entry-item__tab-content { border: 1px solid #ddd; display: none; margin: 0 !important; padding: 50px; }
.p-entry-item__tab-content > :last-child { margin-bottom: 0; }
.p-entry-item__tabs-container .tab-radio { display: none; }
.p-entry-item__tabs-container .tab-radio–1:checked ~ .p-entry-item__tabs .tab-label–1,
.p-entry-item__tabs-container .tab-radio–2:checked ~ .p-entry-item__tabs .tab-label–2,
.p-entry-item__tabs-container .tab-radio–3:checked ~ .p-entry-item__tabs .tab-label–3,
.p-entry-item__tabs-container .tab-radio–4:checked ~ .p-entry-item__tabs .tab-label–4,
.p-entry-item__tabs-container .tab-radio–5:checked ~ .p-entry-item__tabs .tab-label–5 { background:#fff; border-bottom-color:#fff; }
.p-entry-item__tabs-container .tab-radio–1:checked ~ .p-entry-item__tab-content–1,
.p-entry-item__tabs-container .tab-radio–2:checked ~ .p-entry-item__tab-content–2,
.p-entry-item__tabs-container .tab-radio–3:checked ~ .p-entry-item__tab-content–3,
.p-entry-item__tabs-container .tab-radio–4:checked ~ .p-entry-item__tab-content–4,
.p-entry-item__tabs-container .tab-radio–5:checked ~ .p-entry-item__tab-content–5 { display: block; }
.p-entry-item__spec-table th { background: #f7f7f7; font-weight: normal; width: 25%; }
.p-entry-item__spec-table th > :last-child, .p-entry-item__spec-table td > :last-child { margin-bottom: 0; }
.p-entry-item__related { margin-bottom: 60px; }

.p-entry-item__subimages { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin-left: 0; margin-top: 10px; width: auto; }

元ソース

 

/* welcart single item */
.p-entry-item__title { font-size: 28px; font-weight: normal; line-height: 2; margin-bottom: 42px; margin-top: -0.5em; }
.p-entry-item__title .p-article__soldout { margin-left: 10px; vertical-align: 6px; }
.p-entry-item__images { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; margin-bottom: 50px; }
.p-entry-item__mainimage { flex: 1 1 auto; }
.p-entry-item__mainimage img { display: block; height: auto; width: 100%; object-fit: cover; }
.p-entry-item__subimages { flex: 0 0 auto; margin-left: 10px; width: 100px; }
.p-entry-item__subimage { height: 100px; margin-bottom: 10px; width: 100px; }
.p-entry-item__subimage:last-child { margin-bottom: 0; }
.p-entry-item__subimage img { cursor: pointer; display: block; height: 100%; width: 100%; object-fit: cover; }
.p-entry-item__body-cart { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; margin-bottom: 60px; }
.p-entry-item__body-cart .p-entry-item__body { margin-top: 0; width: 100%; }
.p-entry-item__carts { line-height: 2; }
.p-entry-item__cart { background: #f7f7f7; padding: 35px 20% 40px; }
.p-entry-item__cart + .p-entry-item__cart { margin-top: 30px; }
.p-entry-item__cart p { margin-bottom: 14px; }
.p-entry-item__cart .itemGpExp { margin-bottom: 14px; }
.p-entry-item__cart > :last-child { margin-bottom: 0; }
.p-entry-item__cart-skuname { font-size: 115%; }
.p-entry-item__cprice.p-strike{ text-decoration: line-through; }
.p-entry-item__price { line-height: 1; }
.p-entry-item__cart-option input { border: 1px solid #ddd; padding: 8px; }
.p-entry-item__cart-option select { border: 1px solid #ddd; padding: 6px 8px; }
.p-entry-item__cart-quantity input { border: 1px solid #ddd; line-height: 29px; padding: 2px 4px 2px 8px; width: 60px; }
.p-entry-item__cart-button { margin-bottom: 0 !important; margin-top: 20px; position: relative; }
.p-entry-item__cart-button::before { color: #fff; content: “\e93a”; font-family: “design_plus”; font-size: 20px; line-height: 1; margin-left: -58px; margin-top: -0.5em; position: absolute; top: 50%; left: 50%; }
.p-entry-item__cart-button .p-button { padding-left: 35px; width: 100%; }
.p-entry-item__cart-soldout { background: #ccc; color: #fff; margin-bottom: 0 !important; margin-top: 20px; padding: 11px 12px; text-align: center; }
.p-entry-item__cart .p-entry-item__cart-error_message { margin-top: 15px; }
.p-entry-item__cart .p-entry-item__cart-error_message:empty { margin-top: 0; }
.p-entry-item__tabs-container { margin-bottom: 60px; }
.p-entry-item__tabs { border-left: 1px solid #ddd; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin: 0 0 -1px 0 !important; padding: 0; position: relative; }
.p-entry-item__tabs li { background: #f7f7f7; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; border-right: 1px solid #ddd; line-height: 2; margin: 0; padding: 0; min-width: 20%; word-break: break-all; }
.p-entry-item__tabs li label { cursor: pointer; display: block; height: 100%; margin: 0; padding: 10.5px 20px; text-align: center; }
.p-entry-item__tab-content { border: 1px solid #ddd; display: none; margin: 0 !important; padding: 50px; }
.p-entry-item__tab-content > :last-child { margin-bottom: 0; }
.p-entry-item__tabs-container .tab-radio { display: none; }
.p-entry-item__tabs-container .tab-radio–1:checked ~ .p-entry-item__tabs .tab-label–1,
.p-entry-item__tabs-container .tab-radio–2:checked ~ .p-entry-item__tabs .tab-label–2,
.p-entry-item__tabs-container .tab-radio–3:checked ~ .p-entry-item__tabs .tab-label–3,
.p-entry-item__tabs-container .tab-radio–4:checked ~ .p-entry-item__tabs .tab-label–4,
.p-entry-item__tabs-container .tab-radio–5:checked ~ .p-entry-item__tabs .tab-label–5 { background:#fff; border-bottom-color:#fff; }
.p-entry-item__tabs-container .tab-radio–1:checked ~ .p-entry-item__tab-content–1,
.p-entry-item__tabs-container .tab-radio–2:checked ~ .p-entry-item__tab-content–2,
.p-entry-item__tabs-container .tab-radio–3:checked ~ .p-entry-item__tab-content–3,
.p-entry-item__tabs-container .tab-radio–4:checked ~ .p-entry-item__tab-content–4,
.p-entry-item__tabs-container .tab-radio–5:checked ~ .p-entry-item__tab-content–5 { display: block; }
.p-entry-item__spec-table th { background: #f7f7f7; font-weight: normal; width: 25%; }
.p-entry-item__spec-table th > :last-child, .p-entry-item__spec-table td > :last-child { margin-bottom: 0; }
.p-entry-item__related { margin-bottom: 60px; }

 

 

 

 

 

関連記事一覧

  • コメント ( 0 )

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。