wordpressテーマ「luxeritas」でカルーセルスライダーをダークカラーにしてみる

2019/06/30 09:20


注意:本記事はあくまで脳筋がてきとうにカスタマイズしたものを忘備ついでに初心者に紹介するものであり、うまく動作しなかったとして【J】は何の責任も負いません。

@本記事執筆時点でのluxeritasのバージョンは3.5.12

まず、変更前。
「外観」→「ウィジェット」の「カルーセルスライダー(Luxeritas オリジナル)」を選択して必要なところにドラッグ&ドロップしてちょっと設定を変更。

・「最大表示件数」を1
・サムネイルの高さを「高さ固定の160px」に
・「Next / Prev:」のところを「常に表示」に
・Next / Prevボタンの色は、まあ何でもいいですがこのサイトでは「#a7ff77
・オプションの自動再生を4秒

これでこんな感じ↓になると思う。

ここからダークカラーっぽく変更するためのコード。
「style.css」へ以下のコードを追加。

.swiper-pagination-bullet {
width: 8px;
height: 8px;
display: inline-block;
border-radius: 100%;
background: #2f2e30 !important;
box-shadow: 0 0 0 2px #110e11 !important;
}
.swiper-pagination-bullet-active, .swiper-pagination-progress .swiper-pagination-progressbar {
background: #a7ff77 !important;
}
.swiper-button-next:before, .swiper-button-prev:before {
font-family: Font Awesome\ 5 Free;
font-weight: 900;
font-size: 2pc;
line-height: 1;
opacity: .75;
text-shadow: 0 1px 15px #09090a, 0 -1px 15px #09090a, -1px 0 15px #09090a, -1px 0 15px #09090a, 1px 1px 15px #09090a, 1px -1px 15px #09090a, -1px 1px 15px #09090a, -1px -1px 15px #09090a !important;
}
.swiper-slide {
background: #09090a !important;
border: 1px solid #4d4f56 !important;
}

ハイ完成。ピンク文字の部分はサムネ下の点灯しているバレットの色なので、適宜自分で設定した「Next / Prevボタンの色」と同じにしてくれや。

どうだね?ダークっぽいじゃろ。
デフォルトの感じも良いんだけど、サムネイルに漫画の1コマを使ったりするようなまとめサイトの場合は黒っぽい方が相性も良かろうとのことで変更してみた。

 


 
    これで勝つる・・・!