ブログに最適なアイキャッチ画像で視覚的にアピールし、興味を惹く

image0

このテーマの特徴

このHTMLテンプレートは、ブログ記事のアイキャッチ画像を効果的に表示するための、シンプルでカスタマイズしやすい構造となっています。主な特徴は以下の通りです。

1. カスタマイズしやすいCSS変数:

  • --bg-main, --bg-secondary, --text-main, --text-secondary, --accent-color といったCSS変数を定義することで、ブログのテーマカラーを簡単に変更できます。
  • --font-main を使用して、ブログ全体で使用するフォントを指定できます。
  • --content-rounded で、コンテンツ部分の角丸の大きさを統一的に調整できます。

2. カテゴリによるカラー変更:

  • body.category-{FirstCategory} のように、body要素にクラスを追加することで、カテゴリに応じたカラーを変更できます。
  • --accent-color 変数に、各カテゴリのカラーを指定することで、見やすさを向上させ、カテゴリの違いを視覚的に表現できます。

3. シンプルで整然としたレイアウト:

  • header, main-wrapper, main といった要素を用いて、アイキャッチ画像、タイトル、概要を分かりやすく配置します。
  • flexbox を利用することで、画面サイズに合わせて要素が適切に配置されます。

4. ブログタイトルとカテゴリの表示:

  • header 要素内に、ブログタイトルとカテゴリを表示します。
  • blog-title クラスはブログタイトルを大きく表示し、category クラスはカテゴリ名を強調表示します。

5. 記事タイトルと概要の表示:

  • entry-title クラスは記事タイトルを大きく表示し、entry-summary クラスは記事概要を簡潔に表示します。

6. 日付表示:

  • 記事の概要部分に、{PostedYear}年{PostedMonth}月{PostedDate}日 と日付を表示し、記事の投稿日時を明確にします。

7. 柔軟なコンテンツエリア:

  • main 要素は最大幅 800px とし、幅広いデバイスで適切な表示を実現します。
  • main-wrapper 要素には padding-bottom: 56px; を設定し、シェアボタン等の要素がアイキャッチ画像の下に重ならないよう配慮しています。

ソースコード

<!DOCTYPE html>
<html lang="{BlogLanguage}">
  <head>
    <meta charset="utf-8">
    <style>
      :root {
        --bg-main: #f8f8f8;
        --bg-secondary: #222;
        --text-main: #222;
        --text-secondary: #fff;
        --accent-color: #f08080; /* カテゴリカラー */
        --font-main: 'Noto Sans CJK JP', sans-serif;
        --content-rounded: 16px;
      }
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        background-color: var(--bg-secondary);
        color: var(--text-secondary);
        font-family: var(--font-main);
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        padding: 24px;
        line-height: 1.5;
        word-break: break-word;
      }

      /* カテゴリによるカスタマイズ */
      body.category-日記 {
        --accent-color: #f0e68c; /* 日記カテゴリのカラー */
      }
      body.category-技術 {
        --accent-color: #90caf9; /* 技術カテゴリのカラー */
      }

      /* コンテンツ部分の共通設定 */
      body > div {
        background-color: var(--bg-main);
        padding: 32px;
        border-radius: var(--content-rounded);
      }

      /* ヘッダの設定 */
      .header {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 32px;
      }
      .header .blog-title {
        font-size: 24px;
        font-weight: bold;
        color: var(--text-main);
      }
      .header .category {
        margin-left: auto; /* 右寄せ */
        font-size: 16px;
        font-weight: bold;
        background-color: var(--accent-color);
        color: var(--text-secondary);
        padding: 8px 16px;
        border-radius: var(--content-rounded);
      }

      /* メインコンテンツの設定 */
      .main-wrapper {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 56px; /* Xのシェア時には、アイキャッチの下部に
        タイトル要素が重ねて表示されるため空白を用意しておくことを推奨します */
      }
      .main {
        max-width: 800px;
        width: 100%;
        display: flex;
        flex-direction: column;
        text-align: center;
      }
      .entry-title {
        font-size: 48px;
        font-weight: bold;
        color: var(--text-main);
        margin-bottom: 16px;
      }
      .entry-summary {
        font-size: 18px;
        line-height: 1.6;
        color: var(--text-main);
      }
    </style>
  </head>
  <body class="category-{FirstCategory}">
    <div class="header">
      <div class="blog-title">{BlogTitle}</div>
      <div class="category">{FirstCategory}</div>
    </div>
    <div class="main-wrapper">
      <div class="main">
        <div class="entry-title">{Title}</div>
        <div class="entry-summary">{PostedYear}年{PostedMonth}月{PostedDate}日</div>
      </div>
    </div>
  </body>
</html>