Xwriteで「通常記事一覧」と「投稿スライダー」を同じページに並べたとき、
左右の位置がわずかにズレて見えることはありませんか？

これはSlick Sliderの構造上、スライドに付けたmarginが外側にも効いてしまうことが原因です。

この記事では、スライド間の余白は維持しつつ、外側だけを相殺して揃える方法をSVG風図解で解説します。

目次 [ close ]
  1. まずはズレの正体を視覚で理解する
    1. ▼ 通常の記事一覧（基準ライン）
    2. ▼ スライダー（marginのみ指定した状態）
  2. 解決の設計思想
  3. 実装するCSS
    1. ① スライド間の余白を作る
    2. ② 外側だけを打ち消す
  4. ▼ 調整後の状態
  5. なぜ :not() を付けるのか？
  6. 適用場所
  7. まとめ：余白は「感覚」ではなく「構造」で揃える

まずはズレの正体を視覚で理解する

▼ 通常の記事一覧（基準ライン）

コンテンツ幅

外枠の中にカードがきれいに収まっています。

▼ スライダー（marginのみ指定した状態）

← 外側にも余白が発生 →

スライドにmarginを入れると、両端にも余白ができてしまいます。

これが通常記事一覧とのズレの原因です。

解決の設計思想

やることは2ステップです。

  1. スライド間の余白は作る
  2. 外側の余白だけを親要素で打ち消す

つまり、marginを親で相殺するというレイアウト設計です。

実装するCSS

① スライド間の余白を作る

/* スライド間の余白 */
.xw-block-post-list.type-slider .slick-slide {
  margin: 0 15px;
}

② 外側だけを打ち消す

/* 外側の余白を相殺 */
.xw-block-post-list.type-slider:not(.is-center-mode):not(.alignfull) .slick-list {
  margin: 0 -15px !important;
  padding: 0 !important;
}

▼ 調整後の状態

通常記事一覧と完全に揃いました。

なぜ :not() を付けるのか？

  • :not(.is-center-mode) → センターモードは設計が違うため除外
  • :not(.alignfull) → フル幅では不要

通常レイアウトのみを安全に制御するための指定です。

適用場所

  • 外観 → カスタマイズ → 追加CSS

子テーマ利用時はstyle.cssでもOKです。

まとめ：余白は「感覚」ではなく「構造」で揃える

見た目の違和感は、ほぼ100%レイアウト構造が原因です。

スライダーだけ特別扱いせず、コンテンツ幅を基準に揃えることで、
サイト全体の完成度は一段階上がります。

ぜひ調整してみてください。