このテーマの特徴

このHTMLテンプレートは、ブログ記事のアイキャッチ画像として使用できる、洗練されたデザインのテンプレートです。以下に、特徴をわかりやすく説明します。

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

パステルカラーとアクセントカラーの組み合わせ: 背景にはパステルブルー系の色を使用し、アクセントカラーには鮮やかなブルーを採用することで、視覚的に魅力的な印象を与えます。
幾何学模様: 背景にアクセントカラーを使った幾何学模様を配置することで、視覚的な面白みと洗練さを加えています。
丸みのあるデザイン: コンテンツ部分に丸みを持たせることで、柔らかく親しみやすい印象を与えます。

2. カスタマイズ性:

ブログタイトルとカテゴリの表示: ブログタイトルとカテゴリを簡単に設定できます。
アイコンの設置: アイコンを設置して、ブログの個性を出せます。
カテゴリー別の背景色: カテゴリ別に背景色を変更できるので、ブログの雰囲気を調整できます。
CSS変数の使用: CSS変数を使用することで、カラーパレットやデザイン要素を簡単に変更できます。

3. 可読性:

適切なフォントサイズと行間: 読みやすいフォントサイズと行間を採用しています。
コンテンツの制限: タイトルの行数や文字数を制限することで、見やすく簡潔な情報を提供します。
レスポンシブデザイン: 幅広いデバイスに対応できるよう、レスポンシブデザインを採用しています。

4. SEOに配慮した構造:

適切なHTML構造: SEOに最適化されたHTML構造を採用しています。
alt属性: 画像に適切なalt属性を設定することで、検索エンジンの理解を助けます。

5. 使用シーン:

ブログ記事のアイキャッチ画像
ソーシャルメディアの投稿画像
ウェブサイトのヘッダー画像

6. まとめ:

このHTMLテンプレートは、洗練されたデザイン、カスタマイズ性、可読性、SEOへの配慮を備えています。ブログ記事のアイキャッチ画像として使用することで、読者の注目を集め、ブログ全体の印象を向上させることができます。

ソースコード

<!DOCTYPE html>
<html lang="{BlogLanguage}">
  <head>
    <meta charset="utf-8">
    <style>
      :root {
        --bg-main: #F8F8F8; /* ニュートラルな薄いグレー */
        --bg-secondary: #E0F2F7; /* パステルブルー */
        --text-main: #222; /* ダークグレー */
        --accent-color: #0077CC; /* アクセントカラー：ブルー */
        --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: #F0F8FF; /* パステルブルー系 */
      }

      body > div {
        background-color: var(--bg-main);
      }

      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 {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 18px;
      }

      .header > :first-child {
        margin-left: 24px;
      }

      .header > :last-child {
        margin-right: 24px;
      }

      .header .base {
        display: flex;
        flex-direction: row;
        align-items: center;
      }

      .icon > svg,
      .icon > img {
        border-radius: 50%;
        width: 64px;
        margin-right: 12px;
      }

      .blog-title {
        max-width: 60%;
      }

      .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(--accent-color); /* アクセントカラーを使用 */
        color: var(--bg-main); /* テキストは白 */
        font-size: 30px;
        line-height: 1.3;
        font-weight: bold;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .category span:empty {
        display: none;
      }

      .main-wrapper {
        flex: 1;
        width: 100%;
        display: flex;
        padding-bottom: 56px;
      }

      .main {
        width: 75%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 20px auto 8px;
        overflow: hidden;
        text-align: center;
      }

      .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;
      }

      /* 背景の幾何学模様 */
      .main-wrapper::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image:
          linear-gradient(
            45deg,
            var(--accent-color) 25%,
            transparent 25%,
            transparent 75%,
            var(--accent-color) 75%
          ),
          linear-gradient(
            -45deg,
            var(--accent-color) 25%,
            transparent 25%,
            transparent 75%,
            var(--accent-color) 75%
          );
        background-size: 80px 80px;
        background-position: 0 0;
        opacity: 0.1; /* 透明度を調整 */
        z-index: -1; /* 背景に配置 */
      }
    </style>
  </head>
  <body class="category-{FirstCategory}">
    <div class="header">
      <div class="icon">
        <!-- アイコンをここに配置 -->
      </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>
  </body>
</html>