スライダー画像の中央の画像にのみ左右の余白を入れたい

前提・実現したいこと

WordPressでホームページを作成しています。
slickを使用し、画像がスライドするようにしました。

通常は3つの画像が並んでおり、矢印をクリックするとスライドします。
3つの画像のうち中央の画像にのみ左右の余白を入れたいのですが
jQueryを使用しているため、思ったように反映されません。
現状は全てのリスト画像に左右の余白を入れ
画像の領域全体のwidthに余白分を足すことによって形を保っている状況です。
他にいい解決方法があればと思っております。

URL

https://creaplus.co.jp/wp/

該当のソースコード

html
1  <section class="news-event">
2    <div class="section-space">
3      <figure>
4        <img src="https://creaplus.co.jp/wp/wp-content/themes/creaplus/assets/img/section/mark_plus_blue.svg" width="23" height="23" alt="プラスマーク">
5      </figure>
6      <h3>ニュース・イベント</h3>
7      <p>NEWS & EVENT</p>
8    </div>
9
10    <div class="news-event-image multiple">
11      <ul class="slider">
12        <li>
13          <a href="https://creaplus.co.jp/wp/archives/124">
14            <figure><img width="350" height="230" src="https://creaplus.co.jp/wp/wp-content/uploads/2020/05/2483461_m-350x230.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" /></figure>
15          </a>
16        </li>
17        <li>
18          <a href="https://creaplus.co.jp/wp/archives/88">
19            <figure><img width="350" height="230" src="https://creaplus.co.jp/wp/wp-content/uploads/2020/05/f460fa6434ab0acc6fd54f8b8e167df4_l-scaled-1-350x230.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" /></figure>
20          </a>
21        </li>
22        <li>
23          <a href="https://creaplus.co.jp/wp/archives/74">
24            <figure><img width="350" height="230" src="https://creaplus.co.jp/wp/wp-content/uploads/2020/05/32000320_00002-350x230.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" /></figure>
25          </a>
26        </li>
27        <li>
28          <a href="https://creaplus.co.jp/wp/archives/67">
29            <figure><img width="350" height="230" src="https://creaplus.co.jp/wp/wp-content/uploads/2020/05/66aef461ca08646dd01f67f344cb934e5093ea28-350x230.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" /></figure>
30          </a>
31        </li>
32      </ul>
33    </div>
34    <div class="news-event-image__bg"></div>
35    <div class="news-event-list">
36      <ul class="news-event-item">
37        <li>
38          <ul class="news-event-item__top clearfix">
39            <li class="date">2020.05.21</li>
40            <li class="news">
41              <a href="https://creaplus.co.jp/wp/archives/category/news">ニュース</a></li>
42          </ul>
43          <p>本日はお日柄もよく晴天に恵まれております。</p>
44        </li>
45        <li>
46          <ul class="news-event-item__top clearfix">
47            <li class="date">2020.05.11</li>
48            <li class="event">
49              <a href="https://creaplus.co.jp/wp/archives/category/event">イベント</a></li>
50          </ul>
51          <p>ここには「ニュース・イベント記事」本文が入ります。これはダミー文です。ここには「ニュース・イベント記事」本文が入ります。これはダミー文です。ここには「ニュース・イベント記事」本文が入ります。これはダミー文です。ここには「&#8230;</p>
52        </li>
53        <li>
54          <ul class="news-event-item__top clearfix">
55            <li class="date">2020.05.11</li>
56            <li class="news">
57              <a href="https://creaplus.co.jp/wp/archives/category/news">ニュース</a></li>
58          </ul>
59          <p>ここには「ニュース・イベント記事」本文が入ります。これはダミー文です。ここには「ニュース・イベント記事」本文が入ります。これはダミー文です。ここには「ニュース・イベント記事」本文が入ります。これはダミー文です。ここには「&#8230;</p>
60        </li>
61      </ul>
62      <div class="text-center">
63        <a href="https://creaplus.co.jp/wp/archive"><button class="gray2">一覧はこちら</button></a>
64      </div>
65    </div>
66  </section>

css
1.news-event-image {
2  max-width: 1050px;
3  margin: auto;
4}
5
6.news-event-image__bg {
7  background-color: #cde1ee;
8  height: 130px;
9  margin-top: -200px;
10  margin-bottom: 50px;
11}
12
13.news-event-list {
14  max-width: 1000px;
15  margin: auto;
16}
17
18.news-event-item {
19  display: -webkit-box;
20  display: -ms-flexbox;
21  display: flex;
22  -webkit-box-pack: justify;
23  -ms-flex-pack: justify;
24  justify-content: space-between;
25}
26
27.news-event-item li {
28  max-width: 300px;
29}
30
31.news-event-item__top {
32  padding-bottom: 20px;
33  border-bottom: 1px solid #000;
34}
35
36li.date {
37  float: left;
38  font-size: 1.7rem;
39  margin-top: 6px;
40  margin-right: 20px;
41}
42
43li.news a {
44  float: left;
45  font-size: 1.2rem;
46  background-color: #C89D7F;
47  padding: 6.5px 16px;
48  color: #fff;
49}
50
51li.event a {
52  float: left;
53  font-size: 1.2rem;
54  background-color: #82b3d5;
55  padding: 6.5px 16px;
56  color: #fff;
57}
58
59.news-event-item p {
60  margin-top: 30px;
61  margin-bottom: 75px;
62  line-height: 1.6;
63}
64
65/*---------------------------
66 * slider
67 --------------------------*/
68.slider {
69  margin: 100px auto;
70  width: 100%;
71  opacity: 0;
72  transition: 3s;
73}
74
75.slick-initialized {
76  opacity: 1
77}
78
79.slider img {
80  height: auto;
81}
82
83.slick-slide a figure:hover {
84  opacity: 1;
85  -webkit-animation: flash 1.5s;
86  animation: flash 1.5s;
87}
88
89@-webkit-keyframes flash {
90  0% {
91    opacity: .4;
92  }
93
94  100% {
95    opacity: 1;
96  }
97}
98
99@keyframes flash {
100  0% {
101    opacity: .4;
102  }
103
104  100% {
105    opacity: 1;
106  }
107}
108
109/*slick setting*/
110.slick-prev:before,
111.slick-next:before {
112  color: #000;
113}
114
115.multiple {
116  padding: 0;
117}
118
119.multiple img {
120  width: 100%;
121}
122
123.multiple li {
124  margin: 0 25px;
125}
126
127.multiple .slick-next {
128  z-index: 100;
129}
130
131.multiple .slick-prev {
132  z-index: 100;
133}
134
135.news button.slick-prev.slick-arrow {
136  display: none !important;
137}
138
139.news button.slick-next.slick-arrow {
140  display: none !important;
141}
142
143ul.slick-dots {
144  display: none !important;
145}

試したこと

css
1li:first-child {
2  margin: 0;
3}
4
5li {
6  margin: 0 50px;
7}
8
9li:last-child  {
10  margin: 0;
11}

Lhankor_Mhy

2021/05/10 02:38

2点補足願います。「全てのリスト画像に左右の余白」とは、 .multiple li { margin: 0 25px; } のことですか？「画像の領域全体のwidthに余白分を足す」とは、 .news-event-image { max-width: 1050px; margin: auto; } のことですか？

soraatori

2021/05/10 14:33

情報不足で申し訳ございません。おっしゃられる通り .multiple li { margin: 0 25px; } で全ての画像に左右の余白を入れ、 1枚目と3枚目の外側の余白を考慮し .news-event-image { max-width: 1050px; margin: auto; } として通常1000pxに25pxずつ足して1050pxとしています。

Lhankor_Mhy

2021/05/11 00:39

問題を把握しました。

行動規範の内容に同意します

回答1件

ベストアンサー

たとえば、以下のようにマイナスマージンを使うやり方もあると思います。

css
1.slick-list {
2	margin: 0 -25px;
3}

余計なお世話だと思いますが、実際に適用してみると、スライダーの矢印ボタンと画像が密着してしまい、現状の方が見た目よさそうに感じています。

投稿2021/05/11 00:38

Lhankor_Mhy

総合スコア36981

soraatori

2021/05/11 14:52

ご回答ありがとうございます。確かにこちらの方法ですと .news-event-image { max-width: 1000px; } とすることが出来ました。理屈的にはスライダー画像の外側に入っているmarginを消去し、スライダー画像の中身にだけmarginを適用している状態でしょうか。スライドボタンの位置はCSSで調整出来ます。 WordPressのようにPHPで吐き出すようなものですと、 li:first-childなどを使用し表示されている3つの画像の最初の画像にはmargin: 0 25px 0 0; 最後の画像にはmargin: 0 0 0 25px; それ以外の画像にはmargin: 0 25px; を指定するようなことはなかなか難しいということですね。