このテーマの特徴
このHTMLテンプレートは、ブログ記事のアイキャッチ部分をデザインするためのものです。以下に特徴を詳しく説明します。
1. カスタマイズ可能なカラーとデザイン
- CSS変数:
--bg-main,--bg-secondary,--text-main,--text-back,--accent-color-1,--accent-color-2,--accent-color-3といったCSS変数を用いることで、ブログのテーマカラーやデザインを簡単に変更できます。 - グラデーション背景: アイキャッチの背景には、
linear-gradientを使用したグラデーションが適用されています。 3色のアクセントカラー--accent-color-1,--accent-color-2,--accent-color-3を調整することで、さまざまな色合いのグラデーションを作成できます。 - 形状調整: アイキャッチの形状は、
clip-pathプロパティを使用してカスタマイズ可能です。テンプレートには、3つのバリエーションが用意されています。
2. ブログ情報と記事情報の表示
- ブログタイトル:
{BlogTitle}にブログタイトルが表示されます。 - カテゴリ:
{FirstCategory}に最初のカテゴリが表示されます。 - 記事タイトル:
{Title}に記事タイトルが表示されます。 - 投稿日時:
{PostedYear},{PostedMonth},{PostedDate}に投稿日時が表示されます。
3. レスポンシブデザイン
- メディアクエリ:
@mediaを使用して、画面サイズに合わせてレイアウトが調整されるようになっています。特に、スマートフォンなど、画面幅が狭いデバイスでは、アイキャッチの高さやテキストのフォントサイズが調整されます。
4. 可読性とアクセシビリティ
- フォント: 読みやすいように、
'Noto Sans CJK JP'というフォントを使用しています。 - 行間:
line-heightを設定することで、行間のバランスを保ち、読みやすさを向上させています。 - 文字サイズ: 適切な文字サイズを設定し、視認性を高めています。
- 見出しレベル:
h2を使用してアイキャッチのタイトルを表現し、適切な見出しレベルとなっています。
5. バリエーション
eyecatch-variation-2,eyecatch-variation-3: アイキャッチの形状を簡単に変更できるように、3つのバリエーションが用意されています。
6. シンプルな構造
- セクション分け:
header,main-wrapper,mainなどのセクションに分けることで、HTMLコードを整理し、可読性を高めています。
7. 拡張性
- カスタムCSS: 独自のCSSを追加することで、さらに詳細なデザインのカスタマイズが可能です。
- JavaScript: JavaScript を追加することで、インタラクティブな要素やアニメーションなどを実現できます。
総括:
このテンプレートは、ブログ記事のアイキャッチ部分をデザインするための、柔軟性が高く、カスタマイズしやすい基盤を提供します。ブログのテーマや記事に合わせて、カラー、デザイン、形状、情報を自由に調整することができます。
ソースコード
<!DOCTYPE html> <html lang="{BlogLanguage}"> <head> <meta charset="utf-8"> <style> :root { --bg-main: #FFF; --bg-secondary: #003368; --text-main: #003368; --text-back: #d4e3f0; --accent-color-1: #FF6347; /* オレンジ */ --accent-color-2: #00CED1; /* ターコイズ */ --accent-color-3: #FFC0CB; /* ピンク */ --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-日記 { background-color: #fff; } /* コンテンツ部分の共通設定 */ 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; } /* アイキャッチ用スタイル */ .eyecatch { position: relative; width: 100%; height: 300px; /* 高さ調整 */ margin-bottom: 24px; } .eyecatch-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( 45deg, var(--accent-color-1), var(--accent-color-2), var(--accent-color-3) ); /* グラデーション背景 */ clip-path: polygon( 0 0, 100% 0, 100% 70%, 70% 100%, 0 100% ); /* 形状調整 */ } .eyecatch-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 1; color: var(--bg-main); } .eyecatch-title { font-size: 48px; font-weight: bold; font-family: 'Noto Sans CJK JP'; margin-bottom: 16px; } .eyecatch-subtitle { font-size: 24px; font-weight: normal; font-family: 'Noto Sans CJK JP'; } /* バリエーション用スタイル */ .eyecatch-variation-2 { /* バリエーション2のスタイル */ .eyecatch-bg { clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100% ); /* 形状調整 */ } } .eyecatch-variation-3 { /* バリエーション3のスタイル */ .eyecatch-bg { clip-path: circle(50% 50%); /* 形状調整 */ } } /* レスポンシブ対応 */ @media (max-width: 768px) { .eyecatch { height: 200px; /* 高さ調整 */ } .eyecatch-title { font-size: 32px; } .eyecatch-subtitle { font-size: 18px; } } </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="eyecatch eyecatch-variation-1"> <div class="eyecatch-bg"></div> <div class="eyecatch-content"> <h2 class="eyecatch-title">{Title}</h2> <p class="eyecatch-subtitle"> {PostedYear}年{PostedMonth}月{PostedDate}日 </p> </div> </div> <div class="entry-title">{Title}</div> </div> </div> </body> </html>
