SWELLの画像スライダーをCSSでカスタマイズ（WordPress Themes）

このウェブサイトのWordPressテーマは「SWELL」を使っていますが、ほぼデフォルト状態で、「外観」＞「カスタマイズ」から調整できる部分しか設定していません。CSSで少し調整している部分はありますが、SWELLの完成度が高いので、250行くらいしか書いていません。

今回紹介するのは、トップページのメインビジュアル部分のデザインをカスタマイズする方法です。よくあるデザインですが、画像をずらして、背景レイヤーで色を入れるデザインにしています。ゼロからHTMLとCSSを書いて作る場合は、結構簡単にできると思いますが、SWELLのCSSを見てみたところ、初心者の方には少し難しいかもしれないので、本記事で紹介したいと思います。ポイントさえわかってしまえば、100行くらいのCSSのみで完結しますし、スライダーをずらすだけなら数行でできてしまいます。本当はサイトを全体的にがっちりカスタマイズしたいところですが、ブログだけで運用するのであれば、メインビジュアルをカスタマイズして、あとは「外観」＞「カスタマイズ」から調整するだけでも十分だと思います。

メインビジュアルのカスタマイズ用CSS

まずは、実際のCSSの全体像を見てみましょう。classの当て方など、ちょっと微妙な部分とかあるかもしれませんが、そこはご了承ください。もし、参考にして使ってみようと考えている方は、コピペして使っていただいて構いません。むしろ、微調整してご利用いただければと思います。

.p-mainVisual {
  overflow: visible;
  width: 100%;
  margin-right: 0;
  margin-left: auto;
  padding-top: 56px;
}
.p-mainVisual::before {
  position: absolute;
  content: "";
  width: calc(100% - 56px);
  height: 720px;
  background-color: #0f2540;
  left: 0;
  top: -56px;
}
.p-mainVisual__inner {
  padding-left: 15%;
}
.p-mainVisual__textLayer {
  left: 0;
  transform: inherit;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5) !important;
}
.p-mainVisual__slideTitle {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 32px;
}
.p-mainVisual__slideText {
  font-weight: 600;
  line-height: 1.8;
}
.p-mainVisual__scroll {
  left: auto;
  right: 15px;
}
.-btn-b > .c-mvBtn__btn {
  font-size: 14px;
  font-weight: 600;
  color: #fff !important;
  border: 2px solid #fff;
  padding-right: 3.5em;
  transition: 0.25s;
}
.-btn-b > .c-mvBtn__btn:hover {
  background-color: #fff;
  color: #0f2540 !important;
}
.-btn-b > .c-mvBtn__btn::after {
  position: absolute;
  content: "\f105";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  top: 50%;
  right: 5%;
  transform: translatey(-50%);
  margin-top: 1px;
}
@media (min-width: 960px) {
  .p-mainVisual {
    padding-top: 70px;
  }
  .p-mainVisual::before {
    width: 75%;
    height: 940px;
    left: -40%;
    top: -70px;
  }
  .p-mainVisual__inner {
    padding-left: 25%;
  }
  .p-mainVisual__slideTitle {
    font-size: 60px;
  }
  .p-mainVisual__slideText {
    line-height: 2.4;
  }
  .p-mainVisual__scroll {
    right: 5%;
  }
  .-btn-b > .c-mvBtn__btn {
    font-size: 15px;
  }
}

CSSは、モバイルファーストで書いているため、1行目からモバイル用を先に書いて、メディアクエリーでウィンドウサイズ960px以上の場合に上書きする形で書いています。基本的に通常のPC用デザインを先に考えて、すぐにCSSを書き始めるのではなく、モバイルの方も考えてモバイル用のCSSを最初に書くようにしています。以前はPC用のCSSを作ってから、モバイル用のCSSを作っていましたが、効率が悪いためモバイルファーストで作るようにしています。

また、管理画面上でCSSを書くようにしていますが、SCSSで書いた方が楽なので、「Simple Custom CSS and JS PRO 」を使っています。テーマ依存しないCSSを管理できるので便利かなと思います。無料版もありますが、機能制限されていてSCSSやMinifyが使えなかったと思います。無料版の場合はあまり使うが必要がなく、他プラグインを使うか、ローカルでコードを書いて、コンパイルしたものをカスタマイザーの追加CSS欄や、固定ページ編集画面のページ下部に「カスタムCSS&JS」欄があるので、そこに直接コードを入れても良いと思います。（私の場合は、ローカル保存したCSSを管理するのが下手なので。。。）

パーツごとに解説

背景レイヤーを追加

.p-mainVisual::before {
  position: absolute;
  content: "";
  width: calc(100% - 56px);
  height: 720px;
  background-color: #0f2540;
  left: 0;
  top: -56px;
}
@media (min-width: 960px) {
  .p-mainVisual::before {
    width: 75%;
    height: 940px;
    left: -40%;
    top: -70px;
  }
}

左側の青背景のレイヤーを疑似要素として「.p-mainVisual::before」に入れています。モバイルの場合は、右上トグルメニューに被らないように調整して、PCの場合は左のロゴとずらした画像スライダーに被るようにしています。普通は「z-index」を指定しますが、今回のケースは指定しなくても大丈夫でした。幅や高さなどの各数値をお好みで調整してください。

画像スライダーをずらす

.p-mainVisual__inner {
  padding-left: 15%;
}
@media (min-width: 960px) {
  .p-mainVisual__inner {
    padding-left: 25%;
  }
}

開発者ツールでレイヤーを見た際にスライダーなので少し複雑になっていて、どこを修正したらいいのかわかりづらいですが、「.p-mainVisual__inner」の左に余白を入れるだけです。

レイヤー階層は以下のようになっています。

.p-mainVisual
　 └ .p-mainVisual__inner
　　 ├ .swiper-wrapper
　　 ├ .swiper-pagination
　　 └ .p-mainVisual__textLayer

「.p-mainVisual__inner」の中に「.p-mainVisual__textLayer」があるので、タイトルやテキスト、リンクボタンも一緒に移動してしまいそうですが、「.p-mainVisual__textLayer」に position: absolute; がかかっているので大丈夫です。

「.p-mainVisual__textLayer」については、テーマカスタマイザーの「トップページ」＞「メインビジュアル」の「各スライダー設定」で「テキストの位置」を「左」に設定していれば、背景レイヤーのある左側に移動できます。

その他テキスト調整

背景レイヤーと画像スライダーで指定したCSS以外は、ほぼテキスト部分のCSSとなっていますので、調整しても良いですし、カスタマイザーからの調整だけで十分な場合は、省いても大丈夫です。

まとめ

SWELLの完成度が高いため、たった数行のシンプルなCSSだけで、このようなデザインにカスタマイズすることができて、デザインがガラッと変わります。最初はどこを弄って良いのかわからないこともありますが、レイヤー階層を頭の中でイメージするか、上のように階層を書き出してみるとわかりやすいと思います。

今後は少しずつカスタマイズして、そのカスタマイズ方法を紹介していきたいと思います。もし、「こんなデザインにするにはどうしたらいいのか？」などの要望があれば、それを実現するためにカスタマイズして記事にしてみたいと思うので、やって欲しいことがあれば、 （@MastDesign723）のDMでも お問い合わせフォームからでも良いのでご連絡ください。

本サイトはWordPressテーマ「SWELL」を使用しています

- シンプルなのに、高機能 -
ブロックエディター完全対応のWordPressテーマ。
圧倒的な使い心地を追求し、SWELLは日々進化しています。

WordPressテーマ「SWELL」