ブログアイキャッチを簡単に作成できるカスタマイズ可能なHTMLテンプレート

image0

このテーマの特徴

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

1. カスタマイズしやすい構造

  • 変数によるカラー設定: :root 内で定義された --bg-main、--bg-secondary などの変数を使用することで、ベースカラーやアクセントカラーを簡単に変更できます。
  • カテゴリによるスタイル変更: body に category-{FirstCategory} というクラスが適用され、body.category-日記 などのように、カテゴリ名で背景色などのスタイルを個別に変更できます。
  • テンプレート要素への置き換え: {BlogTitle}、{FirstCategory}、{Title} などのプレースホルダーは、ブログ記事のタイトルやカテゴリ名などに応じて書き換えられるようになっています。

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

  • グラデーション背景: gradient クラスで定義されたグラデーションが、アイキャッチ画像に奥行きと視覚的な魅力を与えています。
  • テキストの強調: タイトルは entry-title クラスで大きく表示され、アクセントカラーで目立つように強調されています。
  • 統一感のあるレイアウト: header、main-wrapper、main などの要素が適切に配置され、バランスの取れたレイアウトになっています。

3. アクセシビリティへの配慮

  • フォント: Noto Sans CJK JP などのユニバーサルフォントが採用されているため、多くのデバイスで読みやすいフォント表示を実現します。
  • コントラスト: 背景色とテキストカラーの組み合わせが適切なコントラストを保ち、視認性を高めています。

4. SEOに配慮した構造

  • HTML5: 最新のHTML5規格に準拠し、SEOに最適化されています。
  • メタタグ: meta charset="utf-8" など、必要なメタタグが設定されています。

5. その他の特徴

  • レスポンシブデザイン: flex や width 属性などを適切に利用することで、様々な画面サイズに対応できるレイアウトを実現しています。
  • シンプルで軽量: 無駄な要素を省き、高速な読み込みを実現しています。

まとめ

このHTMLテンプレートは、カスタマイズ性、デザイン性、アクセシビリティ、SEO、レスポンシブデザインなど、アイキャッチ作成に必要な要素をバランスよく備えています。ブログのテーマや記事の内容に合わせて、テンプレートを自由にカスタマイズして利用することができます。

ソースコード

<!DOCTYPE html>
<html lang="{BlogLanguage}">
  <head>
    <meta charset="utf-8">
    <style>
      :root {
        --bg-main: #f0f0f0; /* ベースカラー: グレー */
        --bg-secondary: #222; /* アクセントカラー1: ダークグレー */
        --bg-tertiary: #ff6600; /* アクセントカラー2: オレンジ */
        --text-main: #222; /* テキストカラー: ダークグレー */
        --text-accent: #fff; /* テキストカラー: 白 */
        --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';
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        padding: 24px;
        line-height: 1.4;
      }

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

      body > div {
        background-color: var(--bg-secondary);
        padding: 24px;
        border-radius: var(--content-rounded);
      }

      /* ヘッダーの設定 */
      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
      }

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

      .category {
        font-size: 16px;
        color: var(--text-accent);
      }

      /* メインコンテンツの設定 */
      .main-wrapper {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .main {
        width: 75%;
        text-align: center;
      }

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

      /* グラデーションのスタイル */
      .gradient {
        background: linear-gradient(to right, var(--bg-secondary), var(--bg-tertiary));
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0.7;
        z-index: -1;
      }
    </style>
  </head>
  <body class="category-{FirstCategory}">
    <div class="header">
      <div class="blog-title">{BlogTitle}</div>
      <div class="category">{FirstCategory}</div>
    </div>

    <div class="main-wrapper">
      <div class="main">
        <div class="entry-title">{Title}</div>
        <div class="gradient"></div>
      </div>
    </div>
  </body>
</html>