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

image0

このテーマの特徴

このHTMLテンプレートは、ブログ記事のアイキャッチ画像を作成するためのものです。以下に、その特徴をわかりやすく説明します。

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

  • カラー: --bg-main, --bg-secondary, --text-main, --text-back, --accent-colorといったCSS変数を使って、背景色、テキストカラー、アクセントカラーなどを簡単に変更できます。
  • フォント: --font-familyでフォントを指定できます。ここではNoto Sans CJK JPがデフォルトになっています。
  • 幾何学模様: geometric-patternクラスで、幾何学模様の背景を追加できます。
  • グラデーション: gradient-backgroundクラスで、グラデーション背景を追加できます。
  • タイポグラフィー装飾: typography-accentクラスで、文字に影などの装飾を追加できます。

2. 柔軟なレイアウト

  • ヘッダー: ブログタイトル、カテゴリ、アイコンなどを表示するヘッダーセクションがあります。
  • メインコンテンツ: 記事のタイトルを表示するメインコンテンツセクションがあります。
  • レスポンシブデザイン: media query を使用して、さまざまな画面サイズに対応するレイアウトを作成できます。

3. セマンティックマークアップ

  • HTML5のセマンティックタグ: <header>, <main>, <div>などの適切なタグを使用しており、アクセシビリティとSEOの向上に役立ちます。
  • クラス名: わかりやすいクラス名を使用することで、CSSの管理を容易にします。

4. 実用的な機能

  • カテゴリによるカスタマイズ: body.category-{FirstCategory}のように、カテゴリ名に基づいてデザインを変更することができます。
  • 記事タイトルの調整: entry-titleクラスで、記事タイトルの表示方法を調整できます。
  • 画像の追加: アイコンや背景画像を追加することで、デザインをさらに魅力的にできます。

5. サンプルコード

  • テンプレートには、アイコンのSVGコード、幾何学模様の背景、グラデーション背景、タイポグラフィーの装飾のサンプルコードが含まれています。これらのコードを参考に、独自のアイキャッチ画像を作成することができます。

このテンプレートは、カスタマイズ可能なデザイン、柔軟なレイアウト、セマンティックマークアップ、実用的な機能などを備えています。ブログ記事のアイキャッチ画像を作成する際に、このテンプレートをベースに独自のデザインを作成してみてください。

ソースコード

<!DOCTYPE html>
<html lang="{BlogLanguage}">
  <head>
    <meta charset="utf-8">
    <style>
      :root {
        --bg-main: #FFF;
        --bg-secondary: #003368;
        --text-main: #003368;
        --text-back: #d4e3f0;
        --accent-color: #F08080; /* 例：アクセントカラー */
        --content-rounded: 12px;
        --font-family: 'Noto Sans CJK JP', sans-serif; /* Noto Sans を指定 */
      }

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

      body {
        background-color: var(--bg-secondary);
        color: var(--text-main);
        font-family: var(--font-family); /* Noto Sans を適用 */
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        padding: 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;
      }

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

      .blog-title {
        font-size: 24px;
        font-weight: bold;
        color: var(--text-main);
      }

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

      .category span {
        display: block;
        padding: 2px 12px;
        border-radius: 8px;
        background-color: var(--text-back);
        font-size: 16px;
        font-weight: bold;
        color: var(--text-main);
      }

      /* メインコンテンツの設定 */
      .main-wrapper {
        flex: 1;
        display: flex;
        padding-bottom: 56px;
      }

      .main {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: 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: 48px;
        font-weight: bold;
        margin-bottom: 16px;
      }

      /* 幾何学模様の背景 */
      .geometric-pattern {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 10 10'%3E%3Cpath d='M0 0 L10 10 M0 10 L10 0' stroke='%23ccc' stroke-width='1'/%3E%3C/svg%3E"); /* 例：幾何学模様 */
        background-size: 20px 20px;
      }

      /* グラデーション背景 */
      .gradient-background {
        background: linear-gradient(to right, #FF6347, #FFA07A); /* 例：グラデーション */
      }

      /* タイポグラフィーの装飾 */
      .typography-accent {
        text-shadow: 2px 2px var(--accent-color); /* 例：文字に影 */
      }
    </style>
  </head>
  <body class="category-{FirstCategory} geometric-pattern"> <!-- 幾何学模様の背景 -->
    <!-- 他のデザインパターンを追加：gradient-background、typography-accentなど -->
    <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">{BlogTitle}</div>
      <div class="category">
        <span>{FirstCategory}</span>
      </div>
    </div>
    <div class="main-wrapper">
      <div class="main">
        <h1 class="entry-title typography-accent">{Title}</h1> <!-- タイポグラフィーの装飾 -->
      </div>
    </div>
  </body>
</html>