このテーマの特徴

このHTMLテンプレートは、ブログ記事のアイキャッチをスタイリッシュにデザインするためのものです。以下に、テンプレートの特徴をわかりやすく説明します。

1. カスタマイズしやすい構造

変数: CSSで --primary-color, --secondary-color, --accent-color といった変数を定義することで、ブログのテーマカラーを簡単に変更できます。
カテゴリ別カスタマイズ: body.category-日記 のように、カテゴリ別に背景色などのスタイルを変更できます。
動的コンテンツ: {BlogTitle}, {FirstCategory}, {Title} などのプレースホルダーを使用することで、ブログ記事のタイトルやカテゴリ情報を簡単に反映できます。

2. シンプルで洗練されたデザイン

幾何学模様: 背景にシンプルな三角形の幾何学模様を配置し、モダンでスタイリッシュな印象を与えます。
カラーパレット: 青色系、薄いグレー系、オレンジ色系の3色を基調としたカラーパレットは、視覚的に心地よく、記事の内容を引き立てます。
タイポグラフィ: Noto Sans CJK JP を使用することで、日本語の読みやすさを重視したデザインとなっています。

3. レスポンシブ対応

メディアクエリ: @media (max-width: 768px) を使用して、スマートフォンなどの小型デバイスにも対応しています。
フォントサイズ調整: 画面サイズに合わせて、見出しのフォントサイズが自動的に調整されます。

4. アクセシビリティへの配慮

適切なフォントサイズ: 読みやすいフォントサイズを設定しています。
色コントラスト: テキストと背景色のコントラストを適切に設定し、視覚障碍者の方にも配慮しています。

5. SEOへの配慮

メタタグ: <meta charset="utf-8"> を設定することで、文字コードをUTF-8に指定し、SEOに役立ちます。

このテンプレートを使用することで、簡単にスタイリッシュで魅力的なアイキャッチを作成できます。

ソースコード

<!DOCTYPE html>
<html lang="{BlogLanguage}">
  <head>
    <meta charset="utf-8">
    <style>
      :root {
        --primary-color: #007bff; /* 青色系 */
        --secondary-color: #f8f9fa; /* 薄いグレー系 */
        --accent-color: #ff6347; /* オレンジ色系 */
        --font-family: 'Noto Sans CJK JP', sans-serif;
      }

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

      body {
        background-color: var(--secondary-color);
        color: var(--primary-color);
        font-family: var(--font-family);
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 24px;
        line-height: 1.4;
        word-break: break-word;
      }

      /* カテゴリによるカスタマイズ */
      body.category-日記 {
        background-color: #f5f5f5; /* 日記カテゴリの背景色 */
      }

      /* コンテンツ部分の共通設定 */
      .content-wrapper {
        background-color: var(--secondary-color);
        width: 100%;
        max-width: 1200px;
        padding: 30px;
        border-radius: 16px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      }

      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
      }

      .blog-title {
        font-size: 24px;
        font-weight: bold;
        color: var(--primary-color);
        margin-bottom: 10px;
      }

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

      .category span {
        background-color: var(--accent-color);
        color: var(--secondary-color);
        padding: 8px 16px;
        border-radius: 20px;
        font-size: 14px;
        font-weight: bold;
      }

      .main {
        text-align: center;
      }

      .entry-title {
        font-size: 48px;
        font-weight: bold;
        color: var(--primary-color);
        margin-bottom: 20px;
        line-height: 1.2;
      }

      /* 幾何学模様 */
      .geometric-pattern {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        pointer-events: none;
      }

      .geometric-pattern svg {
        width: 100%;
        height: 100%;
        fill: var(--primary-color);
        opacity: 0.1; /* 透明度を調整 */
      }

      /* レスポンシブデザイン */
      @media (max-width: 768px) {
        .entry-title {
          font-size: 32px;
        }

        .geometric-pattern svg {
          opacity: 0.2;
        }
      }
    </style>
  </head>
  <body class="category-{FirstCategory}">
    <div class="content-wrapper">
      <div class="header">
        <div class="blog-title">{BlogTitle}</div>
        <div class="category">
          <span>{FirstCategory}</span>
        </div>
      </div>
      <div class="main">
        <div class="entry-title">{Title}</div>
        <div class="geometric-pattern">
          <svg viewBox="0 0 100 100">
            <polygon points="0,0 100,0 50,100" />
          </svg>
        </div>
      </div>
    </div>
  </body>
</html>

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

スタイリッシュなアイキャッチテンプレートでブログ記事に彩りを添える

このテーマの特徴

ソースコード