このテーマの特徴
このHTMLテンプレートは、ブログ記事のアイキャッチ（トップ画像）を効果的にデザインするためのものです。以下にその特徴を詳しく説明します。
1. カスタマイズ可能なデザイン:
- カラーテーマ: ベースカラーを黒（
--bg-main）、セカンダリーカラーを少し明るい黒（--bg-secondary）として、白文字（--text-main）とアクアブルーのアクセント（--text-accent）を組み合わせたダークモード風のデザインを採用しています。 - グラデーション:
--gradientで定義されたグラデーションは、カテゴリによって背景に適用できます。 - 角丸:
--content-roundedで定義された角丸は、コンテンツに優しい印象を与えます。
2. ブログ情報の表示:
- ブログタイトル:
{BlogTitle}はブログのタイトルを表示する場所です。 - アイコン:
<svg>タグで定義されたアイコンは、ブログのロゴやイメージを表示します。 - カテゴリ:
{FirstCategory}は記事の最初のカテゴリを表示する場所です。
3. 記事タイトルの強調表示:
- メインコンテンツ: 記事のタイトルを大きく表示する領域。
- タイトルフォント: 記事のタイトルは、大きなフォントサイズ、太字、行数制限などの設定で目立たせて表示されます。
4. ゲーミング風の装飾:
- ノイズパターン:
::before疑似要素で、ゲーミング風のノイズパターンを背景に適用しています。 - 透過度と重なり: ノイズパターンは透過度と
mix-blend-modeを使って、ゲーミング感を演出しています。
5. レイアウトとスタイル:
- Flexbox: Flexbox を活用して、要素を柔軟に配置し、レスポンシブなデザインを実現しています。
- フォント:
Noto Sans CJK JPを使用することで、日本語にも対応した読みやすいデザインになっています。 - 行間: 適切な行間設定で、読みやすさを向上させています。
6. カテゴリベースのスタイル変更:
body.category-ゲーム: カテゴリが「ゲーム」の場合、背景にグラデーションが適用されます。- カテゴリ別のスタイル: 他のカテゴリにもスタイルを適用することで、記事のカテゴリを視覚的に区別できます。
このテンプレートは、黒をベースとしたダークモード風のデザインと、ゲーミング風のノイズパターンを組み合わせた、スタイリッシュで目を引くアイキャッチを作成するための土台となるものです。必要に応じて、HTMLやCSSを修正し、さらに洗練されたデザインに仕上げることができます。
ソースコード
<!DOCTYPE html> <html lang="{BlogLanguage}"> <head> <meta charset="utf-8"> <style> :root { --bg-main: #000; /* 黒をベースに */ --bg-secondary: #111; /* 少し明るい黒 */ --text-main: #fff; /* 白文字 */ --text-accent: #f0f; /* アクアブルーのアクセント */ --gradient: linear-gradient(to bottom, #000000, #000033); /* グラデーション */ --content-rounded: 16px; /* 角丸 */ } * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: var(--bg-secondary); color: var(--text-main); font-weight: normal; font-family: 'Noto Sans CJK JP'; min-height: 100vh; display: flex; flex-direction: column; padding: 24px 24px; line-height: 1.4; word-break: break-word; } body.category-ゲーム { /* ゲームカテゴリのデザイン */ background-image: var(--gradient); } body > div { background-color: var(--bg-main); padding: 24px; } body > div:first-child { border-radius: var(--content-rounded) var(--content-rounded) 0 0; } body > div:last-child { border-radius: 0 0 var(--content-rounded) var(--content-rounded); } /* ヘッダーの設定 */ .header { width: 100%; display: flex; justify-content: center; align-items: center; padding-top: 18px; } .header > :first-child { margin-left: 24px; } .header > :last-child { margin-right: 24px; } .header .base { display: flex; flex-direction: row; align-items: center; } .icon > svg, .icon > img { border-radius: 50%; width: 64px; margin-right: 12px; } .blog-title { max-width: 60%; } .blog-title .title { font-size: 48px; font-weight: bold; color: var(--text-main); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .spacer { flex-grow: 1; } .category { display: flex; justify-content: center; gap: 15px; max-width: 25%; } .category span { display: block; box-sizing: border-box; padding: 2px 12px; border-radius: 8px; background-color: var(--text-accent); /* アクアブルー */ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 30px; line-height: 1.3; font-weight: bold; color: var(--bg-main); /* 黒文字 */ } .category span:empty { display: none; } /* メインコンテンツの設定 */ .main-wrapper { flex: 1; width: 100%; display: flex; padding-bottom: 56px; /* Xのシェア時には、アイキャッチの下部に タイトル要素が重ねて表示されるため空白を用意しておくことを推奨します */ } .main { width: 75%; display: flex; flex-direction: column; justify-content: center; margin: 20px auto 8px; overflow: hidden; text-align: center; } .entry-title { display: -webkit-box; -webkit-line-clamp: 4; /* 行数の上限 */ line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; word-break: auto-phrase; color: var(--text-main); font-size: 56px; line-height: 1.3; font-weight: bold; } /* ゲーミング風の装飾 */ .main::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxMDAlIj48cmVjdCBmaWxsPSJub25lIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLCAxNSUpIi8+PHJlY3QgZmlsbD0ibm9uZSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwgMzAlKSIvPjxyZWN0IGZpbGw9Im5vbmUiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsIDQ1JSkvPg08L3N2Zz4="); /* 疑似的なノイズパターン */ opacity: 0.1; /* 透明度を調整 */ mix-blend-mode: multiply; /* 重なり方を調整 */ z-index: -1; /* 背景に配置 */ } </style> </head> <body class="category-{FirstCategory}"> <div class="header"> <div class="icon"> <svg xmlns="http://www.w3.org/2000/svg" width="90" height="90" viewBox="0 0 90 90"> <path d="M45,90A45,45,0,1,1,90,45,45.05,45.05,0,0,1,45,90ZM45,5.723A39.278,39.278,0,1,0,84.281,45,39.322,39.322,0,0,0,45,5.723Z" fill="#fff"></path> <path d="M50.241,22.78a63.54,63.54,0,0,1-4.22-11.3V43.349a2.938,2.938,0,1,1-1.879-.051V11.442A63.6,63.6,0,0,1,39.914,22.78a115.111,115.111,0,0,1-7.739,13.113l2.746,37.579s2.61,2.913,10.151,2.916h.01c7.54,0,10.151-2.916,10.151-2.916l2.746-37.579A115.02,115.02,0,0,1,50.241,22.78Z" fill="#fff"></path> </svg> </div> <div class="blog-title"> <div class="title">{BlogTitle}</div> </div> <div class="spacer"></div> <div class="category"> <span>{FirstCategory}</span> </div> </div> <div class="main-wrapper"> <div class="main"> <div class="entry-title">{Title}</div> </div> </div> </body> </html>
