カルーセルの右端のカードが欠けて表示される - スキンの不具合 https://wp-cocoon.com/community/skin-bugs/%e3%82%ab%e3%83%ab%e3%83%bc%e3%82%bb%e3%83%ab%e3%81%ae%e5%8f%b3%e7%ab%af%e3%81%ae%e3%82%ab%e3%83%bc%e3%83%89%e3%81%8c%e6%ac%a0%e3%81%91%e3%81%a6%e8%a1%a8%e7%a4%ba%e3%81%95%e3%82%8c%e3%82%8b/ Cocoon ディスカッション掲示板 ja Mon, 15 Jun 2026 07:42:42 +0000 wpForo 60 RE: カルーセルの右端のカードが欠けて表示される https://wp-cocoon.com/community/skin-bugs/%e3%82%ab%e3%83%ab%e3%83%bc%e3%82%bb%e3%83%ab%e3%81%ae%e5%8f%b3%e7%ab%af%e3%81%ae%e3%82%ab%e3%83%bc%e3%83%89%e3%81%8c%e6%ac%a0%e3%81%91%e3%81%a6%e8%a1%a8%e7%a4%ba%e3%81%95%e3%82%8c%e3%82%8b/#post-70315 Wed, 03 May 2023 10:04:27 +0000 ご確認いただきありがとうございます。

]]> スキンの不具合 わいひら https://wp-cocoon.com/community/skin-bugs/%e3%82%ab%e3%83%ab%e3%83%bc%e3%82%bb%e3%83%ab%e3%81%ae%e5%8f%b3%e7%ab%af%e3%81%ae%e3%82%ab%e3%83%bc%e3%83%89%e3%81%8c%e6%ac%a0%e3%81%91%e3%81%a6%e8%a1%a8%e7%a4%ba%e3%81%95%e3%82%8c%e3%82%8b/#post-70315 RE: カルーセルの右端のカードが欠けて表示される https://wp-cocoon.com/community/skin-bugs/%e3%82%ab%e3%83%ab%e3%83%bc%e3%82%bb%e3%83%ab%e3%81%ae%e5%8f%b3%e7%ab%af%e3%81%ae%e3%82%ab%e3%83%bc%e3%83%89%e3%81%8c%e6%ac%a0%e3%81%91%e3%81%a6%e8%a1%a8%e7%a4%ba%e3%81%95%e3%82%8c%e3%82%8b/#post-70304 Tue, 02 May 2023 13:02:05 +0000 すみません、言葉足らずでした。
削除ではなく以下を含め、.carousel .a-wrap:hoverだけ別の一括りに。

https://github.com/xserver-inc/cocoon/blob/20fe4c2ecf204b2c620f1e81d1eb61905a219fd0/skins/silk/style.css#L98-L100
----------------------------------------------
テーマ名：Cocoon
バージョン：2.5.9.2
カテゴリー数：19
タグ数：147
ユーザー数：1
----------------------------------------------

修正を確認しました。
本件をクローズとします。

]]> スキンの不具合 大門未知子 https://wp-cocoon.com/community/skin-bugs/%e3%82%ab%e3%83%ab%e3%83%bc%e3%82%bb%e3%83%ab%e3%81%ae%e5%8f%b3%e7%ab%af%e3%81%ae%e3%82%ab%e3%83%bc%e3%83%89%e3%81%8c%e6%ac%a0%e3%81%91%e3%81%a6%e8%a1%a8%e7%a4%ba%e3%81%95%e3%82%8c%e3%82%8b/#post-70304 RE: カルーセルの右端のカードが欠けて表示される https://wp-cocoon.com/community/skin-bugs/%e3%82%ab%e3%83%ab%e3%83%bc%e3%82%bb%e3%83%ab%e3%81%ae%e5%8f%b3%e7%ab%af%e3%81%ae%e3%82%ab%e3%83%bc%e3%83%89%e3%81%8c%e6%ac%a0%e3%81%91%e3%81%a6%e8%a1%a8%e7%a4%ba%e3%81%95%e3%82%8c%e3%82%8b/#post-70302 Tue, 02 May 2023 11:22:23 +0000 結局影ははみ出さないようにするにはそうするしかないですよね。
box-shadowの修正を追記しておきました。
https://github.com/xserver-inc/cocoon/commit/6bfdb440849943e4a158257f307842f8be8bcdca

ただ以下を削除してしまうとカード移動がなくなってしまってちょっと違和感があるのでカード移動は残しました。

以下を削除。
https://github.com/xserver-inc/cocoon/blob/20fe4c2ecf204b2c620f1e81d1eb61905a219fd0/skins/silk/style.css#L64

 

]]> スキンの不具合 わいひら https://wp-cocoon.com/community/skin-bugs/%e3%82%ab%e3%83%ab%e3%83%bc%e3%82%bb%e3%83%ab%e3%81%ae%e5%8f%b3%e7%ab%af%e3%81%ae%e3%82%ab%e3%83%bc%e3%83%89%e3%81%8c%e6%ac%a0%e3%81%91%e3%81%a6%e8%a1%a8%e7%a4%ba%e3%81%95%e3%82%8c%e3%82%8b/#post-70302 RE: カルーセルの右端のカードが欠けて表示される https://wp-cocoon.com/community/skin-bugs/%e3%82%ab%e3%83%ab%e3%83%bc%e3%82%bb%e3%83%ab%e3%81%ae%e5%8f%b3%e7%ab%af%e3%81%ae%e3%82%ab%e3%83%bc%e3%83%89%e3%81%8c%e6%ac%a0%e3%81%91%e3%81%a6%e8%a1%a8%e7%a4%ba%e3%81%95%e3%82%8c%e3%82%8b/#post-70300 Mon, 01 May 2023 14:51:50 +0000 以下は、あくまで一例で、変更の必要はありません。
何がベストか分かりません。

●ご参考
スキン「SILK」ですが、カルーセルカードhover時の影を小さくする。

以下を削除。
https://github.com/xserver-inc/cocoon/blob/20fe4c2ecf204b2c620f1e81d1eb61905a219fd0/skins/silk/style.css#L64

以下を追加。

.carousel .a-wrap:hover {
box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2);
}
]]> スキンの不具合 大門未知子 https://wp-cocoon.com/community/skin-bugs/%e3%82%ab%e3%83%ab%e3%83%bc%e3%82%bb%e3%83%ab%e3%81%ae%e5%8f%b3%e7%ab%af%e3%81%ae%e3%82%ab%e3%83%bc%e3%83%89%e3%81%8c%e6%ac%a0%e3%81%91%e3%81%a6%e8%a1%a8%e7%a4%ba%e3%81%95%e3%82%8c%e3%82%8b/#post-70300 RE: カルーセルの右端のカードが欠けて表示される https://wp-cocoon.com/community/skin-bugs/%e3%82%ab%e3%83%ab%e3%83%bc%e3%82%bb%e3%83%ab%e3%81%ae%e5%8f%b3%e7%ab%af%e3%81%ae%e3%82%ab%e3%83%bc%e3%83%89%e3%81%8c%e6%ac%a0%e3%81%91%e3%81%a6%e8%a1%a8%e7%a4%ba%e3%81%95%e3%82%8c%e3%82%8b/#post-70298 Mon, 01 May 2023 14:27:22 +0000

見た目が変わってしまうのと見た目が悪いので、この仕様変更したとしたら受け入れられなさそうですよね


試して、見た瞬間、却下でした笑

 

]]> スキンの不具合 大門未知子 https://wp-cocoon.com/community/skin-bugs/%e3%82%ab%e3%83%ab%e3%83%bc%e3%82%bb%e3%83%ab%e3%81%ae%e5%8f%b3%e7%ab%af%e3%81%ae%e3%82%ab%e3%83%bc%e3%83%89%e3%81%8c%e6%ac%a0%e3%81%91%e3%81%a6%e8%a1%a8%e7%a4%ba%e3%81%95%e3%82%8c%e3%82%8b/#post-70298 RE: カルーセルの右端のカードが欠けて表示される https://wp-cocoon.com/community/skin-bugs/%e3%82%ab%e3%83%ab%e3%83%bc%e3%82%bb%e3%83%ab%e3%81%ae%e5%8f%b3%e7%ab%af%e3%81%ae%e3%82%ab%e3%83%bc%e3%83%89%e3%81%8c%e6%ac%a0%e3%81%91%e3%81%a6%e8%a1%a8%e7%a4%ba%e3%81%95%e3%82%8c%e3%82%8b/#post-70297 Mon, 01 May 2023 14:21:34 +0000 ご確認ありがとうございます。

slickのパラメータで中央表示だと左右が欠けてても気にならず。
ただ、見栄えが悪く。

僕もそれはslickの公式サイトで見たので考えました。
かなり見た目が変わってしまうのと見た目が悪いので、この仕様変更押したとしたら受け入れられなさそうですよね…。

]]> スキンの不具合 わいひら https://wp-cocoon.com/community/skin-bugs/%e3%82%ab%e3%83%ab%e3%83%bc%e3%82%bb%e3%83%ab%e3%81%ae%e5%8f%b3%e7%ab%af%e3%81%ae%e3%82%ab%e3%83%bc%e3%83%89%e3%81%8c%e6%ac%a0%e3%81%91%e3%81%a6%e8%a1%a8%e7%a4%ba%e3%81%95%e3%82%8c%e3%82%8b/#post-70297 RE: カルーセルの右端のカードが欠けて表示される https://wp-cocoon.com/community/skin-bugs/%e3%82%ab%e3%83%ab%e3%83%bc%e3%82%bb%e3%83%ab%e3%81%ae%e5%8f%b3%e7%ab%af%e3%81%ae%e3%82%ab%e3%83%bc%e3%83%89%e3%81%8c%e6%ac%a0%e3%81%91%e3%81%a6%e8%a1%a8%e7%a4%ba%e3%81%95%e3%82%8c%e3%82%8b/#post-70296 Mon, 01 May 2023 14:17:26 +0000 ●確認結果

お疲れ様です。
----------------------------------------------
テーマ名：Cocoon
バージョン：2.5.9
カテゴリー数：19
タグ数：147
ユーザー数：1
----------------------------------------------
スキン「イノセンス」のカード右端が欠けない事を確認しました。
この為、本件は一旦クローズしようと思います。

●カードのデザインについて

影付きのデザインについては注意が必要ですね。
スキン「SILK」のbox-shadowのボケ幅などを小さくするのが望ましいかと思います。

●slickについて

昨日、色々考え。
slickのパラメータで中央表示だと左右が欠けてても気にならず。
ただ、見栄えが悪く。

JSで動的にresizeで監視。
carousel-entry-card-wrap幅を取得、カード幅×カード表示数=slick-listの幅

と変更するようにしてみましたがうまくいかず。

私も少し考えてみます。

]]> スキンの不具合 大門未知子 https://wp-cocoon.com/community/skin-bugs/%e3%82%ab%e3%83%ab%e3%83%bc%e3%82%bb%e3%83%ab%e3%81%ae%e5%8f%b3%e7%ab%af%e3%81%ae%e3%82%ab%e3%83%bc%e3%83%89%e3%81%8c%e6%ac%a0%e3%81%91%e3%81%a6%e8%a1%a8%e7%a4%ba%e3%81%95%e3%82%8c%e3%82%8b/#post-70296 RE: カルーセルの右端のカードが欠けて表示される https://wp-cocoon.com/community/skin-bugs/%e3%82%ab%e3%83%ab%e3%83%bc%e3%82%bb%e3%83%ab%e3%81%ae%e5%8f%b3%e7%ab%af%e3%81%ae%e3%82%ab%e3%83%bc%e3%83%89%e3%81%8c%e6%ac%a0%e3%81%91%e3%81%a6%e8%a1%a8%e7%a4%ba%e3%81%95%e3%82%8c%e3%82%8b/#post-70294 Mon, 01 May 2023 14:03:14 +0000 このようにするとボーダーや影が見切れる不具合は完全解決できそうだけど、矢印を押して行った時にちらつきが出てしまってダメでした。
https://github.com/xserver-inc/cocoon/commit/4ba508bb826a778880c1401dc0e39c1436acc3ee#diff-b78be019f1dc6d57753ea900c3805b114cd53ab7c0db836cc081836df1b99b7aR9571-R9576

]]> スキンの不具合 わいひら https://wp-cocoon.com/community/skin-bugs/%e3%82%ab%e3%83%ab%e3%83%bc%e3%82%bb%e3%83%ab%e3%81%ae%e5%8f%b3%e7%ab%af%e3%81%ae%e3%82%ab%e3%83%bc%e3%83%89%e3%81%8c%e6%ac%a0%e3%81%91%e3%81%a6%e8%a1%a8%e7%a4%ba%e3%81%95%e3%82%8c%e3%82%8b/#post-70294 RE: カルーセルの右端のカードが欠けて表示される https://wp-cocoon.com/community/skin-bugs/%e3%82%ab%e3%83%ab%e3%83%bc%e3%82%bb%e3%83%ab%e3%81%ae%e5%8f%b3%e7%ab%af%e3%81%ae%e3%82%ab%e3%83%bc%e3%83%89%e3%81%8c%e6%ac%a0%e3%81%91%e3%81%a6%e8%a1%a8%e7%a4%ba%e3%81%95%e3%82%8c%e3%82%8b/#post-70293 Mon, 01 May 2023 13:59:37 +0000 スタイルの調整をしました。
https://github.com/xserver-inc/cocoon/commit/8fad8195ad55a94c731c1dc7a15cb05003b2a7f1


スキン「SILK」ですがhoverの時、box-shadowで影を付けており。
このボケが大きい為、marginか、box-shadowか、いずれかを調整しないと、影が欠けて見えます。



これに完全に対応しようとすると影の幅を検出して調整するコードが必要かもしれません。
「SILK」にスタイル調整で対応できたとしても、それを超えるスキンがあった場合、今度はその影の幅に合わせて対応しないと同様にお金がかけることになります。
ただいずれにせよ.slick-listに左右の余白をうまく設定する方法を見つけないとだめかも。
今日ちょっと試した感じでは分かりませんでした。もうちょっと試行錯誤してみます。

 

]]> スキンの不具合 わいひら https://wp-cocoon.com/community/skin-bugs/%e3%82%ab%e3%83%ab%e3%83%bc%e3%82%bb%e3%83%ab%e3%81%ae%e5%8f%b3%e7%ab%af%e3%81%ae%e3%82%ab%e3%83%bc%e3%83%89%e3%81%8c%e6%ac%a0%e3%81%91%e3%81%a6%e8%a1%a8%e7%a4%ba%e3%81%95%e3%82%8c%e3%82%8b/#post-70293 RE: カルーセルの右端のカードが欠けて表示される https://wp-cocoon.com/community/skin-bugs/%e3%82%ab%e3%83%ab%e3%83%bc%e3%82%bb%e3%83%ab%e3%81%ae%e5%8f%b3%e7%ab%af%e3%81%ae%e3%82%ab%e3%83%bc%e3%83%89%e3%81%8c%e6%ac%a0%e3%81%91%e3%81%a6%e8%a1%a8%e7%a4%ba%e3%81%95%e3%82%8c%e3%82%8b/#post-70270 Sun, 30 Apr 2023 17:45:23 +0000 カード幅の計算(切り上げ)で誤差が生じ。
この為、カード自体を少し小さくする？（右端に余裕を持たせる）
図はスキン「イノセンス」です。

以下に変更。marginを大きくする。
.carousel-content .a-wrap {
  margin: 0 5px 3px;
}

前回追加した以下を削除。

.slick-list {
  width: calc(100% + 4px);
}
スキン「SILK」ですがhoverの時、box-shadowで影を付けており。
このボケが大きい為、marginか、box-shadowか、いずれかを調整しないと、影が欠けて見えます。]]> スキンの不具合 大門未知子 https://wp-cocoon.com/community/skin-bugs/%e3%82%ab%e3%83%ab%e3%83%bc%e3%82%bb%e3%83%ab%e3%81%ae%e5%8f%b3%e7%ab%af%e3%81%ae%e3%82%ab%e3%83%bc%e3%83%89%e3%81%8c%e6%ac%a0%e3%81%91%e3%81%a6%e8%a1%a8%e7%a4%ba%e3%81%95%e3%82%8c%e3%82%8b/#post-70270