小説家になろうにて「キモオタでギャルゲー、それって何の罰ゲーム!?」連載中!

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

Luxeritas
この記事は約2分で読めます。

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

質問者の写真

ここまでやるか!
 

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

Luxeritas最強すぐる。

スポンサーリンク
この記事を読む方へのオススメ

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

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

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から削ってください)。

スポンサーリンク

まとめ

解答者の写真
これで回遊率上がるといいんだけど……
 
アドセンス有りでもPageSpeed Insightで100点満点!

超光速サイト実行環境KUSANAGI&WEXAL。
コスパ抜群のレンタルサーバーConoHa。
もっと知りたい方はボタンをクリックしてください。
特集記事の目次が開きます。

この記事を書いた人

広島市内のパチンコホール勤務。
3号機時代からのパチンカス。
ADHD、精神障害者手帳3級所持。
慶應義塾大学商学部卒、専攻はマーケティング(広告・宣伝)
国家一種試験経済職の資格で公安調査庁に入庁。
在職時は国際テロ、北朝鮮を担当。
「小説家になろう」の底辺作者。
WordPress記事は素人の備忘録です。

天満川鈴をフォローする
Luxeritas
スポンサーリンク
きもおたねっと。
タイトルとURLをコピーしました