Snow Monkey BlocksスライダーのCSSカスタマイズ

100%GPL有料WordPressテーマ Snow Monkeyを使う際に便利なカスタムブロックを提供してくれるプラグインに、Snow Monkey Blocksというものがあります。ほぼ100%のSnow Monkeyユーザーがご存知のものかと思います。

Snow Monkey Blocks

モンキーレンチ作の Gutenberg ブロック集。

ja.wordpress.org

こちらのプラグインが提供してくれるカスタムブロックの中に１つに、スライダーブロックというものがあります。

スライダー

画像をスライダー形式で表示することができます。ファーストビューなどでよく利用されています。画像のアスペクト比、…

happy-snow-monkey.olein-design.com

今回は、こちらのブロックの手軽なCSSカスタマイズについて解説していこうと思います。

カスタマイズをする前に

Snow Monkey Blocksのスライダーに付与されるCSSクラスは.smb-spider-sliderになります。

しかし、このクラスにCSSスタイルを指定してしまうと、他のページなどで同じスライダーブロックを利用した際に、そのブロックにも同様のスタイルが適応されてしまいます。

サイト全体を通してスライダーブロックにスタイルを指定したい場合にはその方法で構いませんが、特定のスライダーブロックにだけスタイルを適応したい場合には、任意のブロックにCSSクラスを付与して対応してください。

以下の解説では.customize-smb-sliderというCSSクラスを任意のスライダーブロックに指定したという前提で進めていきます。

キャプション部分に半透明背景を設置する

Snow Monkey Blocksのスライダーは、Wordpress標準の画像ギャラリーが利用されています。そちらでは、スライダーに掲載する画像にキャプションテキストを、標準画像ブロックと同じように設置することができます。

しかし、デフォルトでは画像の上に文字色が黒のテキストが掲載されるだけなので、暗めの画像だとキャプションテキストが同化してしまい、視認性が低くなってしまいます。

そういった場合の解決方法の１つとして、背景に半透明の黒背景を設置し文字色を白にすることで、どんな画像でもキャプションテキストの視認性を確保することができます。

キャプション部分は.smb-spider-slider__itemというCSSクラスが設定されているので、その部分にスタイルを適応してみましょう。

.customize-smb-slider.smb-spider-slider .smb-spider-slider__item {
  background-color: rgba( 0,0,0, .5 );
}

上記では、背景色黒に透明度0.5を設定しています。お好きな色に指定してください。

また、テキストの色も変更します。テキスト部分は.smb-spider-slider__item__captionというCSSクラスが設定されているので、

.customize-smb-slider.smb-spider-slider .smb-spider-slider__item__caption {
  color: white;
}

というような形で文字色を変更しておきます。こちらのサンプルでは文字色を白に指定しています。

このようにカスタマイズすることで、以下のような見栄えになります。

ちなみに、サムネイル各々を角丸にしたい場合には、こんなCSSで実現できます。

.customize-smb-slider.smb-spider-slider .smb-spider-slider__item img {
  border-rdius: 5px;
}

サムネイル画像の幅を狭める

サムネイル画像をスライダーの下部に表示させることができます。

標準では、各々のサムネイル画像の幅が25%に設定されていますが、こちらの数値を変更することで１列に表示される画像の数をコントロールすることができます。

サムネイル画像全体は.spider_dotsというCSSクラスが設定されていて、各々の画像部分には.spider_dotというCSSクラスが設定されています。

.smb-spider-slider .spider_dots .spider_dot {
  flex: 0 0 20%;
}

こうすることで、画像の幅を全体の20%に変更することができるので、１列に５つの画像が表示されるようになります。

このように各々の画像幅を変更することで、１列にいくつ画像を表示させるかを変更することができます。

サムネイル画像をメインスライダー画像の上に乗せる

全体をラップしている.smb-spider-sliderにposition: relative;を設定し、サムネイル画像全体の.spider_dotsにposition: absolute;を設定することで、上に乗せて表示することができます。

.customize-smb-slider.smb-spider-slider {
  position: relative;
}

.customize-smb-slider.smb-spider-slider .spider_dots {
  position: absolute;
  left: 0;
  bottom: 51px; // キャプション上部にmargin15px
  z-index: 10;
  justify-content: center; //中央寄せ
}

このようにすることで実現できます。サンプルコードでは中央寄せにしていますが、左寄せ・右寄せなども可能です。

追加：メイン画像の高さを変更する

メインの画像の高さを変更したい場合には、.spider__canvasに高さを設定してあげると良いでしょう。

.customize-smb-slider.smb-spider-slider .spider__canvas {
  height: 50vh; //ブラウザの高さの半分
}

スライダーの高さを変更したい

タグ: Snow Monkey Blocks, スライダー このトピックには3件の返信、2人の参加者…

snow-monkey.2inc.org

まとめ

このようにCSSスタイルを追加することで、標準とはちょっと違うスタイルを実現することができますので、ぜひ開発者ツールなどでソースコードを確認しながら、色々と試してみてください。