視覚的に訴求するブログ記事用アイキャッチ画像のテンプレート

image0

このテーマの特徴

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

1. カスタマイズ可能なデザイン:

  • カラー: --bg-main、--bg-secondary、--text-main、--text-back などのCSS変数を用いることで、背景色、テキスト色などを簡単に変更できます。
  • フォント: --font-heading、--font-body でヘッダーと本文のフォントをそれぞれ設定できます。
  • 丸み: --content-rounded を調整することで、コンテンツの角の丸みを変更できます。
  • カテゴリによるカスタマイズ: body.category-日記 のように、カテゴリごとに異なるスタイルを適用できます。

2. シンプルで洗練されたレイアウト:

  • ヘッダー: ブログタイトル、ロゴ（またはアイコン）、カテゴリを表示し、記事の概要を端的に示します。
  • メインエリア: 記事のタイトル、要約、日付などが分かりやすく表示されます。
  • グラデーション背景: main-wrapper::before を用いて、視覚的なアクセントとなるグラデーション背景を追加しています。

3. 読みやすさを考慮したデザイン:

  • フォントサイズ: タイトル、本文、日付など、それぞれの要素に適したフォントサイズが設定されています。
  • 行間: line-height を調整することで、読みやすい行間を実現しています。
  • 余白: 適切な余白を設定することで、要素間の視覚的なバランスを取り、見やすさを向上させています。

4. SEOに配慮した設計:

  • メタタグ: meta charset="utf-8" を設定することで、文字コードをUTF-8に指定し、様々な言語に対応しています。
  • 言語指定: lang="{BlogLanguage}" を用いて、ブログの言語を指定することで、SEOに役立ちます。

5. 再利用可能なテンプレート:

  • 変数: {BlogTitle}、{Title}、{FirstCategory}、{PostedYear}、{PostedMonth}、{PostedDate} などの変数を用いることで、様々なブログ記事に適用できます。
  • ロゴ/アイコン: <svg> または <img> タグでロゴやアイコンを簡単に設定できます。

改善点:

  • レスポンシブデザイン: 現在のテンプレートは、画面サイズに合わせたレイアウト調整がされていません。モバイル端末にも対応できるレスポンシブデザインの追加が推奨されます。
  • 画像の追加: アイキャッチ画像のテンプレートでは画像が設定されていません。画像を追加することで、視覚的な魅力を高められます。
  • 詳細情報の追加: 記事の作者、公開日時、コメント数などの情報を追加することもできます。

これらの特徴を活かして、ブログ記事のアイキャッチ画像を魅力的にデザインすることができます。

ソースコード

<!DOCTYPE html>
<html lang="{BlogLanguage}">
  <head>
    <meta charset="utf-8">
    <style>
      :root {
        --bg-main: #FFF;
        --bg-secondary: #003368;
        --text-main: #003368;
        --text-back: #d4e3f0;
        --content-rounded: 12px;
        --font-heading: 'Roboto', sans-serif;
        --font-body: 'Lato', serif;
      }

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

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

      /* カテゴリによるカスタマイズ */
      body.category-日記 {
        background-color: #fff;
      }

      body > div {
        background-color: var(--bg-main);
      }
      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 {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 18px;
      }
      .header > :first-child {
        margin-left: 24px;
      }
      .header > :last-child {
        margin-right: 24px;
      }
      .header .base {
        display: flex;
        flex-direction: row;
        align-items: center;
      }
      .icon > svg, .icon > img {
        border-radius: 50%;
        width: 64px;
        margin-right: 12px;
      }
      .blog-title {
        max-width: 60%;
      }
      .blog-title .title {
        font-size: 48px;
        font-weight: bold;
        color: var(--text-main);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .spacer {
        flex-grow: 1;
      }
      .category {
        display: flex;
        justify-content: center;
        gap: 15px;
        max-width: 25%;
      }
      .category span {
        display: block;
        box-sizing: border-box;
        padding: 2px 12px;
        border-radius: 8px;
        background-color: var(--text-back);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 30px;
        line-height: 1.3;
        font-weight: bold;
        color: var(--text-main);
      }
      .category span:empty {
        display: none;
      }

      .main-wrapper {
        flex: 1;
        width: 100%;
        display: flex;
        padding-bottom: 56px;
      }

      .main {
        width: 75%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 20px auto 8px;
        overflow: hidden;
        text-align: center;
      }

      .entry-title {
        font-family: var(--font-heading);
        font-size: 56px;
        font-weight: bold;
        color: var(--text-main);
        margin-bottom: 16px;
      }

      .entry-excerpt {
        font-size: 24px;
        line-height: 1.6;
        color: #555;
        margin-bottom: 32px;
      }

      /* グラデーション背景を追加 */
      .main-wrapper::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          to bottom right,
          #f08080,
          #ffb6c1
        );
        opacity: 0.7;
        z-index: -1;
      }
    </style>
  </head>
  <body class="category-{FirstCategory}">
    <div class="header">
      <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">
        <div class="title">{BlogTitle}</div>
      </div>
      <div class="spacer"></div>
      <div class="category">
        <span>{FirstCategory}</span>
      </div>
    </div>
    <div class="main-wrapper">
      <div class="main">
        <div class="entry-title">{Title}</div>
        <div class="entry-excerpt">{PostedYear}年{PostedMonth}月{PostedDate}日</div>
      </div>
    </div>
  </body>
</html>