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のクラスの中は、普通のリンクですので削除可能。

MixItUp3の基礎的な設置方法

ソートをアニメーションで楽しく動かすMixItUp3
https://www.kunkalabs.com/mixitup/

オプションが豊富で様々な面白い動きができるんですが、まず基礎的な設置方法がよくわからなかったので、基礎的な設置だけ載せておきます。

HTMLに記述

「category-a」「category-b」とかがカテゴリ名になります。
そのまんま書いてますので、リストタグにしてもいいと思いますが。

ボタンを設置

ボタン群を先ほどの記述した上に追加記述。

jsを読み込み

GitHubに圧縮ファイルがあるので、そこからDL
その中の「dist」フォルダにある「mixitup.min.js」を任意の場所に設置。

読み込ませた下に追記します。</body>の直前に。

これせ動くはずなので、装飾はご自由に。