"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { code: "code", h1: "h1", h2: "h2", h3: "h3", hr: "hr", li: "li", p: "p", pre: "pre", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "下は、人気ブログの構成についての内容を .mdx（Markdown + JSX）形式で出力したものです。Next.js の App Router + next-mdx-remote などで使用できる構成を想定しています。" }), "\n", _jsx(_components.p, { children: "⸻" }), "\n", _jsx(_components.h1, { children: "人気ブログのUI構成ガイド" }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "🏠 トップページ" }), "\n", _jsx(_components.h3, { children: "構成要素" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "ヒーローセクション（キャッチコピー、画像）" }), "\n", _jsx(_components.li, { children: "最新記事一覧（カード形式）" }), "\n", _jsx(_components.li, { children: "人気記事セクション" }), "\n", _jsx(_components.li, { children: "カテゴリー・タグリンク" }), "\n"] }), "\n", _jsx(_components.h3, { children: "記事カード例" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "\n \n \n

記事タイトル

2025年3月23日

記事の概要テキストがここに入ります...

\n \n\n" }) }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { children: "📚 サイドバー" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "\n" }) }), "\n", _jsx(_components.p, { children: "⸻" }), "\n", _jsx(_components.h3, { children: "🧭 ヘッダー" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "\n

MyBlog

\n \n

\n ☰\n \n \n \n

\n\n" }) }), "\n", _jsx(_components.p, { children: "⸻" }), "\n", _jsx(_components.h3, { children: "🦶 フッター" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "\n" }) }), "\n", _jsx(_components.p, { children: "⸻" }), "\n", _jsx(_components.h3, { children: "🗂️ カテゴリーページ（例：/category/[slug]）" }), "\n", _jsx(_components.p, { children: "•\t指定カテゴリーの記事をリスト化\n•\tカテゴリ名をタイトル表示\n•\tメタ情報の最適化（SEO）" }), "\n", _jsx(_components.p, { children: "⸻" }), "\n", _jsx(_components.h3, { children: "📅 アーカイブ" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "const archives = [\n { year: 2025, month: 3, count: 4 },\n { year: 2025, month: 2, count: 2 },\n]\n\n

\n \n {a.year}年{a.month}月（{a.count}件）\n \n

\n" }) }), "\n", _jsx(_components.p, { children: "⸻" }), "\n", _jsx(_components.h3, { children: "🏷️ タグ一覧" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "

\n React\n Next.js\n

\n" }) }), "\n", _jsx(_components.p, { children: "⸻" }), "\n", _jsx(_components.h3, { children: "🔒 プライバシーポリシー & 利用規約" }), "\n", _jsx(_components.p, { children: "•\t固定ページとして実装（/privacyや/terms）\n•\tMarkdown or Contentlayer で管理\n•\tプライバシーポリシーには以下を含める:\n•\t使用ツール（Google Analytics など）\n•\t管理者情報（可能であれば）\n•\tデータ収集・利用方針" }), "\n", _jsx(_components.p, { children: "⸻" }), "\n", _jsx(_components.h3, { children: "🖼️ 画像の使い方" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "

\n \n

\n これは記事内の画像キャプションです。\n

\n\n" }) }), "\n", _jsx(_components.p, { children: "⸻" }), "\n", _jsx(_components.h3, { children: "✨ その他ベストプラクティス" }), "\n", _jsx(_components.p, { children: "•\tSEO対策：metadata API の活用\n•\tJSON-LD による構造化データ\n•\tnext/image での画像最適化\n•\tApp Router + SSG で高速表示\n•\tVercel向けにISRやEdge Functionの活用も◎" }), "\n", _jsx(_components.p, { children: "⸻" }), "\n", _jsx(_components.p, { children: "💡 カスタムデザインや構成のモックアップが欲しい場合は、お気軽にリクエストしてください！" }), "\n", _jsx(_components.hr, {}), "\n", _jsxs(_components.p, { children: ["この ", _jsx(_components.code, { children: ".mdx" }), " は、", _jsx(_components.code, { children: "app/blog/layout.tsx" }), " などでレイアウトラップしつつ、", _jsx(_components.code, { children: "MDXRemote" }), " でレンダリングできる形式です。"] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };