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-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; //ブラウザの高さの半分
}
まとめ
このようにCSSスタイルを追加することで、標準とはちょっと違うスタイルを実現することができますので、ぜひ開発者ツールなどでソースコードを確認しながら、色々と試してみてください。
「あれ?この情報、古くない?」と思ったらご連絡ください。 snow_monkey_append_entry_content