レトロな雰囲気漂うブログアイキャッチで目を引く記事に！

image0

このテーマの特徴

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

1. 全体的なデザイン

  • 配色: 淡いグレーを基調としたカラーパレットを使用し、ピンクをアクセントカラーとして採用することで、レトロで温かみのある印象を演出しています。
  • フォント: Noto Sans CJK JP を使用し、ゴシック体風のフォントで親しみやすさを表現しています。
  • レイアウト: ヘッダー、メインコンテンツ、フッターというシンプルなレイアウトを採用し、記事の内容に集中しやすいように設計されています。
  • 影: 各要素に影を付けることで、奥行きと立体感を表現しています。
  • セピアと明るさ調整: 全体的にセピアフィルターと明るさ調整を施すことで、レトロな雰囲気を強化しています。

2. ヘッダー

  • ロゴ: ロゴはSVGで記述されており、画像よりも軽量で拡大縮小にも強いという特徴があります。
  • ブログタイトル: アクセントカラーのピンクで表示され、記事のタイトルと調和しています。
  • カテゴリ: 記事のカテゴリを分かりやすく表示するために、ピンクの背景色と白抜き文字を採用しています。

3. メインコンテンツ

  • 記事タイトル: 大きなフォントで表示され、記事のテーマを強調しています。
  • 日付: 記事の投稿日時を表示し、記事の新鮮さを示しています。
  • 記事の画像: グレーフィルターをかけることで、レトロな雰囲気を醸し出しています。

4. その他

テンプレートの利点

  • レトロな雰囲気: セピアフィルター、ゴシック体風のフォント、グレーフィルターなどの要素により、レトロな雰囲気を演出できます。
  • カスタマイズ性: ブログタイトル、カテゴリ、記事タイトル、日付、画像など、多くの要素を簡単にカスタマイズできます。
  • シンプルで使いやすい: シンプルで分かりやすいコードで、初心者でも簡単に利用できます。

テンプレートを活用する際の注意点

  • ロゴの配置: ロゴの配置はデザインや記事の内容に合わせて調整してください。
  • カテゴリ: カテゴリの表示は記事の内容に応じて変更してください。
  • 画像の選択: レトロな雰囲気に合う画像を選択することが重要です。

このテンプレートは、レトロな雰囲気のブログ記事のアイキャッチを作成するための良い出発点となります。必要に応じてカスタマイズして、あなたのブログに最適なアイキャッチを作成してください。

ソースコード

<!DOCTYPE html>
<html lang="{BlogLanguage}">
  <head>
    <meta charset="utf-8">
    <style>
      :root {
        --bg-main: #f5f5f5; /* 淡いグレー */
        --bg-secondary: #e0e0e0; /* 薄いグレー */
        --text-main: #333; /* ダークグレー */
        --text-accent: #f08080; /* ピンク */
        --border-color: #ccc; /* 薄いグレー */
        --shadow-color: rgba(0, 0, 0, 0.2); /* 影の色 */
        --content-rounded: 16px;
      }
      * {
        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;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        padding: 24px 24px;
        line-height: 1.4;
        word-break: break-word;
      }

      .category-日記 {
        background-color: #fff;
      }

      body > div {
        background-color: var(--bg-main);
        padding: 24px;
        border-radius: var(--content-rounded);
        box-shadow: 0 4px 8px var(--shadow-color);
      }

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

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

      .icon > svg, .icon > img {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        border: 2px solid var(--text-accent);
      }

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

      .category {
        display: flex;
        gap: 8px;
      }

      .category span {
        background-color: var(--text-accent);
        color: var(--bg-main);
        padding: 6px 12px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: bold;
      }

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

      .main {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        padding: 24px 0;
      }

      .entry-title {
        font-size: 48px;
        font-weight: bold;
        text-align: center;
        line-height: 1.2;
        color: var(--text-main);
        text-shadow: 0 2px 4px var(--shadow-color);
      }

      .entry-title::before, .entry-title::after {
        content: '';
        display: block;
        width: 100px;
        height: 2px;
        background-color: var(--text-accent);
        margin: 8px auto;
      }

      .entry-title::after {
        margin-top: 0;
      }

      .date {
        font-size: 16px;
        color: var(--text-main);
      }

      .date span {
        font-weight: bold;
      }

      /* レトロな雰囲気の調整 */
      body, .header, .main {
        filter: sepia(0.2) brightness(0.9); /* セピアと明るさ調整 */
      }

      .entry-title {
        font-family: 'Noto Sans CJK JP', serif; /* ゴシック体風フォント */
      }

      .icon > img {
        filter: grayscale(0.8); /* 画像にグレーフィルター */
      }

    </style>
  </head>
  <body class="category-{FirstCategory}">
    <div class="header">
      <div class="base">
        <div class="icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="90" height="90" viewBox="0 0 90 90">
            <!-- ここにロゴ画像のSVGコードを挿入 -->
          </svg>
        </div>
        <div class="blog-title">{BlogTitle}</div>
      </div>
      <div class="category">
        <span>{FirstCategory}</span>
      </div>
    </div>
    <div class="main-wrapper">
      <div class="main">
        <h1 class="entry-title">{Title}</h1>
        <div class="date"><span>{PostedYear}年</span><span>{PostedMonth}月</span><span>{PostedDate}日</span></div>
      </div>
    </div>
  </body>
</html>