最近のWordPressテーマは、新たにプラグインを追加しなくてもいいように、あらかじめスライダーが組み込まれているタイプも増えてきたようですが、自分でプラグインをいじるのも楽しいものです（笑）。DigiPressのCOLORSに搭載されているようなスライダーを作ってみたくて、WP Posts Carouselであれこれやってみました。
今回は、スタイルシートの改変だけで実現しました。
[wp_posts_carousel template=”custom2.css” post_types=”post” all_items=”10″ show_only=”newest” exclude=”” posts=”” ordering=”desc” categories=”” relation=”and” tags=”” show_title=”true” show_created_date=”false” show_description=”false” allow_shortcodes=”false” show_category=”true” show_tags=”false” show_more_button=”false” show_featured_image=”true” image_source=”medium” image_height=”100″ image_width=”100″ items_to_show_mobiles=”1″ items_to_show_tablets=”2″ items_to_show=”2″ slide_by=”1″ margin=”5″ loop=”true” stop_on_hover=”true” auto_play=”true” auto_play_timeout=”2200″ auto_play_speed=”1800″ nav=”true” nav_speed=”1800″ dots=”true” dots_speed=”800″ lazy_load=”false” mouse_drag=”true” mouse_wheel=”true” touch_drag=”true” easing=”linear” auto_height=”true” custom_breakpoints=”:”]
基本となるスタイルシートは、前回のエントリーと同じ「light.css」を使用し、「custom2.css」として使用します。
.custom2-theme.wp-posts-carousel .wp-posts-carousel-slideに{position: relative;}が設定されているので、.custom2-theme.wp-posts-carousel .wp-posts-carousel-detailsに対して{position: absolute; bottom:5px; right:0; left:0; }を指定して画像の上にdetails（日付、タイトル、カテゴリー名）が載るように位置を設定しました。背景を{background: rgba(0,0,0,0.6);}としています。
ただ、レスポンシブで画像の幅が変化する部分は計算で割り出すことができなさそうだったので、{ width: 97.5%; }としました。
※2019-06-27追記
人気の記事一覧をトップページにカルーセル表示する
