Luxeritasのカルーセルスライダーウィジェットのデザインをカスタマイズする

by
Luxeritas
（更新: 2024年10月7日）

Luxeritas2.2.1.1でカルーセルウィジェットが実装されました。

ここまでやるか！

もう見たときはそんな感じ。
別サイトでカルーセルウィジェット実装している別テーマを使ってみようかなと思っていたのですが、その必要もなくなってしまいました。

Luxeritas最強すぐる。

天満川鈴 WRITTEN BY 天満川鈴

カルーセルウィジェットのデザインに問題

しかしカルーセルウィジェットのデザインが……

Luxeritasカルーセルウィジェット、カスタマイズ前

タイトルが読めない！

これでは回遊率上げるための施策にならないので、処置を施すことにします。

完成図

Luxeritasカルーセルウィジェット、カスタマイズ後

横長サムネイルの下辺にタイトルエリアの上辺を揃えています。
このくらい画像が見えれば、あとは透過で十分でしょう。

ウィジェットの設定

画像を参考に設定してください。
ここでの高さは、表示される記事アイテムの高さとなります。

css

次のCSSを子テーマのstyle.cssに記述してください。
p.swiper-title{
 height: 130px !important;
font-size: 1.3rem !important;
 font-weight: 700 !important;
}
.swiper-slide{
align-items: flex-start !important;
}

上はタイトルエリアの高さです。
下はサムネイルを上部固定するコードです。

数字は各自のタイトルとサムネイルの大きさに応じて調整してください。
文字を大きくしたいときや太さを変えたいときは上のfont-sizeで調整してください（大きさ・太さはデフォルト値、変更しないならCSSから削ってください）。

まとめ

これで回遊率上がるといいんだけど……

天満川鈴
WRITTEN BY

天満川 鈴

未経験からWEB業界に入り、現在はWEBディレクターとして実務に従事。 要件整理・導線設計・コンテンツ構成などを学びながら、日々改善を重ねています。 AIを活用したコンテンツ制作・効率化を強みとし、プロンプト設計を含めた制作フローの最適化にも取り組んでいます。
本サイトでは、WordPressやサイト制作に関する試行錯誤・検証内容を中心に発信。 技術検証の一環として、KUSANAGI公式サイトにて記事を2回紹介いただきました。

X 🦋 CodePen Amazon
RECOMMENDED INFRASTRUCTURE
ConoHa WING

私はConoHa以外を勧めない。

2016年からずっとConoHaを使い倒してきました。知人に「一番いいサーバーは？」と聞かれたら、迷わずここを教えます。

レンタルサーバーナンバーワンを誇る高速環境であることはもちろん。私が「黒い画面って何？」というド素人からサイト制作のプロになれたのは、傍らにずっとこのはちゃんがいてくれたから。

私がConoHaを使い続ける、嘘偽りない理由です。

公式サイトで詳細を見る
× 閉じる