ブログ記事のアイキャッチ作成用のレトロな HTML テンプレート

image0

このテーマの特徴

このHTMLテンプレートは、ブログ記事のアイキャッチ（記事の冒頭に表示される画像やテキスト）を作成するためのものです。以下に、このテンプレートの特徴を詳しく説明します。

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

  • カラーテーマ: --bg-main、--bg-secondary、--text-main、--text-secondary、--accent-color といった変数を用いることで、背景色、テキスト色、アクセントカラーを簡単に変更できます。
  • フォント: ブログタイトルには手書き風フォント (Brush Script MT)、カテゴリにはモダンなサンセリフフォント (Helvetica Neue) を採用しており、それぞれに合わせた印象を与えます。
  • ボーダー半径: --border-radius を利用して、コンテンツ部分に丸みを持たせることができます。

2. カテゴリによるデザイン変更

  • body.category-{FirstCategory} を使用することで、カテゴリに応じて背景色を変更できます。
  • 例えば、body.category-日記 の場合、背景色はクリーム色 (#f0e6d6) になります。

3. レトロな雰囲気の装飾

  • entry-title::before と entry-title::after を用いて、記事タイトルの前後にアクセントカラーのラインを追加することで、レトロな雰囲気を演出しています。

4. レイアウト

  • flexbox を使用して、ヘッダー、カテゴリ、タイトルを中央に配置しています。
  • コンテンツ部分は max-width を設定することで、幅広いデバイスに対応しています。

5. 可読性

  • フォントサイズと行間を調整し、読みやすいように配慮しています。
  • 適切な色使いで、文字と背景のコントラストを確保しています。

6. HTML構造

  • シンプルで分かりやすいHTML構造を採用しています。
  • header、main などのセクションを分かりやすく分けることで、コードの可読性を高めています。

7. データ置き換え

  • {BlogLanguage}、{BlogTitle}、{FirstCategory}、{Title} といった箇所は、実際のブログ記事の情報に置き換える必要があります。

8. 拡張性

  • このテンプレートは、画像や動画などの追加要素を簡単に組み込むことができます。
  • 必要に応じて、CSSを拡張し、デザインをさらにカスタマイズすることも可能です。

このテンプレートは、ブログ記事のアイキャッチを作成するためのベースとして、様々なデザインにアレンジすることが可能です。

ソースコード

<!DOCTYPE html>
<html lang="{BlogLanguage}">
  <head>
    <meta charset="utf-8">
    <style>
      :root {
        --bg-main: #f5f5f5; /* ベージュ系 */
        --bg-secondary: #e0b199; /* マスタードイエロー */
        --text-main: #333; /* ダークグレー */
        --text-secondary: #fff; /* 白 */
        --accent-color: #ff6600; /* オレンジ */
        --border-radius: 10px;
      }

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

      body {
        background-color: var(--bg-secondary);
        color: var(--text-main);
        font-family: 'Noto Sans CJK JP', sans-serif;
        line-height: 1.5;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 24px;
      }

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

      /* コンテンツ部分の共通設定 */
      body > div {
        width: 1200px;
        max-width: 100%;
        background-color: var(--bg-main);
        border-radius: var(--border-radius);
        padding: 24px;
        overflow: hidden; /* 画像がはみ出さないように */
      }

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

      .blog-title {
        font-family: 'Brush Script MT', cursive; /* 手書き風フォント */
        font-size: 48px;
        color: var(--accent-color);
        margin-right: auto;
      }

      .category {
        font-family: 'Helvetica Neue', sans-serif; /* モダンなサンセリフフォント */
        font-size: 20px;
        color: var(--text-main);
        padding: 8px 16px;
        border-radius: var(--border-radius);
        background-color: var(--accent-color);
        color: var(--text-secondary);
        margin-left: auto;
      }

      /* メインコンテンツの設定 */
      .main {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
      }

      .entry-title {
        font-family: 'Helvetica Neue', sans-serif;
        font-size: 56px;
        font-weight: bold;
        color: var(--text-main);
        margin-bottom: 16px;
      }

      /* レトロな雰囲気の装飾要素 */
      .entry-title::before,
      .entry-title::after {
        content: '';
        display: inline-block;
        width: 100px;
        height: 2px;
        background-color: var(--accent-color);
        margin: 0 16px;
      }
    </style>
  </head>
  <body class="category-{FirstCategory}">
    <div>
      <div class="header">
        <h1 class="blog-title">{BlogTitle}</h1>
        <div class="category">{FirstCategory}</div>
      </div>
      <div class="main">
        <h2 class="entry-title">{Title}</h2>
      </div>
    </div>
  </body>
</html>