このテーマの特徴

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

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

カラーテーマ: --bg-main, --bg-secondary, --text-main, --text-back, --primary-color, --secondary-colorといったCSS変数を用いて、背景色、テキスト色、アクセントカラーなどを簡単に変更できます。
フォント: font-family: 'Noto Sans CJK JP' で日本語フォントが設定されていますが、他のフォントに変更することも可能です。
丸み: --content-rounded で各要素の角丸の大きさを調整できます。

2. ブログタイトルとカテゴリ表示

ブログタイトル: {BlogTitle} にブログのタイトルを記述します。
カテゴリ: {FirstCategory} に記事の最初のカテゴリを記述します。
- body.category-{FirstCategory} のようにカテゴリに応じてスタイルを変更できます。

3. アイキャッチ画像の代わりとなるビジュアル要素

SVG画像: image-container 内に SVG画像が配置されており、記事のテーマに合わせたビジュアルを提供します。
- SVG画像のパスを変更することで、異なるデザインの画像に変更できます。
- fill: var(--primary-color) で画像の色をカスタマイズできます。
円形要素: circle クラスで定義された円形要素が画像の上に重ねられています。
- background-color: var(--secondary-color) で円の背景色をカスタマイズできます。
- 円の大きさや位置も調整可能です。

4. 記事タイトル

entry-title: 記事タイトルを大きく表示します。
- font-size, font-weight, color を調整してタイトルのスタイルを変更できます。

5. シンプルなレイアウト

header: ブログタイトルとカテゴリを表示するヘッダーエリア。
main-wrapper: メインコンテンツエリア。
main: アイキャッチ画像と記事タイトルを配置するエリア。

このテンプレートは、ブログ記事のアイキャッチを作成するための基本的な構造を提供します。必要に応じて、CSSやHTMLを編集して、独自のアイキャッチデザインを作成できます。

ソースコード

<!DOCTYPE html>
<html lang="{BlogLanguage}">
  <head>
    <meta charset="utf-8">
    <style>
      :root {
        --bg-main: #FFF;
        --bg-secondary: #003368;
        --text-main: #003368;
        --text-back: #d4e3f0;
        --primary-color: #F7931E;
        --secondary-color: #1976D2;
        --content-rounded: 12px;
      }
      * {
        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';
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        padding: 24px 24px;
        line-height: 1.4;
        word-break: break-word;
      }

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

      body > div {
        background-color: var(--bg-main);
        padding: 24px;
      }
      body > div:first-child {
        border-radius: var(--content-rounded) var(--content-rounded) 0 0;
      }
      body > div:last-child {
        border-radius: 0 0 var(--content-rounded) var(--content-rounded);
      }

      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 18px 0;
      }

      .header .blog-title {
        font-size: 24px;
        font-weight: bold;
      }

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

      .category span {
        display: inline-block;
        padding: 4px 12px;
        border-radius: 24px;
        background-color: var(--text-back);
        font-size: 14px;
        font-weight: bold;
        color: var(--text-main);
      }

      .main-wrapper {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding-bottom: 56px;
      }

      .main {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 24px;
      }

      .entry-title {
        font-size: 48px;
        font-weight: bold;
        line-height: 1.2;
        color: var(--text-main);
      }

      .image-container {
        position: relative;
        width: 400px;
        height: 400px;
        margin-right: 48px;
      }

      .image-container svg {
        width: 100%;
        height: 100%;
        fill: var(--primary-color);
      }

      .image-container .circle {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background-color: var(--secondary-color);
        z-index: 1;
      }

      .image-container .circle:before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 150px;
        height: 150px;
        border-radius: 50%;
        background-color: var(--bg-main);
        z-index: 2;
      }
    </style>
  </head>
  <body class="category-{FirstCategory}">
    <div class="header">
      <div class="blog-title">{BlogTitle}</div>
      <div class="category">
        <span>{FirstCategory}</span>
      </div>
    </div>
    <div class="main-wrapper">
      <div class="main">
        <div class="image-container">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
            <path d="M50,10a40,40,0,1,0,40,40A40,40,0,0,0,50,10Zm0,70a30,30,0,1,1,30-30A30,30,0,0,1,50,80Z" />
            <path d="M50,10a40,40,0,1,0,40,40A40,40,0,0,0,50,10Zm0,70a30,30,0,1,1,30-30A30,30,0,0,1,50,80Z" />
          </svg>
          <div class="circle"></div>
        </div>
        <div class="entry-title">{Title}</div>
      </div>
    </div>
  </body>
</html>

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

カスタマイズ可能なブログアイキャッチテンプレート

このテーマの特徴

ソースコード