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

  • ブックマーク
  • -
    コピー

snow_monkey_before_entry_content

snow_monkey_prepend_entry_content

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

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

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

カスタマイズをする前に

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

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

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

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

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

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

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

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

キャプション部分は.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%に設定されていますが、こちらの数値を変更することで1列に表示される画像の数をコントロールすることができます。

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

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

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

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

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

全体をラップしている.smb-spider-sliderposition: relative;を設定し、サムネイル画像全体の.spider_dotsposition: 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; //ブラウザの高さの半分
}
フォーラムでのやりとりの結果をこちらにも記載しました

まとめ

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

「あれ?この情報、古くない?」と思ったらご連絡ください。

HAPPY SNOW MONKEY を
さまざまな形でサポート頂けます。

snow_monkey_append_entry_content

snow_monkey_after_entry_content

HAPPY SNOW MONKEYの管理人情報

久野 晃司

Web制作系フリーランス。WordPressに関するお仕事や活動が多いです。

WordPressコア貢献者/テーマ開発者/プラグイン開発者/Meetupオーガナイザー/翻訳貢献者