ブログ記事のアイキャッチ画像用の洗練されたデザインテンプレート

image0

このテーマの特徴

このHTMLテンプレートは、ブログ記事のアイキャッチ画像として使用できる、視覚的に魅力的なデザインのテンプレートです。以下にその特徴を詳しく説明します。

1. カラーパレットとスタイリング

  • オレンジを基調とした背景：目を引くオレンジ色の背景が、記事への関心を高めます。
  • 淡いグレーのコンテンツエリア：コンテンツエリアは淡いグレーで、オレンジ色の背景とのコントラストが鮮明で、読みやすさを向上させます。
  • アクセントカラーの黄色：黄色は、タイトルやカテゴリ、装飾要素に効果的に使用され、視覚的なアクセントを提供します。
  • 丸みのある角：コンテンツエリアに丸みのある角を使用することで、デザインに柔らかさを加え、親しみやすさを演出しています。
  • 影効果：コンテンツエリアに影をつけることで、奥行きと立体感を出し、デザインをより洗練されたものにします。
  • フォント：Noto Sans CJK JPを使用することで、日本語の表示にも配慮した、読みやすく美しいデザインを実現しています。

2. レイアウトと構造

  • ヘッダー部分：ブログタイトルとカテゴリを表示するヘッダー部分には、ブログのロゴやアイコンも配置できるようになっています。
  • メインコンテンツ部分：記事のタイトルと装飾要素を配置するメインコンテンツ部分は、中央に配置され、視覚的な中心となります。
  • 装飾要素：円形の装飾要素を配置することで、デザインに動きと遊び心を加え、視覚的な興味を引きつけます。
  • レスポンシブデザイン：テンプレートはレスポンシブデザインに最適化されており、さまざまなデバイスで美しく表示されます。

3. 詳細な機能

  • カテゴリ表示：記事のカテゴリを黄色で強調表示することで、読者は記事の内容をすぐに把握できます。
  • 新着記事表示：記事のタイトルに「New」と表示することで、最新の記事であることを明確に示します。
  • 文字装飾：タイトルに影をつけることで、視覚的なインパクトを与え、記事への注目を集めます。
  • SVGアイコンの使用：ブログのロゴやアイコンとしてSVGを使用することで、鮮明でスケーラブルな表示を実現しています。

4. テンプレートの柔軟性

  • カスタマイズ可能なカラー：--bg-main, --bg-secondary, --bg-accent などの変数を変更することで、好みのカラーパレットにカスタマイズできます。
  • タイトルとカテゴリの編集：{BlogTitle}, {FirstCategory}, {Title} などの変数を変更することで、記事の内容に合わせてタイトルやカテゴリを編集できます。
  • 装飾要素の変更：必要に応じて、装飾要素を削除したり、別の要素を追加したりすることができます。

5. まとめ

このHTMLテンプレートは、ブログ記事のアイキャッチ画像として、視覚的に魅力的なデザインを実現するのに最適なテンプレートです。カスタマイズしやすい構造と柔軟なデザインにより、さまざまなブログに適合し、記事の注目度を高めることができます。

ソースコード

<!DOCTYPE html>
<html lang="{BlogLanguage}">
  <head>
    <meta charset="utf-8">
    <style>
      :root {
        --bg-main: #F0F0F0; /* 淡いグレー */
        --bg-secondary: #FF5733; /* オレンジ */
        --bg-accent: #FFC300; /* 黄 */
        --text-main: #000; /* 黒 */
        --text-back: #FFF; /* 白 */
        --content-rounded: 12px;
        --box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* 影 */
      }
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        background-color: var(--bg-secondary); /* 背景にオレンジ */
        color: var(--text-main); /* 文字色は黒 */
        font-weight: normal;
        font-family: 'Noto Sans CJK JP';
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        padding: 24px 24px;
        line-height: 1.4;
        word-break: break-word;
        overflow: hidden; /* スクロールバーを隠す */
      }

      body > div {
        background-color: var(--bg-main); /* コンテンツ部分の背景は淡いグレー */
        padding: 24px;
        box-shadow: var(--box-shadow); /* 影をつける */
      }

      body > div:first-child {
        border-radius: var(--content-rounded) var(--content-rounded) 0 0;
      }

      body > div:last-child {
        border-radius: 0 0 var(--content-rounded) var(--content-rounded);
      }

      /* ヘッダー部分 */
      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
      }

      .header-left {
        display: flex;
        align-items: center;
      }

      .icon > svg, .icon > img {
        width: 64px;
        margin-right: 12px;
      }

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

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

      .category span {
        background-color: var(--bg-accent); /* 黄色の背景 */
        color: var(--text-back); /* 文字は白 */
        padding: 8px 16px;
        border-radius: 8px;
        font-weight: bold;
      }

      /* メインコンテンツ部分 */
      .main-wrapper {
        flex: 1;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative; /* 子要素に対して相対的な位置を設定 */
      }

      .main {
        width: 75%;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
        padding-bottom: 56px;
      }

      .entry-title {
        font-size: 64px;
        font-weight: bold;
        color: var(--text-main);
        line-height: 1.2;
        margin-bottom: 16px;
        text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); /* 文字に影 */
      }

      .entry-title span {
        display: inline-block;
        padding: 8px 16px;
        border-radius: 8px;
        background-color: var(--bg-accent); /* 黄色の背景 */
        color: var(--text-back); /* 文字は白 */
        font-weight: bold;
      }

      /* デコレーション要素 */
      .circle-1 {
        width: 150px;
        height: 150px;
        background-color: var(--bg-accent); /* 黄色の円 */
        border-radius: 50%;
        position: absolute;
        top: -50px;
        left: -50px;
      }

      .circle-2 {
        width: 100px;
        height: 100px;
        background-color: var(--bg-accent); /* 黄色の円 */
        border-radius: 50%;
        position: absolute;
        bottom: -50px;
        right: -50px;
      }
    </style>
  </head>
  <body class="category-{FirstCategory}">
    <div class="header">
      <div class="header-left">
        <div class="icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="90" height="90" viewBox="0 0 90 90">
            <path d="M45,90A45,45,0,1,1,90,45,45.05,45.05,0,0,1,45,90ZM45,5.723A39.278,39.278,0,1,0,84.281,45,39.322,39.322,0,0,0,45,5.723Z" fill="#333"></path>
            <path d="M50.241,22.78a63.54,63.54,0,0,1-4.22-11.3V43.349a2.938,2.938,0,1,1-1.879-.051V11.442A63.6,63.6,0,0,1,39.914,22.78a115.111,115.111,0,0,1-7.739,13.113l2.746,37.579s2.61,2.913,10.151,2.916h.01c7.54,0,10.151-2.916,10.151-2.916l2.746-37.579A115.02,115.02,0,0,1,50.241,22.78Z" fill="#333"></path>
          </svg>
        </div>
        <div class="blog-title">{BlogTitle}</div>
      </div>
      <div class="category">
        <span>{FirstCategory}</span>
      </div>
    </div>
    <div class="main-wrapper">
      <div class="main">
        <div class="entry-title">
          {Title} <span>New</span>
        </div>
      </div>
      <div class="circle-1"></div>
      <div class="circle-2"></div>
    </div>
  </body>
</html>