レトロなアイキャッチで目を惹くブログ記事を作成

image0

このテーマの特徴

このHTMLテンプレートは、レトロな雰囲気を醸し出すアイキャッチを作成するためのものです。主な特徴は以下の通りです。

1. レトロなデザイン要素:

  • 幾何学模様: .geometric-pattern クラスは、レトロな幾何学模様を背景に配置します。画像のURLは placeholder に設定されているので、実際には好みの画像に差し替える必要があります。
  • フィルター効果: .main-wrapper::before には、レトロなフィルター効果を施した画像が背景に配置されます。こちらも placeholder なので、実際には画像を差し替える必要があります。
  • 下線: .entry-title::after には、パープルの下線を配置することで、レトロな雰囲気を強調しています。

2. カラーパレット:

  • 淡いグレーと黄味がかった薄いベージュを基調としたカラーパレットを採用しており、レトロな雰囲気に合っています。
  • パープルをアクセントカラーとして使用することで、レトロな雰囲気を際立たせています。

3. レイアウト:

  • ヘッダーにはブログタイトルとカテゴリーが表示されます。
  • メインコンテンツには、見出しと幾何学模様が配置され、レトロな雰囲気を演出しています。
  • 全体的にシンプルで、見やすく、レトロな雰囲気に合ったレイアウトとなっています。

4. カスタマイズ:

  • BlogLanguage、BlogTitle、FirstCategory、Title は、それぞれブログの言語、タイトル、最初のカテゴリー、アイキャッチのタイトルを置き換えるためのプレースホルダーです。
  • CSS の変数を使用して、カラーパレットやデザイン要素を簡単にカスタマイズできます。

まとめ:

このHTMLテンプレートは、レトロな雰囲気を醸し出すアイキャッチを作成するためのベースとして、使用することができます。デザイン要素やカラーパレットをカスタマイズすることで、より個性的で魅力的なアイキャッチを作成できます。

ソースコード

<!DOCTYPE html>
<html lang="{BlogLanguage}">
  <head>
    <meta charset="utf-8">
    <style>
      :root {
        --bg-main: #F5F5F5; /* 淡いグレー */
        --bg-secondary: #F0E68C; /* 黄味がかった薄いベージュ */
        --text-main: #333; /* 濃いグレー */
        --text-accent: #663399; /* パープル */
        --border-color: #DCDCDC; /* 薄いグレー */
        --shadow-color: rgba(0, 0, 0, 0.2); /* 影の色 */
        --content-rounded: 12px;
      }

      * {
        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.4;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        padding: 24px;
      }

      body.category-日記 {
        background-color: #F0E68C; /* カテゴリ「日記」の背景色 */
      }

      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;
        margin-bottom: 24px;
      }

      .blog-title {
        font-size: 24px;
        font-weight: bold;
        color: var(--text-accent); /* パープルのタイトル */
      }

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

      .category span {
        background-color: var(--text-accent); /* パープルのカテゴリータグ */
        color: var(--bg-main);
        padding: 8px 16px;
        border-radius: 24px;
        font-weight: bold;
      }

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

      .main {
        width: 75%;
        display: flex;
        flex-direction: column;
        text-align: center;
      }

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

      /* レトロな要素 */
      .entry-title::after {
        content: "";
        display: block;
        width: 100%;
        height: 2px;
        background-color: var(--text-accent); /* パープルの下線 */
        margin-top: 8px;
      }

      /* レトロな幾何学模様 */
      .geometric-pattern {
        width: 100%;
        height: 100px;
        background-image: url("https://via.placeholder.com/1200x100/f0e68c/ffffff?text=Geometric+Pattern"); /* 幾何学模様の画像を差し込む */
        background-size: cover;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: -1;
        opacity: 0.3; /* 透明度を設定 */
      }

      /* レトロなフィルター効果 */
      .main-wrapper::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("https://via.placeholder.com/1200x630/ffffff/000000?text=Filter+Effect"); /* レトロなフィルター効果の画像を差し込む */
        background-size: cover;
        filter: blur(5px) sepia(0.5);
        z-index: -2; /* 背景に設定 */
      }
    </style>
  </head>
  <body class="category-{FirstCategory}">
    <div class="header">
      <div class="blog-title">{BlogTitle}</div>
      <div class="category">
        <span>{FirstCategory}</span>
      </div>
    </div>
    <div class="main-wrapper">
      <div class="main">
        <div class="entry-title">{Title}</div>
        <div class="geometric-pattern"></div>
      </div>
    </div>
  </body>
</html>