このテーマの特徴

このHTMLテンプレートは、ブログ記事のアイキャッチ画像とタイトルを効果的に表示するための、スタイリッシュでカスタマイズ可能なデザインを提供しています。以下に、その特徴を詳しく解説します。

1. カスタマイズ可能なデザイン:

カラーテーマ: --bg-main, --bg-secondary, --text-main, --text-accent といった変数を用いて、背景色やテキストカラーを簡単に変更できます。
フォント: --font-family 変数で、ブログ全体のフォントを変更できます。
ボーダーと影: --border-color, --shadow-color で、コンテンツの見た目調整ができます。
丸み: --content-rounded で、画像やコンテンツの角丸みを調整できます。

2. レイアウト:

ヘッダー: ブログタイトルとカテゴリを明確に表示します。
メインコンテンツ: アイキャッチ画像と記事タイトルが中央寄せで配置され、視覚的に魅力的な印象を与えます。
レスポンシブデザイン: 柔軟なレイアウトにより、様々な画面サイズに適応します。

3. 季節感表現:

カテゴリ毎の画像: seasonal-image クラスにカテゴリに応じた画像を指定できます。例えば、category-春 なら春らしい画像が表示されます。
画像プレースホルダー: 画像は https://placehold.co/ のプレースホルダー画像を使用しており、実際の画像に置き換えることができます。

4. 情報表示:

ブログタイトル: {BlogTitle} にブログのタイトルを入力します。
カテゴリ: {FirstCategory} に最初のカテゴリ名を入力します。
記事タイトル: {Title} に記事のタイトルを入力します。
投稿日時: {PostedYear}年{PostedMonth}月{PostedDate}日 に投稿日時を入力します。

ソースコード

<!DOCTYPE html>
<html lang="{BlogLanguage}">
  <head>
    <meta charset="utf-8">
    <style>
      :root {
        --bg-main: #fff;
        --bg-secondary: #f0f0f0;
        --text-main: #222;
        --text-accent: #007bff;
        --border-color: #ddd;
        --shadow-color: rgba(0, 0, 0, 0.1);
        --content-rounded: 12px;
        --font-family: '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-family);
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        padding: 24px;
        line-height: 1.4;
      }

      .category-日記 {
        background-color: #f8f8f8;
      }

      body > div {
        background-color: var(--bg-main);
        padding: 24px;
        border-radius: var(--content-rounded);
        box-shadow: 0 2px 4px var(--shadow-color);
      }

      /* ヘッダー */
      .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 24px;
      }

      .blog-title {
        font-size: 24px;
        font-weight: bold;
        color: var(--text-accent);
      }

      .category {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .category span {
        background-color: var(--text-accent);
        color: var(--bg-main);
        padding: 6px 12px;
        border-radius: 24px;
        font-size: 14px;
        font-weight: bold;
      }

      /* メインコンテンツ */
      .main-wrapper {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }

      .main {
        width: 100%;
        max-width: 800px;
        text-align: center;
      }

      .entry-title {
        font-size: 48px;
        font-weight: bold;
        line-height: 1.2;
        margin-bottom: 16px;
      }

      .entry-title span {
        display: block;
        font-size: 24px;
        font-weight: normal;
        color: var(--text-accent);
      }

      /* 季節感表現用画像 */
      .seasonal-image {
        width: 100%;
        max-width: 800px;
        margin-bottom: 24px;
        border-radius: var(--content-rounded);
        box-shadow: 0 4px 8px var(--shadow-color);
      }

      /* カテゴリ毎の画像調整 */
      .category-春 .seasonal-image {
        /* 春らしい画像を指定 */
        background-image: url("https://placehold.co/1200x630/f2f2f2/cccccc");
      }

      .category-夏 .seasonal-image {
        /* 夏らしい画像を指定 */
        background-image: url("https://placehold.co/1200x630/007bff/ffffff");
      }

      .category-秋 .seasonal-image {
        /* 秋らしい画像を指定 */
        background-image: url("https://placehold.co/1200x630/f5a975/ffffff");
      }

      .category-冬 .seasonal-image {
        /* 冬らしい画像を指定 */
        background-image: url("https://placehold.co/1200x630/c0c0c0/ffffff");
      }
    </style>
  </head>
  <body class="category-{FirstCategory}">
    <div class="header">
      <div class="blog-title">{BlogTitle}</div>
      <div class="category">
        <span>{FirstCategory}</span>
      </div>
    </div>
    <div class="main-wrapper">
      <div class="main">
        <div class="seasonal-image"></div>
        <div class="entry-title">
          {Title}
          <span>{PostedYear}年{PostedMonth}月{PostedDate}日</span>
        </div>
      </div>
    </div>
  </body>
</html>