このテーマの特徴
このHTMLテンプレートは、ブログ記事のアイキャッチ画像として使用できる、視覚的に魅力的でレスポンシブなデザインを提供します。以下に、テンプレートの主な特徴を詳しく説明します。
1. カスタマイズ可能なデザイン:
- カラーテーマ:
--bg-main,--bg-secondary,--text-main,--text-backなどのCSS変数を使用することで、背景色、テキスト色、セカンダリカラーを簡単に変更できます。 - カテゴリ別カラー:
body.category-春,body.category-夏といったクラスを使って、各カテゴリに異なる背景色を割り当てられます。--spring-color,--summer-colorなどの変数で、カテゴリごとの色を定義します。 - フォント:
font-familyプロパティで、ブログのフォントを変更できます。 - 画像:
background-imageプロパティで、背景画像を変更できます。 - アイコン:
iconクラスのSVGまたは画像を変更することで、ブログのアイコンを変更できます。
2. レスポンシブデザイン:
- Flexbox:
display: flexを使用し、コンテンツが異なる画面サイズに適応するようにレイアウトされています。 - メディアクエリ: メディアクエリを使用することで、異なる画面サイズでのデザインの調整が可能です。
3. アクセシビリティ:
- 適切なセマンティックタグ:
header,main,spanなどのセマンティックなHTMLタグを使用することで、コードの可読性とアクセシビリティを高めています。 - ARIA属性: 必要な場合は、ARIA属性を追加することで、アクセシビリティを向上させることができます。
4. わかりやすい構造:
- HTMLのセクション分け:
header,mainなどのセクションタグを使い、コンテンツを論理的に構成しています。 - CSSのモジュール性: クラス名を使用することで、CSSコードを整理し、再利用性を高めています。
5. その他の特徴:
- 丸みを帯びたコーナー:
border-radiusプロパティで、コンテンツに丸みを帯びたコーナーを適用しています。 - テキストの省略:
overflow: hidden,white-space: nowrap,text-overflow: ellipsisを使用することで、長いテキストを省略しています。 - 画像のぼかし効果:
filter: blur(5px)を使用し、背景画像にぼかし効果を適用しています。
6. 使用方法:
- ブログタイトル:
{BlogTitle}を実際のブログタイトルに置き換えます。 - カテゴリ:
{FirstCategory}を最初のカテゴリ名に置き換えます。 - 記事タイトル:
{Title}を記事タイトルに置き換えます。 - 画像:
background-imageプロパティのURLを変更して、背景画像を変更します。 - アイコン:
iconクラスのSVGまたは画像を、ブログのアイコンに変更します。
このテンプレートは、カスタマイズ可能なデザイン、レスポンシブなレイアウト、アクセシビリティ機能など、ブログアイキャッチに必要な機能を備えています。ブログのコンテンツとデザインに合うように、テンプレートを調整して活用してみてください。
ソースコード
<!DOCTYPE html> <html lang="{BlogLanguage}"> <head> <meta charset="utf-8"> <style> :root { --bg-main: #FFF; --bg-secondary: #003368; --text-main: #003368; --text-back: #d4e3f0; --content-rounded: 12px; --spring-color: #f7d4e3; --summer-color: #e3f7f7; --autumn-color: #f7e3d4; --winter-color: #e3e3f7; } * { margin: 0; padding: 0; } body { background-color: var(--bg-secondary); color: var(--text-main); font-weight: normal; font-family: 'Noto Sans CJK JP'; box-sizing: border-box; min-height: 100vh; display: flex; flex-direction: column; padding: 24px 24px; line-height: 1.4; word-break: break-word; } body.category-春 { --main-bg: var(--spring-color); } body.category-夏 { --main-bg: var(--summer-color); } body.category-秋 { --main-bg: var(--autumn-color); } body.category-冬 { --main-bg: var(--winter-color); } /* コンテンツ部分の共通設定 */ 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; } .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; } .background-image { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-size: cover; background-repeat: no-repeat; filter: blur(5px); opacity: 0.3; } /* カテゴリ別デザイン */ body.category-春 .background-image { background-image: url("https://images.unsplash.com/photo-1519985176271-adb1088fa94c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1200&q=80"); } body.category-夏 .background-image { background-image: url("https://images.unsplash.com/photo-1525966222102-816253382031?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1200&q=80"); } body.category-秋 .background-image { background-image: url("https://images.unsplash.com/photo-1527307641433-0e78e00ff922?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1200&q=80"); } body.category-冬 .background-image { background-image: url("https://images.unsplash.com/photo-1544718109-16254c742710?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1200&q=80"); } </style> </head> <body class="category-{FirstCategory}"> <div class="background-image"></div> <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>
