From c9de3dda615f05822c35baf4bdbf4d8fa5298f5c Mon Sep 17 00:00:00 2001 From: Yasutake Yohei <61961825+yasutakeyohei@users.noreply.github.com> Date: Fri, 26 Jun 2026 00:08:45 +0900 Subject: OGP画像: タイトルをメインに、スローガンを小さく横並びに MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - タイトル 48px 太字を最上部に - スローガンは24pxで横並び(だれもが しあわせに 暮らせるまちへ) - グラデーションカラーでアクセント --- src/pages/og/[slug].png.ts | 69 +++++++++++++++++----------------------------- 1 file changed, 25 insertions(+), 44 deletions(-) diff --git a/src/pages/og/[slug].png.ts b/src/pages/og/[slug].png.ts index 0481681..3c695f0 100644 --- a/src/pages/og/[slug].png.ts +++ b/src/pages/og/[slug].png.ts @@ -74,70 +74,49 @@ export async function GET({ params }: { params: { slug: string } }) { flex: "1", }, children: [ - // 3-line slogan as the main element + // Page title as the main element + { + type: "div", + props: { + style: { + fontSize: "48px", + fontWeight: "700", + lineHeight: "1.2", + letterSpacing: "-0.02em", + }, + children: title, + }, + }, + // 3-line slogan (inline, smaller) { type: "div", props: { style: { display: "flex", - flexDirection: "column", - gap: "4px", + gap: "14px", + fontSize: "24px", + fontWeight: "500", + color: "#a5b4fc", }, children: [ + { type: "div", props: { children: "だれもが" } }, { type: "div", props: { - style: { - fontSize: "46px", - fontWeight: "800", - lineHeight: "1.15", - color: "#ffffff", - }, - children: "だれもが", - }, - }, - { - type: "div", - props: { - style: { - fontSize: "46px", - fontWeight: "800", - lineHeight: "1.15", - color: "#c7d2fe", - }, + style: { color: "#c7d2fe" }, children: "しあわせに", }, }, { type: "div", props: { - style: { - fontSize: "46px", - fontWeight: "800", - lineHeight: "1.15", - color: "#a5b4fc", - }, + style: { color: "#e0e7ff" }, children: "暮らせるまちへ", }, }, ], }, }, - // Page title - { - type: "div", - props: { - style: { - fontSize: "26px", - fontWeight: "500", - lineHeight: "1.3", - color: "#e0e7ff", - paddingTop: "8px", - borderTop: "1px solid rgba(255,255,255,0.15)", - }, - children: title, - }, - }, // Name + domain { type: "div", @@ -147,15 +126,17 @@ export async function GET({ params }: { params: { slug: string } }) { gap: "16px", fontSize: "20px", fontWeight: "400", - color: "rgba(255,255,255,0.55)", + color: "rgba(255,255,255,0.45)", + paddingTop: "12px", + borderTop: "1px solid rgba(255,255,255,0.1)", }, children: [ { type: "div", props: { children: "小平市議 安竹洋平" } }, { type: "div", props: { - children: "yasutakeyohei.com", style: { opacity: "0.6" }, + children: "yasutakeyohei.com", }, }, ], -- cgit v1.3.1