このテーマの特徴
このHTMLテンプレートは、レトロな雰囲気を持つアイキャッチ用のテンプレートです。主な特徴は以下の通りです。
1. レトロな雰囲気を醸し出すデザイン
- フォント: "Noto Sans CJK JP" を使用し、レトロな雰囲気と現代的なバランスを保ちます。
- カラーパレット: 薄いピンクとグレーを基調とし、アクセントカラーとして薄いパープルを使用することで、懐かしさと上品さを演出しています。
- グラデーション: ヘッダーに薄いピンクから薄いグレーへのグラデーションを適用することで、奥行きとレトロな雰囲気を強調しています。
- 影と枠線: ヘッダー、メインコンテンツ、カテゴリーラベルに影や枠線を使用することで、レトロなポスターやチラシのような立体感とノスタルジックな印象を与えています。
- アイコン: レトロな雰囲気のSVGアイコンを使用することで、視覚的なアクセントを加えています。
2. 可読性と視認性を重視したレイアウト
- シンプルな構造: ヘッダー、メインコンテンツ、フッターの3つのセクションに分け、情報の整理と視認性を高めています。
- 適切な余白: 各要素間に適切な余白を設けることで、視覚的なバランスを保ち、読者の視線を誘導しています。
- 文字サイズと行間: メインタイトル、カテゴリー、記事タイトルの文字サイズと行間を調整することで、情報を読みやすくしています。
- 文字の切り詰め: タイトルが長くなった場合、省略記号で適切に切り詰めることで、レイアウトの崩れを防ぎ、可読性を維持しています。
3. カスタマイズしやすい構造
- CSS変数: カラーやフォント、サイズなどをCSS変数で定義することで、簡単にデザインを変更できます。
- クラス名: 各要素にわかりやすいクラス名を設定することで、CSSによるスタイルの変更やJavaScriptによる操作を容易に行えます。
- カテゴリー対応:
category-{FirstCategory}のようにカテゴリーに合わせたスタイルを適用することが可能です。
4. SEOに配慮した記述
- meta charset: UTF-8 を指定することで、日本語などの多言語に対応しています。
- 言語指定:
lang="{BlogLanguage}"で言語を指定することで、検索エンジンの理解を助けます。 - 画像のalt属性: 画像にalt属性を記述することで、画像が表示されない場合でも内容を理解できるようにしています。
その他:
このテンプレートは、レトロな雰囲気で、かつ可読性とカスタマイズ性に優れたデザインとなっているため、様々なブログやウェブサイトで活用できます。
ソースコード
<!DOCTYPE html> <html lang="{BlogLanguage}"> <head> <meta charset="utf-8"> <style> :root { --bg-main: #F5F5F5; /* 薄いグレー */ --bg-secondary: #D8BFD8; /* 薄いピンク */ --text-main: #333; /* ダークグレー */ --text-accent: #663366; /* 薄いパープル */ --border-color: #ccc; /* 薄いグレー */ --content-rounded: 16px; --font-retro: 'Noto Sans CJK JP', sans-serif; --font-modern: 'Noto Sans CJK JP', sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: var(--bg-secondary); color: var(--text-main); font-family: var(--font-retro); min-height: 100vh; display: flex; flex-direction: column; padding: 24px 24px; line-height: 1.4; word-break: break-word; } /* カテゴリによるカスタマイズ */ body.category-日記 { background-color: #F0F0F0; /* 薄いグレー */ } /* コンテンツ部分の共通設定 */ body > div { background-color: var(--bg-main); border: 1px solid var(--border-color); 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%; font-family: var(--font-modern); } .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; 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); font-family: var(--font-modern); } .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; } .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; font-family: var(--font-modern); } /* レトロな雰囲気を出すための装飾 */ .header, .main { /* 影の追加 */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .header { background-image: linear-gradient(to bottom, #D8BFD8, #F5F5F5); /* 背景にグラデーション */ } .category span { /* 枠線の追加 */ border: 1px solid var(--border-color); } .entry-title { /* 文字に影 */ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } </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> </div> </body> </html>
