プラグイン

これまで配布しているフロントページ用パターンの新着記事は、PC時3列ずつ、タブレットサイズで2列、スマホで1列の表示をする一つのみです。今回追加するパターンは、①PC時3列ずつ、タブレットサイズ以下は2列表示②PC時4列ずつ、タブレットサイズ以下は2列表示となります。スマホで2列表示したかった方向けのパターンになります。また、今回追加するパターンはCSSのsubgrid（サブグリッド）を使用しているので、行方向（横並び）の見た目がこれまでよりもきれいに揃うようになります。記事ごとにタイトルや詳細の量が異なっていても、多い方に合わせて縦の余白が揃う様になっています。

バリアブルフォントのカスタマイズ例として単に太さを変えるだけでなく、テキストの縁取りや版ズレ風のコードも紹介しています。grayishのCSSプラグインをver1.0.9にアップデートすることで、自分でCSSを書かずに追加CSSクラスを使用可能です。

ブログのフロントページによくあるセクション（About、Pickup、NewPost、Rankingなど）別にすぐに使えるパターンデータを用意しました。パターンと合わせて手軽にデザインを再現できるCSSプラグインも配布します。今回紹介したパターンで、デモのフロントページを作ってみたので是非ご覧になってください。パターンをペタペタと貼り付けるだけで作れます。記事内にあるご利用の注意事項をよくご確認の上、ご利用ください。