CSSでシンプルな横スクロールのリスト(ul)

施工実績や導入事例などで、サムネイル付きのリストを、横スクロールにする方法です。

liのwhite-space:normalは、タイトルが長くなった時に、ulであらかじめwhite-space: nowrapにしちゃってるので、改行しないため、liで新たに追加しています。ですので、2行にならない構造であれば不要です。
またvertical-align: topは、画像の高さが違った場合、そのままだとした揃えになるので上に合うようにしています。

カスタム分類の一覧を取得し、トップページに最新5件表示

HPの導入事例やお客様の声など、カスタム分類を作ったときに
トップページ側で、最新5件を表示させたいとき。

カスタム投稿タイプは、プラグインの「Custom Post Type UI」 をDLして作成。
今回は導入事例だったのでカスタム投稿タイプのスラッグは「cases」にしています。(※1行目)

divのclass「item_date」はなしでもOKですが
スマホサイズにしたときに、カテゴリと日付を横並びにしたかったのでくくっています。

liのクラスに、カテゴリ別のクラスを当てるようにしているので
li.スラッグ名 .item_date .cat{}
というスタイルで、出力されたカテゴリのCSSも装飾できます。
divのworks_linkのクラスの中は、普通のリンクですので削除可能。