このテーマの特徴

このHTMLテンプレートは、ブログ記事やウェブサイトのアイキャッチをデザインするためのシンプルなテンプレートです。以下に、テンプレートの特徴をわかりやすく説明します。

特徴

洗練されたデザイン: グラデーション背景、丸みのあるコンテンツエリア、明瞭なテキストスタイルを採用することで、視覚的に魅力的なアイキャッチを作成できます。
カスタマイズ可能な要素:
- {BlogLanguage}: ブログの言語を指定できます。
- {Title}: アイキャッチのタイトルを挿入できます。
- {FirstCategory}: 最初のカテゴリ名を設定できます。
- {BlogTitle}: ブログのタイトルを入力できます。
- CSS変数 (--bg-start, --bg-end, --text-main, etc.): 色、フォント、丸みなどのデザイン要素を簡単に変更できます。
レスポンシブデザイン: max-width プロパティによって、画面サイズに合わせてコンテンツが調整されます。
シンプルで軽量: 複雑なコードやスクリプトを使用していないため、読み込みが高速です。

主なデザイン要素

グラデーション背景: 落ち着いた色合いのグラデーションを使用することで、視覚的な奥行きと上品な印象を与えます。
丸みのあるコンテンツエリア: 丸みを帯びたコンテンツエリアは、優しい印象を与え、読みやすさを向上させます。
明瞭なテキストスタイル: 大きなフォントサイズと太字のタイトル、適度な行間は、重要な情報を明確に伝えるのに役立ちます。
カテゴリ表示: ブログのカテゴリをわかりやすく表示することで、読者が記事の内容を理解しやすくなります。

使用方法

テンプレートをコピーします。
{Title}、{FirstCategory}、{BlogTitle} などのプレースホルダーを実際のコンテンツに置き換えます。
CSS変数を変更して、デザインをカスタマイズします。
テンプレートをHTMLファイルとして保存します。

このテンプレートは、ブログ記事やウェブサイトのアイキャッチを素早く簡単に作成するのに役立ちます。必要に応じて、CSSを変更したり、独自の要素を追加したりすることで、さらにカスタマイズできます。

ソースコード

<!DOCTYPE html>
<html lang="{BlogLanguage}">
  <head>
    <meta charset="utf-8">
    <style>
      :root {
        --bg-start: #29466f;
        --bg-end: #4a6990;
        --text-main: #f2f2f2;
        --text-secondary: #d9d9d9;
        --font-main: 'Noto Sans CJK JP', sans-serif;
        --font-secondary: 'Noto Sans CJK JP', sans-serif;
        --content-rounded: 16px;
      }

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

      body {
        background: linear-gradient(to bottom, var(--bg-start), var(--bg-end));
        color: var(--text-main);
        font-family: var(--font-main);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        padding: 24px;
        text-align: center;
        overflow: hidden;
      }

      body > div {
        background-color: rgba(255, 255, 255, 0.05);
        border-radius: var(--content-rounded);
        padding: 48px;
        width: 100%;
        max-width: 1200px;
      }

      .title {
        font-size: 64px;
        font-weight: bold;
        line-height: 1.2;
        margin-bottom: 16px;
        font-family: var(--font-secondary);
      }

      .subtitle {
        font-size: 24px;
        font-weight: 400;
        margin-bottom: 32px;
        opacity: 0.7;
        font-family: var(--font-main);
      }

      .category {
        font-size: 18px;
        font-weight: 400;
        font-family: var(--font-main);
        color: var(--text-secondary);
        text-transform: uppercase;
      }
    </style>
  </head>
  <body>
    <div>
      <h1 class="title">{Title}</h1>
      <h2 class="subtitle">{FirstCategory}</h2>
      <p class="category">{BlogTitle}</p>
    </div>
  </body>
</html>

自動生成アイキャッチのテンプレート集

洗練されたグラデーションアイキャッチでブログ記事を際立単たせる

このテーマの特徴

ソースコード