以前、ストーク（STORK）でトップページにスライドショーを設定する方法を解説しましたが、このスライドショー機能、表示させたい記事が4つ以下だと、PCで見た時に表示が崩れ、下記のように右に寄ってしまいます。
表示が崩れたスライドショー
この表示の崩れを修正し、下記のように中央に表示させる方法を今回は解説したいと思います。
表示の崩れを修正したスライドショー
style.cssにコードを追記する
カスタマイズ方法は非常に簡単です。
下記のコードを子テーマのstyle.cssに追記しましょう。
1 2 3 4 5 | @media only screen and (min-width: 768px) { .slick-slider .slick-track { left: 0 !important; } } |
ストークの子テーマについては、下記の記事も参考にしてみてください。
WordPressダッシュボードのサイドメニューにある『外観』にマウスを合わせ、さらに表示された『テーマエディター』をクリックします。
『外観』にマウスを合わせ、表示された『テーマエディター』をクリック
テーマの編集画面が開きます。
画面右上の「編集するテーマを選択」が「stork_custom」になっていることを確認し、なっていればstyle.cssに先ほどのコードを追記しましょう。
style.cssにコードを追記
コードを追記したら『ファイルを更新』ボタンをクリックします。
『ファイルを更新』ボタンをクリック
これでカスタマイズは完了です。
トップページを確認してみましょう。
トップページを確認
トップページを開き、スライドショーが下記のように中央に表示されていればOKです。
表示の崩れを修正したスライドショー
まとめ
今回は、WordPressテーマ「ストーク」 
のスライドショーに記事を4つだけ設定した時の表示の崩れを整える方法を解説しました。
いちいちそんなことしなくても、スライドショーに5つ以上記事を設定すればいいんじゃない？と思う方もいると思いますが、どうしても4つだけしか表示させたくない！というこだわりがある方はぜひ試してみてください。
