このテーマの特徴

このHTMLテンプレートは、ブログ記事やウェブサイトのアイキャッチ（注目を集める画像や動画など）を作成するための、シンプルでカスタマイズ可能なテンプレートです。主な特徴は以下の通りです。

1. 視覚的に魅力的なデザイン

グラデーション背景: linear-gradient を使用して、視覚的に魅力的なグラデーション背景を適用しています。色の組み合わせは、--bg-gradient-start と --bg-gradient-end 変数で簡単に変更できます。
丸みのある角: border-radius プロパティを使って、角を丸くし、ソフトな印象を与えています。
影: box-shadow を使用して、カードに立体感と奥行きを与えています。

2. カスタマイズしやすい設計

変数: CSS変数 (--bg-main, --text-main, --button-bg など) を使用することで、デザインの各要素の色を簡単に変更できます。
クラスによるカスタマイズ: category-{FirstCategory} というクラスを使用して、記事のカテゴリに応じてデザインを変更できます。テンプレートでは、category-日記 の例が示されていますが、他のカテゴリを追加したり、既存のカテゴリのカスタマイズを追加したりできます。
コンテンツの置き換え: {Title}, {FirstCategory} などのプレースホルダーは、実際に使用するタイトルやカテゴリ名に置き換えます。

セマンティックなHTML: h1, h2, a などの適切なHTML要素を使用することで、コンテンツの構造を明確にし、アクセシビリティを向上させています。

総括:

このHTMLテンプレートは、ブログ記事やウェブサイトのアイキャッチを簡単に作成するための、シンプルでカスタマイズ可能なテンプレートです。視覚的に魅力的なデザインと、柔軟なカスタマイズオプションを備えているため、様々なニーズに対応することができます。

ソースコード

<!DOCTYPE html>
<html lang="{BlogLanguage}">
  <head>
    <meta charset="utf-8">
    <style>
      :root {
        --bg-main: #fff;
        --bg-gradient-start: #00c6ff;
        --bg-gradient-end: #0072ff;
        --text-main: #000;
        --text-secondary: #fff;
        --button-bg: #0072ff;
        --button-hover: #005acc;
        --border-radius: 16px;
      }
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Noto Sans CJK JP';
      }
      body {
        background-color: var(--bg-main);
        color: var(--text-main);
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 24px;
      }
      .container {
        width: 1200px;
        background: linear-gradient(to right, var(--bg-gradient-start), var(--bg-gradient-end));
        border-radius: var(--border-radius);
        padding: 40px;
        color: var(--text-secondary);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        overflow: hidden;
      }
      .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
      }
      .title {
        font-size: 64px;
        font-weight: bold;
        margin-bottom: 16px;
      }
      .subtitle {
        font-size: 24px;
        margin-bottom: 32px;
      }
      .button {
        background-color: var(--button-bg);
        color: var(--text-secondary);
        padding: 16px 32px;
        border: none;
        border-radius: var(--border-radius);
        font-size: 18px;
        font-weight: bold;
        text-decoration: none;
        transition: background-color 0.3s ease;
        cursor: pointer;
      }
      .button:hover {
        background-color: var(--button-hover);
      }
      /* カテゴリによるカスタマイズ例 */
      body.category-日記 {
        background-color: #f0f0f0;
      }
      body.category-日記 .container {
        background: linear-gradient(to right, #f0f0f0, #e0e0e0);
        color: #333;
      }
      body.category-日記 .button {
        background-color: #333;
        color: #fff;
      }
    </style>
  </head>
  <body class="category-{FirstCategory}">
    <div class="container">
      <div class="content">
        <h1 class="title">{Title}</h1>
        <h2 class="subtitle">{FirstCategory}</h2>
        <a href="#" class="button">続きを読む</a>
      </div>
    </div>
  </body>
</html>

自動生成アイキャッチのテンプレート集

視覚的に魅力的なカスタマイズ可能なアイキャッチテンプレート

このテーマの特徴

ソースコード