ブログ記事のアイキャッチをカスタマイズできるHTMLテンプレート

image0

このテーマの特徴

このHTMLテンプレートは、ブログ記事のアイキャッチ部分を作成するためのものです。以下に、このテンプレートの特徴をわかりやすく説明します。

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

  • カラーパレット: テンプレートはCSS変数を使用しており、背景色、テキストカラー、アクセントカラーなどを簡単に変更できます。
  • フォント: デフォルトでは「Noto Sans CJK JP」を使用していますが、他のフォントに変更することも可能です。
  • レイアウト: ヘッダー、アイキャッチ画像、記事タイトル、カテゴリなどの要素の配置を調整できます。
  • カテゴリによるカスタマイズ: 「category-日記」のようにカテゴリ名で条件分岐し、各カテゴリに合わせて背景色などを変更できます。

2. アイキャッチ画像の表示

  • 背景画像: アイキャッチ画像を背景として表示します。
  • グラデーション: アイキャッチ画像の上にグラデーションを重ねることで、奥行きと視覚的なアクセントを追加します。
  • 半透明効果: アイキャッチ画像は半透明に設定されており、背景画像が透けて見えます。

3. タイトルとサブタイトル

  • 記事タイトル: 記事タイトルを大きく表示します。
  • サブタイトル: 投稿日時と著者名をサブタイトルとして表示します。
  • 配置: タイトルとサブタイトルはアイキャッチ画像の中央に配置されます。

4. ヘッダー

  • ブログタイトル: ブログのタイトルを表示します。
  • アイコン: ブログのロゴやアイコンを表示します。
  • カテゴリ: カテゴリ名をタグのように表示します。

5. その他

  • レスポンシブデザイン: 異なる画面サイズに適応するようにレイアウトが調整されています。
  • 可読性: テキストのサイズ、行間、フォントなどを調整し、可読性を高めています。

ソースコード

<!DOCTYPE html>
<html lang="{BlogLanguage}">
<head>
  <meta charset="utf-8">
  <style>
    :root {
      --bg-main: #181818; /* 深みのある青 */
      --bg-secondary: #003368; /* アクセントカラー (濃い青) */
      --text-main: #fff; /* 白 */
      --text-accent: #0096FF; /* アクセントカラー (明るい青) */
      --content-rounded: 12px;
      --gradient-start: #003368; /* グラデーション開始色 */
      --gradient-end: #000000; /* グラデーション終了色 */
    }

    * {
      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;
    }

    /* カテゴリによるカスタマイズ */
    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-accent); /* アクセントカラー */
      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 {
      display: -webkit-box;
      -webkit-line-clamp: 4; /* 行数の上限 */
      line-clamp: 4;
      -webkit-box-orient: vertical;
      overflow: hidden;
      overflow-wrap: break-word;
      word-break: auto-phrase;
      color: var(--text-main);
      font-size: 56px;
      line-height: 1.3;
      font-weight: bold;
    }

    /* アイキャッチのデザイン */
    .eye-catch {
      position: relative;
      width: 100%;
      height: 630px;
      background: linear-gradient(to right, var(--gradient-start), var(--gradient-end)); /* グラデーション背景 */
      overflow: hidden;
      margin-bottom: 20px;
    }

    .eye-catch::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url("https://placehold.co/1200x630"); /* 写真イメージ */
      background-size: cover;
      opacity: 0.4; /* 半透明 */
      z-index: -1; /* 背景に配置 */
    }

    .eye-catch .title {
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      width: 80%;
      font-size: 64px;
      font-weight: bold;
      color: var(--text-main);
      text-align: center;
      line-height: 1.2;
      z-index: 1; /* 最前面に配置 */
    }

    .eye-catch .subtitle {
      position: absolute;
      bottom: 100px;
      left: 50%;
      transform: translateX(-50%);
      width: 80%;
      font-size: 24px;
      font-weight: bold;
      color: var(--text-main);
      text-align: center;
      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="eye-catch">
      <div class="title">{Title}</div>
      <div class="subtitle">
        {PostedYear}年{PostedMonth}月{PostedDate}日 / {AuthorName}
      </div>
    </div>

    <div class="main">
      <div class="entry-title">{Title}</div>
    </div>
  </div>
</body>
</html>