このテーマの特徴

このHTMLテンプレートは、ブログ記事やウェブサイトのアイキャッチ画像として使用できる、視覚的に魅力的なデザインとなっています。以下に、このテンプレートの特徴を詳しく説明します。

1. シンプルでモダンなデザイン

グラデーション背景：メインカラーとセカンダリカラーを用いたグラデーション背景を採用することで、洗練された印象を与えています。
大きな見出し：記事のタイトルを大きく表示することで、ユーザーの注目を集めます。
簡潔なレイアウト：要素を最小限に抑え、スッキリとした見やすいレイアウトを実現しています。
アニメーション効果：円形のアニメーションが視覚的なアクセントとなり、ユーザーの興味を引きつけます。

2. カスタマイズ可能な要素

テンプレートは、HTMLの変数とCSSの変数を用いることで、容易にカスタマイズ可能です。
メインカラー、セカンダリカラー、テキストカラー、アニメーション時間などを変更できます。
記事のタイトル、カテゴリ、画像などのコンテンツも簡単に差し替えられます。

3. 応答性の高いレイアウト

メディアクエリを用いることで、様々なデバイスに対応するレスポンシブデザインを実現しています。
スマートフォンなど、画面幅が狭いデバイスでも、レイアウトが崩れることなく表示されます。

全体的な評価

このHTMLテンプレートは、視覚的に魅力的なアイキャッチ画像を簡単に作成できる、優れたテンプレートです。カスタマイズ性が高く、レスポンシブデザインにも対応しているため、様々な用途で活用できます。

ソースコード

<!DOCTYPE html>
<html lang="{BlogLanguage}">
<head>
  <meta charset="utf-8">
  <title>{BlogTitle} - {Title}</title>
  <style>
    :root {
      --bg-primary: #003368; /* メインカラー */
      --bg-secondary: #d4e3f0; /* セカンダリカラー */
      --text-color: #fff; /* テキストカラー */
      --animation-duration: 2s; /* アニメーション時間 */
    }

    body {
      margin: 0;
      font-family: 'Noto Sans CJK JP', sans-serif;
      background: linear-gradient(to right, #003368, #006699);
      color: var(--text-color);
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

    .container {
      position: relative;
      width: 1200px;
      height: 630px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      overflow: hidden;
    }

    .title {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 80px;
      font-weight: bold;
      text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      animation: fade-in 1s ease-in-out forwards;
    }

    .category {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 24px;
      font-weight: bold;
      color: var(--bg-secondary);
      text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    }

    .circles {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    .circle {
      position: absolute;
      background-color: var(--bg-secondary);
      border-radius: 50%;
      opacity: 0.5;
      animation: circle-animation var(--animation-duration) linear infinite;
    }

    /* アニメーション */
    @keyframes fade-in {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    @keyframes circle-animation {
      0% {
        transform: translate(0, 0) scale(1);
      }
      50% {
        transform: translate(100px, -50px) scale(1.2);
      }
      100% {
        transform: translate(0, 0) scale(1);
      }
    }

    @media screen and (max-width: 768px) {
      .title {
        font-size: 50px;
      }

      .category {
        font-size: 18px;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1 class="title">{Title}</h1>
    <p class="category">{FirstCategory}</p>
    <div class="circles">
      <div class="circle" style="width: 100px; height: 100px; top: 200px; left: 100px;"></div>
      <div class="circle" style="width: 150px; height: 150px; top: 100px; left: 300px;"></div>
      <div class="circle" style="width: 80px; height: 80px; top: 400px; left: 500px;"></div>
    </div>
  </div>
</body>
</html>