スタイリッシュで視覚的に魅力的なアイキャッチテンプレート

image0

このテーマの特徴

このHTMLテンプレートは、ブログ記事やウェブサイトのアイキャッチとして利用できる、スタイリッシュで視覚的に魅力的なデザインとなっています。以下に、テンプレートの特徴を詳しく説明します。

1. 視覚的な魅力

  • 背景画像のぼかし効果: filter: blur(10px); を使用して、背景画像にぼかし効果をかけることで、コンテンツを際立たせ、視覚的な興味を惹きつけます。
  • オーバーレイ: 半透明の黒色のオーバーレイ (background-color: var(--bg-overlay);) を使用することで、背景画像を暗くし、コンテンツの視認性を高めます。
  • カラーパレット: ダークグレーの背景 (--bg-main) に対して、白 (--text-main) と薄いグレー (--text-secondary) のテキスト、青 (--primary-color) とオレンジ (--accent-color) のアクセントカラーを使用することで、コントラストがはっきりとした視覚的に魅力的なデザインを実現しています。

2. 柔軟なカスタマイズ

  • CSS変数: :root で定義された CSS 変数 (--bg-main, --text-main など) を使用することで、色やフォントなどのスタイルを簡単に変更できます。これにより、ブログのテーマやデザインに合わせて簡単にカスタマイズできます。
  • レスポンシブデザイン: @media (max-width: 768px) を使用して、モバイルデバイスでの表示に対応しています。これにより、画面サイズに合わせてフォントサイズやレイアウトを調整し、あらゆるデバイスで最適な表示を実現できます。

3. シンプルで使いやすい構造

  • HTML構造: テンプレートはシンプルで理解しやすい HTML 構造を採用しており、初心者でも簡単に編集できます。
  • コンテンツの配置: content クラスを使用して、コンテンツを中央に配置し、視覚的にバランスの取れたレイアウトを実現しています。

ソースコード

<!DOCTYPE html>
<html lang="{BlogLanguage}">
<head>
  <meta charset="utf-8">
  <style>
    :root {
      --bg-main: #181818; /* ダークグレー背景 */
      --bg-overlay: rgba(0, 0, 0, 0.6); /* オーバーレイ */
      --text-main: #fff; /* 白文字 */
      --text-secondary: #d4e3f0; /* 薄いグレー */
      --primary-color: #007bff; /* 青色 */
      --accent-color: #ff5733; /* オレンジ色 */
    }

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

    body {
      background-color: var(--bg-main);
      font-family: 'Noto Sans CJK JP';
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .container {
      width: 100%;
      max-width: 1200px;
      height: 630px;
      position: relative;
      overflow: hidden;
    }

    .image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      filter: blur(10px);
    }

    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: var(--bg-overlay);
      z-index: 0;
    }

    .content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      z-index: 1;
      color: var(--text-main);
    }

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

    .subtitle {
      font-size: 24px;
      font-weight: 400;
      margin-bottom: 32px;
    }

    .category {
      display: inline-block;
      padding: 8px 16px;
      border-radius: 20px;
      background-color: var(--primary-color);
      font-size: 16px;
      font-weight: bold;
      text-transform: uppercase;
      color: var(--text-main);
      margin-bottom: 32px;
    }

    .button {
      display: inline-block;
      padding: 12px 24px;
      border-radius: 20px;
      background-color: var(--accent-color);
      font-size: 16px;
      font-weight: bold;
      text-transform: uppercase;
      color: var(--text-main);
      text-decoration: none;
    }

    @media (max-width: 768px) {
      .title {
        font-size: 48px;
      }

      .subtitle {
        font-size: 18px;
      }

      .category,
      .button {
        font-size: 14px;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <img class="image" src="https://unsplash.com/s/photos/abstract" alt="アイキャッチ画像">
    <div class="overlay"></div>
    <div class="content">
      <h1 class="title">{Title}</h1>
      <h2 class="subtitle">{FirstCategory}</h2>
      <a href="#" class="button">続きを読む</a>
    </div>
  </div>
</body>
</html>