このテーマの特徴
このHTMLテンプレートは、ブログ記事のアイキャッチ（トップ画像）に最適な構造とスタイルを備えています。主な特徴は以下の通りです。
1. カスタマイズ可能なカラーテーマ
- CSS変数 (
--bg-main,--bg-secondary,--text-main,--text-back,--accent-color) を使用して、背景色、テキスト色、アクセントカラーを簡単に変更できます。 - カテゴリごとに異なるアクセントカラーを設定することも可能です (
body.category-日記)。
2. 柔軟なレイアウト
- ヘッダー、メインコンテンツ、フッターの3つのセクションに分かれており、それぞれに適したスタイルが適用されています。
- ヘッダーには、ブログのアイコン、タイトル、カテゴリを表示する領域があり、
flexレイアウトによって要素を適切に配置しています。 - メインコンテンツエリアには、記事のタイトルと幾何学模様を組み合わせた視覚的なアクセントが設けられています。
3. 記事タイトルの強調表示
- 記事タイトル (
entry-title) は、フォントサイズを大きくし、太字にすることで視覚的に強調しています。 line-clampを使用して、長いタイトルを4行に制限し、見やすさを確保しています。
4. 幾何学模様のアクセント
geometric-patternクラスを用いて、記事の背景に幾何学模様を組み込み、視覚的なアクセントを提供しています。- 模様の色はアクセントカラー (
--accent-color) によって設定され、透明度 (opacity) を調整することで、背景と調和するようにカスタマイズできます。
5. SEOに配慮した構造
lang属性を使用して言語を指定し、検索エンジンに情報を提供しています。meta charset="utf-8"を指定することで、日本語などのマルチバイト文字を正しく表示できるようにしています。- 各要素に適切なクラス名とID属性を設定することで、CSSやJavaScriptによる制御を容易にしています。
6. モバイル対応
box-sizing: border-boxを使用することで、パディングやボーダーが要素の幅に含まれるように設定し、レスポンシブデザインに適しています。min-height: 100vhを使用して、画面全体の高さを確保することで、モバイル端末でもコンテンツが切れるのを防いでいます。
このテンプレートは、シンプルながらもカスタマイズ可能な設計となっており、様々なブログのデザインに適用可能です。必要に応じて、HTML、CSS、JavaScript を追加することで、より高度な機能やデザインを実現できます。
ソースコード
<!DOCTYPE html> <html lang="{BlogLanguage}"> <head> <meta charset="utf-8"> <style> :root { --bg-main: #f5f5f5; --bg-secondary: #222; --text-main: #222; --text-back: #fff; --accent-color: #f08080; /* アクセントカラー */ --content-rounded: 12px; } * { 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-日記 { --accent-color: #f0e68c; /* カテゴリ「日記」のアクセントカラー */ } body > div { background-color: var(--bg-main); } 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-back); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 30px; line-height: 1.3; font-weight: bold; color: var(--text-main); } .category span:empty { display:none; } .main-wrapper { flex: 1; width: 100%; display:flex; padding-bottom: 56px; } .main { width: 75%; display: flex; flex-direction: column; justify-content: center; margin: 20px auto 8px; overflow: hidden; text-align: center; position: relative; } /* 幾何学模様 */ .geometric-pattern { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; /* クリックイベントを透過 */ } .geometric-pattern svg { width: 100%; height: 100%; fill: var(--accent-color); opacity: 0.15; /* 透明度調整 */ } .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; } </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="#333"></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="#333"></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 class="geometric-pattern"> <svg viewBox="0 0 100 100"> <circle cx="50" cy="50" r="40" /> <rect x="10" y="10" width="80" height="80" /> <polygon points="50,10 10,90 90,90" /> </svg> </div> </div> </div> </body> </html>
