このテーマの特徴

このHTMLテンプレートは、ブログ記事のアイキャッチを作成するためのシンプルなテンプレートです。以下に、テンプレートの特徴を詳しく説明します。

1. 基本構造

<html lang="{BlogLanguage}">: HTMLドキュメントの開始タグ。言語属性にはブログの言語を指定します。
<head>: ドキュメントのメタデータやスタイルシートを記述するセクション。
- <meta charset="utf-8">: 文字エンコードをUTF-8に設定します。
- <style>: CSSスタイルを記述します。
<body>: ドキュメントの内容が表示されるセクション。
- class="category-{FirstCategory}": 最初のカテゴリ名を含むクラス属性。
- <div class="header">: アイキャッチのヘッダー部分。
  - <div class="icon">: ブログのアイコンを表示するエリア。SVGやbase64形式の画像を挿入します。
  - <div class="blog-title">: ブログのタイトルを表示するエリア。
  - <div class="category">: 最初のカテゴリ名を表示するエリア。
- <div class="main-wrapper">: アイキャッチのメインコンテンツエリア。
  - <div class="main">: ブログ記事のタイトルを表示するエリア。
  - <div class="entry-title">: 記事のタイトルを表示するエリア。

2. CSSスタイル

変数: :rootセレクタを使用してCSS変数を定義し、スタイルの再利用性を高めています。
- --bg-main: メイン背景色 (濃いグレー)
- --bg-secondary: セカンダリ背景色 (ネイビーブルー)
- --text-main: メインテキスト色 (白)
- --text-accent: アクセントテキスト色 (アクティブな青)
- --content-rounded: コンテンツの角丸
- --box-shadow: ボックスシャドウ
リセット: *セレクタを使用して、ブラウザのデフォルトスタイルをリセットし、一貫性のあるレイアウトを実現しています。
ボディスタイル:
- 背景色、テキスト色、フォント、フォントサイズ、最低高さ、表示方法、パディング、行間、改行を定義しています。
ヘッダー:
- 幅、表示方法、中央寄せ、項目間隔を定義しています。
アイコン:
- 円形にカットされたアイコンの幅を定義しています。
ブログタイトル:
- 表示方法、垂直方向に中央寄せ、項目間隔を定義しています。
カテゴリ:
- 表示方法、右寄せ、項目間隔を定義しています。
カテゴリのspan:
- 表示方法、パディング、角丸、背景色、フォントサイズ、フォントウェイト、テキスト色を定義しています。
メインコンテンツエリア:
- 柔軟な高さ、幅、中央寄せ、項目間隔を定義しています。
メインコンテンツ:
- 幅、表示方法、垂直方向に中央寄せ、項目間隔を定義しています。
記事タイトル:
- 表示方法、2行に制限、オーバーフロー時の表示を省略、テキスト色、フォントサイズ、フォントウェイト、テキスト位置を定義しています。

3. テンプレートの利点

シンプルで使いやすい: 基本的なHTMLとCSSで構成されており、初心者でも簡単にカスタマイズできます。
スタイリッシュなデザイン: ダークモードの背景色と鮮やかなアクセントカラーを採用し、現代的なデザインを実現しています。
レスポンシブデザイン: フレキシブルなレイアウトによって、様々なデバイスに対応できます。
カスタマイズしやすい: ブログタイトル、カテゴリ、記事タイトルなどの情報を簡単に変更できます。
コードの可読性が高い: 適切なインデントとコメントによって、コードの可読性を高めています。

このテンプレートは、ブログ記事のアイキャッチを作成するための出発点として使用できます。必要に応じて、テンプレートをカスタマイズして、独自のアイキャッチを作成してください。

ソースコード

<!DOCTYPE html>
<html lang="{BlogLanguage}">
  <head>
    <meta charset="utf-8">
    <style>
      :root {
        --bg-main: #181818; /* 濃いグレー */
        --bg-secondary: #003368; /* ネイビーブルー */
        --text-main: #fff; /* 白 */
        --text-accent: #00d8ff; /* アクティブな青 */
        --content-rounded: 16px;
        --box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      }
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        background-color: var(--bg-secondary);
        color: var(--text-main);
        font-weight: normal;
        font-family: 'Noto Sans CJK JP', sans-serif;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        padding: 24px;
        line-height: 1.4;
        word-break: break-word;
      }
      .category-{FirstCategory} {
        background-color: var(--bg-secondary);
      }
      body > div {
        background-color: var(--bg-main);
        padding: 24px;
        border-radius: var(--content-rounded);
        box-shadow: var(--box-shadow);
      }
      .header {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 24px;
        margin-bottom: 24px;
      }
      .icon > svg, .icon > img {
        border-radius: 50%;
        width: 64px;
      }
      .blog-title {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
      }
      .blog-title .title {
        font-size: 24px;
        font-weight: bold;
        color: var(--text-main);
        margin-bottom: 4px;
      }
      .category {
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        align-items: center;
      }
      .category span {
        display: inline-block;
        padding: 8px 16px;
        border-radius: 24px;
        background-color: var(--text-accent);
        font-size: 16px;
        font-weight: bold;
        color: var(--text-main);
      }
      .main-wrapper {
        flex: 1;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 56px;
      }
      .main {
        width: 75%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
      }
      .entry-title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        overflow-wrap: break-word;
        word-break: auto-phrase;
        color: var(--text-main);
        font-size: 48px;
        font-weight: bold;
        text-align: center;
      }
    </style>
  </head>
  <body class="category-{FirstCategory}">
    <div class="header">
      <div class="icon">
        <!-- SVGかbase64化した画像を挿入してください -->
        <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="category">
        <span>{FirstCategory}</span>
      </div>
    </div>
    <div class="main-wrapper">
      <div class="main">
        <div class="entry-title">{Title}</div>
      </div>
    </div>
  </body>
</html>

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

ダークモード対応のスタイリッシュなブログアイキャッチテンプレート

このテーマの特徴

ソースコード