このテーマの特徴

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

1. グラデーション背景:

--bg-gradient-start と --bg-gradient-end 変数で定義された、青色からピンク色へのグラデーション背景が目を引きます。
このグラデーションは、視覚的なアクセントを加え、記事のタイトルやカテゴリーを際立たせます。

2. タイトルとカテゴリー:

title クラスの h1 要素は、記事のタイトルを表示します。フォントサイズが大きく、太字で表示されるため、視覚的に強調されます。
category クラスの p 要素は、記事のカテゴリーを表示します。タイトルよりも小さく、淡い色で表示されるため、タイトルとのバランスが取れています。

3. テキストの可読性:

--text-color 変数で定義された白色のテキストは、グラデーション背景と対照的に、読みやすくなっています。
--font-family 変数で定義された 'Noto Sans CJK JP' フォントは、日本語を含む様々な言語に適しており、モダンな印象を与えます。

4. レイアウトとスタイル:

title-wrapper クラスは、タイトルとカテゴリーを囲む、半透明な背景を持つ枠を提供します。
border-radius 属性によって、枠に丸みを持たせ、柔らかな印象を与えています。
display: flex と justify-content: center を使用することで、タイトルとカテゴリーを画面中央に配置し、バランスの取れたレイアウトを実現しています。

5. カスタマイズ性:

CSS変数を使用することで、グラデーションの色、テキストの色、フォントなど、様々な要素を簡単にカスタマイズできます。
{BlogLanguage} や {Title}、 {FirstCategory} などのプレースホルダーを使用することで、ブログ記事の言語、タイトル、カテゴリーを動的に変更することができます。

まとめ:

このHTMLテンプレートは、グラデーション背景、視覚的に魅力的なタイトルとカテゴリー、そして高いカスタマイズ性により、魅力的なアイキャッチ画像を作成するための優れた基盤となります。ブログやウェブサイトの見た目を向上させ、読者の興味を引くのに役立ちます。

ソースコード

<!DOCTYPE html>
<html lang="{BlogLanguage}">
  <head>
    <meta charset="utf-8">
    <style>
      :root {
        --bg-gradient-start: #2196F3; /* 青色のグラデーション開始色 */
        --bg-gradient-end: #E91E63; /* ピンク色のグラデーション終了色 */
        --text-color: #FFFFFF; /* タイトルの色 */
        --font-family: 'Noto Sans CJK JP', sans-serif; /* フォント設定 */
      }

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

      body {
        background: linear-gradient(to right, var(--bg-gradient-start), var(--bg-gradient-end));
        color: var(--text-color);
        font-family: var(--font-family);
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
      }

      .title-wrapper {
        background-color: rgba(0, 0, 0, 0.5); /* 背景を半透明にする */
        padding: 30px;
        border-radius: 10px;
      }

      .title {
        font-size: 60px;
        font-weight: bold;
        line-height: 1.2;
      }

      .category {
        font-size: 24px;
        margin-top: 10px;
        color: var(--text-color);
      }
    </style>
  </head>
  <body>
    <div class="title-wrapper">
      <h1 class="title">{Title}</h1>
      <p class="category">{FirstCategory}</p>
    </div>
  </body>
</html>