snow_monkey_prepend_main

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

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

この記事では、Snow Monkey Blocks に含まれている スライダーブロック の CSS カスタマイズについてご紹介したいと思います。

カスタマイズの前提条件

  • Snow Monkey Blocks バージョンは 13.3.0 で動作確認
  • 任意の CSS クラス .customize-smb-slider を付与

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

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 );
}

.smb-spider-slider__item__caption を使ってテキストの色を変更しましょう。

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

これで完成です。

サムネイル画像を角丸にしたい場合

サムネイル画像を表示した場合には、このような形で角丸にしたりすることもできます。

.customize-smb-slider.smb-spider-slider .spider__figure {
    border-radius: 5px;
}

他にも属性によって切り替えることで、さまざまな見せ方ができるのでぜひ試してみてください。

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

全体をラップしている .smb-spider-sliderposition: relative; を設定し、サムネイル画像全体の .spider__dots を絶対配置することで実現することができます。

各種デバイスでの見え方やキャプションが複数業になる場合の検証は必ず行なってくださいね。

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

.customize-smb-slider.smb-spider-slider .spider__dots {
    position: absolute;
    left: 0;
    bottom: 51px;
    z-index: 10;
    justify-content: center;
    padding-left: 50px;
    padding-right: 50px;
}

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

1カラムレイアウトなどでスライダーを利用する場合、ファーストビューに収まるようにといった工夫もされることがあるかもしれません。

同時にスライダーの高さを任意の高さに設定したい場合もあるでしょう。

そう言った場合には、このようにスタイルを当てると良いです。

.customize-smb-slider.smb-spider-slider .spider__canvas {
    height: 50vh;
}

更新履歴

2021/11/19 07:29:08 - `snow-monkey-blocks-slider-css-customization.md` を作成 ( Olein-jp )

コンテンツ内容に不備がある場合にはプルリクお待ちしています。

Snow Monkeyで困ったら…?

こんな時にご活用ください。
  • Snow Monkeyの使い方をレクチャーしてほしい
  • Snow Monkeyのカスタマイズの基本をレクチャーしてほしい
  • Snow Monkeyを採用した案件で行き詰まったので解決してほしい
  • Snow Monkeyを採用した制作案件を依頼したい

運営へのご連絡はこちらから

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

snow_monkey_append_entry_content
snow_monkey_after_entry_content

HAPPY SNOW MONKEYの管理人情報

久野 晃司

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

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

snow_monkey_append_main