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

image0

このテーマの特徴

このHTMLテンプレートは、ブログ記事のアイキャッチをデザインするための、カスタマイズ可能なテンプレートです。主な特徴は以下の通りです。

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

  • カラーテーマ: ベースカラー、グラデーション、テキストカラー、アクセントカラー、アイコンカラーを :root の変数で定義しています。これにより、CSSの変更だけで簡単にデザインを変更できます。
  • カテゴリーによるカスタマイズ: body.category-{FirstCategory} を使うことで、カテゴリーごとに異なる背景グラデーションを設定できます。
  • コンテンツの丸み: --content-rounded 変数でコンテンツの丸みを調整できます。

2. シンプルなレイアウト

  • ヘッダー: ブログのタイトル、アイコン、カテゴリを表示します。
  • メインコンテンツ: 記事のタイトルを表示します。
  • レスポンシブデザイン: モバイル端末にも対応するよう設計されています。

3. SEOに配慮した設計

  • メタデータ: meta charset と lang 属性を設定しています。
  • 見出し: 記事のタイトルは h1 要素で表現しています。
  • 画像の最適化: アイコンはSVGまたはbase64化した画像のみ挿入できるようになっています。

4. 柔軟性と拡張性

  • テンプレートエンジンとの連携: {BlogTitle}、{FirstCategory}、{Title} などのプレースホルダーを使用することで、テンプレートエンジンと連携して動的にコンテンツを生成できます。
  • CSSのカスタマイズ: CSSを自由に変更することで、デザインをさらに細かく調整できます。
  • 追加要素: ヘッダーやメインコンテンツに、必要に応じて他の要素を追加できます。

5. 実用的な機能

  • 行数制限: 記事のタイトルは -webkit-line-clamp と line-clamp を使用して、3行で表示されるようになっています。
  • テキストオーバーフロー: テキストが長くなった場合に、ellipsis を使用して省略表示されます。
  • 余白: Xのシェア時には、アイキャッチの下部にタイトル要素が重ねて表示されるため、空白を用意しています。

このテンプレートは、ブログ記事のアイキャッチデザインを効率的に行うための基礎として、様々なブログサービスやプラットフォームで活用できます。必要に応じて、デザインや機能をカスタマイズすることで、より洗練されたアイキャッチを作成することができます。

ソースコード

<!DOCTYPE html>
<html lang="{BlogLanguage}">
  <head>
    <meta charset="utf-8">
    <style>
      :root {
        --bg-main: #f0f6ff; /* ベースカラー */
        --bg-gradient: linear-gradient(to bottom right, #f0f6ff, #e0ebff); /* グラデーション */
        --text-main: #1a2a48; /* メインテキストカラー */
        --text-accent: #337ab7; /* アクセントカラー */
        --icon-color: #337ab7; /* アイコンカラー */
        --content-rounded: 12px; /* コンテンツの丸み */
      }

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

      body {
        background-color: var(--bg-gradient);
        color: var(--text-main);
        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-日記 {
        --bg-gradient: linear-gradient(to bottom right, #ffe0e0, #ffc0c0); /* 日記カテゴリの色 */
      }

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

      /* ヘッダーの設定 */
      .header {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 24px;
      }

      .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 {
        width: 80px;
        height: 80px;
        margin-right: 24px;
      }

      .blog-title {
        max-width: 60%;
      }

      .blog-title .title {
        font-size: 32px;
        font-weight: bold;
        color: var(--text-main);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .spacer {
        flex-grow: 1;
      }

      .category {
        display: flex;
        justify-content: center;
        gap: 15px;
        max-width: 25%;
      }

      .category span {
        display: block;
        padding: 4px 12px;
        border-radius: 24px;
        background-color: var(--text-accent);
        color: var(--bg-main);
        font-size: 16px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 1px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      /* メインコンテンツの設定 */
      .main-wrapper {
        flex: 1;
        width: 100%;
        display: flex;
        padding-bottom: 56px; /* Xのシェア時には、アイキャッチの下部に
        タイトル要素が重ねて表示されるため空白を用意しておくことを推奨します */
      }

      .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: 3; /* 行数の上限 */
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        overflow-wrap: break-word;
        word-break: auto-phrase;
        color: var(--text-main);
        font-size: 48px;
        font-weight: bold;
        margin-bottom: 16px;
      }
    </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" fill="var(--icon-color)">
          <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" />
          <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" />
        </svg>
        <!-- SVGかbase64化した画像のみ挿入することが可能です -->
      </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>
    </div>
  </body>
</html>