レトロな雰囲気でSEOに強いアイキャッチテンプレート

image0

このテーマの特徴

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

1. シンプルなデザイン

  • ベースカラーは薄いグレーで、テキストカラーは黒を使用し、全体的にシンプルで読みやすいデザインになっています。
  • フォントはHelveticaを使用しており、モダンで親しみやすい印象を与えます。

2. ノイズ加工によるレトロな雰囲気

  • 背景にノイズ加工を施すことで、レトロな雰囲気を演出しています。
  • ノイズのカラーやサイズ、ぼかしの強さなどを調整することで、様々な雰囲気を表現できます。

3. カテゴリー表示

  • 記事のカテゴリーを分かりやすく表示できます。
  • カテゴリー名の背景にはノイズカラーを使用し、デザインに統一感を持たせています。

4. ブログタイトルと記事タイトルの強調

  • ブログタイトルと記事タイトルは、フォントサイズと太字で強調することで、視覚的に分かりやすくしています。

5. 柔軟なカスタマイズ

  • BlogLanguage, BlogTitle, Title, FirstCategory などの変数を使用することで、ブログ情報に合わせて簡単にカスタマイズできます。
  • CSSの変数を使用することで、カラーやフォントなどのデザイン要素を簡単に変更できます。

6. レスポンシブデザイン

  • テンプレートは、幅広いデバイスサイズに対応するよう、レスポンシブデザインになっています。

7. SEOに配慮した構造

  • HTMLコードは、SEOに配慮した構造になっています。
  • metaタグやtitleタグを適切に設定することで、検索エンジンに情報を伝えることができます。

まとめ

このHTMLテンプレートは、シンプルながらもレトロな雰囲気を醸し出し、SEOに配慮したブログ記事のアイキャッチを作成するのに適しています。様々なカスタマイズに対応できるため、ブログのデザインに合わせて自由に調整することができます。

ソースコード

<!DOCTYPE html>
<html lang="{BlogLanguage}">
  <head>
    <meta charset="utf-8">
    <style>
      :root {
        --bg-main: #f5f5f5; /* ベースカラー: 薄いグレー */
        --noise-color: #e0e0e0; /* ノイズカラー: より薄いグレー */
        --text-main: #333; /* テキストカラー: 黒 */
        --font-family: 'Helvetica', sans-serif; /* フォント: Helvetica */
      }

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

      body {
        background-color: var(--bg-main);
        color: var(--text-main);
        font-family: var(--font-family);
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 24px;
        line-height: 1.4;
        word-break: break-word;
      }

      /* ノイズ加工 */
      .noise-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cmVjdCBmaWxsPSIjZTA2ODc2IiB3aWR0aD0iMTAlIiBoZWlnaHQ9IjEwMCUiIHg9IjAlIiB5PSIwIi8+PHJlY3QgZmlsbD0iI2UwNjg3NiIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAlIiB4PSIwIiB5PSIxMCUiLz48cmVjdCBmaWxsPSIjZTA2ODc2IiB3aWR0aD0iMTAlIiBoZWlnaHQ9IjEwMCUiIHg9IjEwIiB5PSIwIi8+PHJlY3QgZmlsbD0iI2UwNjg3NiIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAlIiB4PSIxMCUiIHk9IjEwIi8+PHJlY3QgZmlsbD0iI2UwNjg3NiIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAlIiB4PSIyMCUiIHk9IjAiLz48cmVjdCBmaWxsPSIjZTA2ODc2IiB3aWR0aD0iMTAlIiBoZWlnaHQ9IjEwMCUiIHg9IjIwIiB5PSIxMCUiLz48cmVjdCBmaWxsPSIjZTA2ODc2IiB3aWR0aD0iMTAlIiBoZWlnaHQ9IjEwMCUiIHg9IjMwIiB5PSIwIi8+PHJlY3QgZmlsbD0iI2UwNjg3NiIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAlIiB4PSIzMCUiIHk9IjEwIi8+PHJlY3QgZmlsbD0iI2UwNjg3NiIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAlIiB4PSI0MCUiIHk9IjAiLz48cmVjdCBmaWxsPSIjZTA2ODc2IiB3aWR0aD0iMTAlIiBoZWlnaHQ9IjEwMCUiIHg9IjQwIiB5PSIxMCUiLz48cmVjdCBmaWxsPSIjZTA2ODc2IiB3aWR0aD0iMTAlIiBoZWlnaHQ9IjEwMCUiIHg9IjUwIiB5PSIwIi8+PHJlY3QgZmlsbD0iI2UwNjg3NiIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAlIiB4PSI1MCUiIHk9IjEwIi8+PHJlY3QgZmlsbD0iI2UwNjg3NiIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAlIiB4PSI2MCUiIHk9IjAiLz48cmVjdCBmaWxsPSIjZTA2ODc2IiB3aWR0aD0iMTAlIiBoZWlnaHQ9IjEwMCUiIHg9IjYwIiB5PSIxMCUiLz48cmVjdCBmaWxsPSIjZTA2ODc2IiB3aWR0aD0iMTAlIiBoZWlnaHQ9IjEwMCUiIHg9IjcwIiB5PSIwIi8+PHJlY3QgZmlsbD0iI2UwNjg3NiIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAlIiB4PSI3MCUiIHk9IjEwIi8+PHJlY3QgZmlsbD0iI2UwNjg3NiIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAlIiB4PSI4MCUiIHk9IjAiLz48cmVjdCBmaWxsPSIjZTA2ODc2IiB3aWR0aD0iMTAlIiBoZWlnaHQ9IjEwMCUiIHg9IjgwIiB5PSIxMCUiLz48cmVjdCBmaWxsPSIjZTA2ODc2IiB3aWR0aD0iMTAlIiBoZWlnaHQ9IjEwMCUiIHg9Ijk0IiB5PSIwIi8+PHJlY3QgZmlsbD0iI2UwNjg3NiIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAlIiB4PSI5MCUiIHk9IjEwIi8+PC9zdmc+");
        background-size: 30px 30px; /* ノイズのサイズ */
        background-repeat: repeat; /* ノイズの繰り返し */
        filter: blur(2px); /* ノイズのぼかし */
        opacity: 0.2; /* ノイズの透明度 */
      }

      .content {
        position: relative;
        width: 100%;
        max-width: 800px;
        padding: 40px;
        background-color: white;
        border-radius: 12px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      }

      .blog-title {
        font-size: 36px;
        font-weight: bold;
        margin-bottom: 20px;
      }

      .entry-title {
        font-size: 48px;
        font-weight: bold;
        margin-bottom: 16px;
      }

      .category {
        font-size: 18px;
        font-weight: normal;
        margin-bottom: 32px;
      }

      .category span {
        display: inline-block;
        padding: 8px 16px;
        background-color: var(--noise-color);
        border-radius: 24px;
        color: var(--text-main);
      }
    </style>
  </head>
  <body>
    <div class="noise-overlay"></div>
    <div class="content">
      <div class="blog-title">{BlogTitle}</div>
      <div class="entry-title">{Title}</div>
      <div class="category">
        <span>{FirstCategory}</span>
      </div>
    </div>
  </body>
</html>