このテーマの特徴

このHTMLテンプレートは、ブログ記事のアイキャッチ（トップ画像）を作成するための基本的な構造とスタイルを提供します。特徴は以下のとおりです。

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

カラーテーマ: メインカラー、補助カラー、テキストカラー、アクセントカラーなど、主要な色をCSS変数で定義しています。これにより、ブログのテーマに合わせて簡単にカラーを変更できます。
フォント: Noto Sans CJK JP を使用し、ブログの雰囲気に合った別のフォントに変更することも可能です。
アイコン: SVGで描かれたアイコンを使用しており、ブログのロゴなどに使用できます。

2. ブログ情報を表示

ブログタイトル: BlogTitle でブログのタイトルを設定します。
カテゴリ: FirstCategory で最初のカテゴリ名を設定します。複数のカテゴリを持つ場合は、category ディブ内に複数 span を追加します。
記事タイトル: Title で記事のタイトルを設定します。
記事概要: 記事の概要は含まれていませんが、main ディブ内に追加できます。

3. 視覚的に魅力的な要素

背景形状: SVG で描かれた幾何学的な形状を背景に配置し、視覚的なアクセントを加えています。
アクセントカラー: カテゴリごとにアクセントカラーを変更できます。

4. レイアウト

ヘッダー: ブログタイトル、アイコン、カテゴリを配置するヘッダーセクションです。
メインセクション: 記事タイトルと概要を配置するメインセクションです。
背景形状: メインセクションの背景に配置され、視覚的な奥行きとアクセントを提供します。

5. 柔軟性と拡張性

CSS変数: カラーやフォントサイズなどをCSS変数で定義しているため、簡単にカスタマイズできます。
HTML構造: 拡張性が高く、必要に応じて要素を追加したり、スタイルを変更したりできます。
カテゴリの動的変更: category-{FirstCategory} クラスを使用することで、カテゴリ名に応じてスタイルを動的に変更できます。

その他の特徴

レスポンシブデザイン: 特に明示されていませんが、基本的なレイアウトはレスポンシブに対応している可能性があります。
SEOに配慮した構造: 見出しタグ (h1, h2 など) を使用しており、検索エンジンのクローラがコンテンツを理解しやすくしています。

改善点

レスポンシブデザインの強化: さまざまな画面サイズに対応できるように、メディアクエリを使用してレイアウトを調整する必要があります。
SEOの最適化: タイトルタグやメタディスクリプションなどのメタデータを設定し、検索エンジンのランキングを向上させる必要があります。
記事概要の追加: 記事の概要を表示するセクションを追加する必要があります。
画像の追加: アイキャッチ画像や記事中の画像を追加する必要があります。

このテンプレートは、ブログ記事のアイキャッチを作成するための基本的なスタート地点となります。上記の改善点などを参考に、ブログのテーマや内容に合わせてカスタマイズしていくことで、より魅力的なアイキャッチを作成できます。

ソースコード

<!DOCTYPE html>
<html lang="{BlogLanguage}">
  <head>
    <meta charset="utf-8">
    <style>
      :root {
        --bg-main: #181818; /* メインカラー: ダークグレー */
        --bg-secondary: #282c34; /* 補助カラー: ダークグレー */
        --text-main: #FFFFFF; /* 文字色: 白 */
        --accent-color: #007bff; /* アクセントカラー: 青 */
        --content-rounded: 12px;
      }
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        background-color: var(--bg-main);
        color: var(--text-main);
        font-family: 'Noto Sans CJK JP', sans-serif;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        padding: 24px;
        line-height: 1.4;
      }

      .header {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 18px;
        width: 100%;
      }
      .header > :first-child {
        margin-left: 24px;
      }
      .header > :last-child {
        margin-right: 24px;
      }
      .icon {
        display: flex;
        align-items: center;
        margin-right: 12px;
      }
      .icon > svg, .icon > img {
        width: 64px;
      }
      .blog-title {
        display: flex;
        align-items: center;
        max-width: 60%;
        margin-right: 24px;
      }
      .blog-title .title {
        font-size: 48px;
        font-weight: bold;
        color: var(--text-main);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .spacer {
        flex-grow: 1;
      }
      .category {
        display: flex;
        justify-content: center;
        gap: 15px;
        max-width: 25%;
      }
      .category span {
        display: block;
        box-sizing: border-box;
        padding: 2px 12px;
        border-radius: 8px;
        background-color: var(--bg-secondary);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 30px;
        line-height: 1.3;
        font-weight: bold;
        color: var(--text-main);
      }
      .category span:empty {
        display: none;
      }

      .main-wrapper {
        flex: 1;
        width: 100%;
        display: flex;
        padding-bottom: 56px;
        position: relative;
      }
      .main {
        width: 75%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 20px auto 8px;
        overflow: hidden;
        text-align: center;
        position: relative;
        z-index: 1;
      }
      .entry-title {
        display: -webkit-box;
        -webkit-line-clamp: 4; /* 行数の上限 */
        line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        overflow-wrap : break-word;
        word-break: auto-phrase;
        color: var(--text-main);
        font-size: 56px;
        line-height: 1.3;
        font-weight: bold;
      }

      .background-shape {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        overflow: hidden;
      }
      .background-shape svg {
        width: 100%;
        height: 100%;
      }
      .background-shape svg path {
        fill: var(--bg-secondary);
        stroke: var(--accent-color);
        stroke-width: 3;
      }

      .category-テック {
        --accent-color: #f0ad4e; /* テックカテゴリのアクセントカラー: オレンジ */
      }
      .category-プログラミング {
        --accent-color: #00b050; /* プログラミングカテゴリのアクセントカラー: 緑 */
      }
    </style>
  </head>
  <body class="category-{FirstCategory}">
    <div class="header">
      <div class="icon">
        <svg xmlns="http://www.w3.org/2000/svg" width="90" height="90" viewBox="0 0 90 90">
          <path d="M45,90A45,45,0,1,1,90,45,45.05,45.05,0,0,1,45,90ZM45,5.723A39.278,39.278,0,1,0,84.281,45,39.322,39.322,0,0,0,45,5.723Z" fill="#333"></path>
          <path d="M50.241,22.78a63.54,63.54,0,0,1-4.22-11.3V43.349a2.938,2.938,0,1,1-1.879-.051V11.442A63.6,63.6,0,0,1,39.914,22.78a115.111,115.111,0,0,1-7.739,13.113l2.746,37.579s2.61,2.913,10.151,2.916h.01c7.54,0,10.151-2.916,10.151-2.916l2.746-37.579A115.02,115.02,0,0,1,50.241,22.78Z" fill="#333"></path>
        </svg>
      </div>
      <div class="blog-title">
        <div class="title">{BlogTitle}</div>
      </div>
      <div class="spacer"></div>
      <div class="category">
        <span>{FirstCategory}</span>
      </div>
    </div>
    <div class="main-wrapper">
      <div class="main">
        <div class="entry-title">{Title}</div>
      </div>
      <div class="background-shape">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
          <path d="M50,10 L90,90 L10,90 Z" />
        </svg>
      </div>
    </div>
  </body>
</html>