このテーマの特徴
このHTMLテンプレートは、ブログ記事のアイキャッチ画像として使用できる、レスポンシブでスタイリッシュなデザインとなっています。主な特徴は以下の通りです。
1. カスタマイズ可能なデザイン
- カラーテーマ:
--bg-main、--bg-secondary、--text-main、--text-highlight、--accent-colorなどのCSS変数を用いて、背景色、テキストカラー、アクセントカラーを簡単に変更できます。 - フォント:
font-familyプロパティでフォントを変更できます。 - 丸み:
--content-rounded変数でコンテンツエリアの丸みを調整できます。 - ロゴ:
.icon内にロゴ画像またはSVGを挿入できます。
2. カテゴリベースのカスタマイズ
- 背景色:
body.category-{Category}を使用して、カテゴリ別に背景色を変更できます。 - 背景画像:
.background-imageを使用して、カテゴリ別に背景画像を設定できます。プレースホルダー画像が使用されており、実際の画像に置き換える必要があります。
3. レスポンシブデザイン
- テンプレートは、
flexboxを使用して、様々な画面サイズに適応するようになっています。 - モバイルフレンドリー: テキストは適切なサイズに調整され、画像も適切なサイズで表示されます。
4. 見やすいレイアウト
- コンテンツエリアの強調: コンテンツエリアは背景色と丸みによって他の要素から視覚的に区別されています。
- タイトルの強調: タイトルは大きなフォントサイズとアクセントカラーの線で強調されています。
- カテゴリの表示: カテゴリはわかりやすく表示されています。
5. SEOに配慮した構造
- 見出しタグ: 見出しタグ(
h1、h2) は、適切な箇所に使用されています。 - alt属性: 画像には、
alt属性を使用することを推奨します。
その他の特徴
- オーバーフローの制御: テキストが枠内に収まらない場合、
overflow属性で適切な処理がされます。 - 空白の確保: シェアボタンなどの要素が表示されるために、
padding-bottomが設定されています。
テンプレートの使用
このテンプレートは、ブログ記事のアイキャッチ画像として使用できます。
- ブログプラットフォームのテーマやプラグインを使って、このテンプレートを適用することができます。
- カスタマイズ可能な要素を調整することで、ブログのスタイルに合わせたアイキャッチ画像を作成することができます。
改善点
- 画像の最適化: 画像サイズはできるだけ小さくし、読み込み時間を短縮する必要があります。
- アクセシビリティ: より多くのユーザーがアクセスできるように、アクセシビリティの改善が必要になる場合があります。
- SEOの最適化: SEOに配慮して、メタタグや画像のalt属性などを設定する必要があります。
ソースコード
<!DOCTYPE html> <html lang="{BlogLanguage}"> <head> <meta charset="utf-8"> <style> :root { --bg-main: #f7f2e8; --bg-secondary: #e9d0b2; --text-main: #333; --text-highlight: #e67e22; --accent-color: #2980b9; --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; overflow: hidden; } /* カテゴリによるカスタマイズ */ body.category-レシピ { background-color: #fdd8b5; } body.category-レストラン { background-color: #dfe6e9; } body.category-フード { background-color: #f5f5f5; } /* コンテンツ部分の共通設定 */ body > div { background-color: var(--bg-main); padding: 24px; border-radius: var(--content-rounded); } 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-highlight); 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: 3; /* 行数の上限 */ line-clamp: 3; -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; } .entry-title::before { content: ""; display: block; width: 100%; height: 10px; margin-bottom: 16px; background-color: var(--accent-color); border-radius: 10px; } /* 背景画像の設定 */ .background-image { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; opacity: 0.3; background-size: cover; background-repeat: no-repeat; background-position: center; } /* カテゴリ別の背景画像設定 */ body.category-レシピ .background-image { background-image: url("https://placehold.jp/1200x630.png?text=レシピ画像"); } body.category-レストラン .background-image { background-image: url("https://placehold.jp/1200x630.png?text=レストラン画像"); } body.category-フード .background-image { background-image: url("https://placehold.jp/1200x630.png?text=フード画像"); } </style> </head> <body class="category-{FirstCategory}"> <div class="background-image"></div> <div class="header"> <div class="icon"> <!-- ここにロゴ画像か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>
