このテーマの特徴

このHTMLテンプレートは、ブログ記事やウェブサイトのアイキャッチとして使用できる、シンプルでカスタマイズ可能なデザインです。以下に、その特徴をわかりやすく説明します。

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

カラー: --bg-main, --bg-secondary, --text-main, --text-accent, --text-light, --accent-color などのCSS変数を使って、背景色、テキストカラー、アクセントカラーなどを簡単に変更できます。
フォント: font-family プロパティで、ブログに合うフォントを設定できます。
レイアウト: container, content, illustration の各要素の配置やサイズを調整することで、デザインを自由にカスタマイズできます。
カテゴリ別のカラー: body.category-日記, body.category-旅行 などのクラスを使って、カテゴリごとに異なるアクセントカラーを設定することができます。

2. 見栄えの良さ:

丸み: border-radius プロパティで、各要素に丸みを持たせ、優しい印象を与えています。
影: box-shadow プロパティで、各要素に影をつけることで、立体感と奥行きを出しています。
イラスト: SVGで作成されたイラストを使用することで、デザインにアクセントを加え、視覚的な魅力を高めています。

3. カテゴリ対応:

カテゴリカラー: body.category-{FirstCategory} クラスを使って、記事のカテゴリに応じてアクセントカラーを変更することができます。
カテゴリイラスト: category-{FirstCategory} .illustration svg のセクションで、カテゴリに応じたイラストを指定することができます。

4. シンプルな実装:

HTML構造: シンプルでわかりやすいHTML構造を採用し、誰でも簡単に編集・カスタマイズできます。
CSS変数: CSS変数を使用することで、デザインの変更が簡単になり、コードの可読性も向上しています。

5. 拡張性:

CSS変数: CSS変数を使って、様々な要素のデザインを簡単に調整することができます。
クラス: 各要素にクラスを付与することで、CSSで個別にスタイルを適用できます。

ソースコード

<!DOCTYPE html>
<html lang="{BlogLanguage}">
<head>
  <meta charset="utf-8">
  <style>
    :root {
      --bg-main: #f8f8f8;
      --bg-secondary: #f0f0f0;
      --text-main: #333;
      --text-accent: #f48484;
      --text-light: #fff;
      --accent-color: #f48484;
      --rounded: 16px;
      --shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Noto Sans CJK JP', sans-serif;
      background-color: var(--bg-secondary);
      color: var(--text-main);
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 24px;
    }

    /* カテゴリによるカスタマイズ */
    body.category-日記 {
      --accent-color: #84f484;
    }
    body.category-旅行 {
      --accent-color: #84a4f4;
    }

    .container {
      background-color: var(--bg-main);
      border-radius: var(--rounded);
      padding: 40px;
      max-width: 1200px;
      box-shadow: var(--shadow);
      display: flex;
      align-items: center;
      gap: 40px;
    }

    .content {
      flex-grow: 1;
    }

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

    .category {
      display: inline-block;
      background-color: var(--accent-color);
      color: var(--text-light);
      padding: 8px 16px;
      border-radius: 24px;
      font-weight: bold;
      margin-bottom: 16px;
    }

    .illustration {
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }

    .illustration svg {
      width: 150px;
      height: 150px;
      fill: var(--accent-color);
    }

    /* カテゴリごとのイラスト */
    .category-日記 .illustration svg {
      /* 日記に合うイラストを指定 */
      path {
        d: "M 10, 10 L 90, 90 M 90, 10 L 10, 90";
      }
    }

    .category-旅行 .illustration svg {
      /* 旅行に合うイラストを指定 */
      path {
        d: "M 50, 10 A 40, 40 0 0 1 90, 50 A 40, 40 0 0 1 50, 90 A 40, 40 0 0 1 10, 50 A 40, 40 0 0 1 50, 10";
      }
    }

    /* テキストの装飾 */
    .title,
    .category {
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .title {
      color: var(--text-accent);
    }
  </style>
</head>
<body class="category-{FirstCategory}">
  <div class="container">
    <div class="content">
      <h2 class="title">{Title}</h2>
      <span class="category">{FirstCategory}</span>
    </div>
    <div class="illustration">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
        <path d="M 50, 10 A 40, 40 0 0 1 90, 50 A 40, 40 0 0 1 50, 90 A 40, 40 0 0 1 10, 50 A 40, 40 0 0 1 50, 10"></path>
      </svg>
    </div>
  </div>
</body>
</html>