Madiann（マディアン）

概要

ブログの構築に適した、microCMS用のテンプレートです。

機能

• ユーザーによる記事に対するコメントの投稿
• サイト内全文検索
• 下書き状態の記事のプレビュー
• 記事一覧ページでのページネーション

こだわり

各記事の冒頭に表示する画像に対して、自作の画像最適化コンポーネントを使用しています。

当画像最適化コンポーネントは、当テンプレートを閲覧しているデバイスの画面のサイズに合わせて、最適なサイズのWebP形式の画像を表示します。

当テンプレートはデプロイ先としてCloudflare Pagesを利用していますが、Cloudflare PagesはNode.jsでファイルを操作するfsモジュールが使用できないため、sharpやnode-canvasなどの画像のサイズやファイルの形式を変換するライブラリが使用でません。

そのため、microCMSにアップロードした画像に対して使用できるimigixのAPIを利用して、画像の最適化を行なっています。

また、microCMSのCXOの方が「スケルトンテンプレートがほしいという要望がちょいちょい来ている」とツイートしていたため、シンプルなデザインにしました。