カスタマイズ可能なブログ記事アイキャッチテンプレート

image0

このテーマの特徴

このHTMLテンプレートは、ブログ記事のアイキャッチ部分をデザインするためのものです。以下に、その特徴を詳しく解説します。

1. カスタマイズ可能な要素:

  • ブログタイトル: {BlogTitle} にはブログ全体のタイトルを記述します。
  • 記事タイトル: {Title} には記事のタイトルを記述します。
  • カテゴリ: {FirstCategory} には記事の最初のカテゴリを記述します。
  • ブログ言語: {BlogLanguage} にはブログの言語コードを記述します。
  • アイコン: <svg> タグ内にブログのアイコン画像をSVG形式で記述します。画像形式は img タグでも対応できます。
  • カラー: CSSの :root に定義されている変数 --bg-main, --bg-secondary, --text-main, --text-highlight を変更することで、背景色、文字色をカスタマイズできます。

2. レイアウト:

  • ヘッダー: ブログタイトルとアイコン、カテゴリを配置するセクションです。
  • メインコンテンツ: 記事タイトルを表示するセクションです。
  • レスポンシブデザイン: Flexbox を使用して、画面サイズに合わせてレイアウトが調整されます。

3. デザイン:

  • シンプルでモダンなデザイン: 白を基調としたシンプルなデザインで、視覚的に邪魔にならず、記事の内容に集中できます。
  • 手書き風タイトル: 記事タイトルに手書き風の装飾が施されています。::before と ::after を使用することで、タイトルの上下にラインを追加しています。
  • カテゴリ表示: カテゴリは色分けされており、記事の分類が一目でわかります。

4. その他の特徴:

  • フォント: Noto Sans CJK JP を使用することで、日本語を含む様々な言語に対応しています。
  • 行数制限: 記事タイトルは line-clamp を使用して4行に制限されています。
  • 文字列省略: overflow: hidden; white-space: nowrap; text-overflow: ellipsis; を使用して、長すぎる文字列を省略表示しています。
  • SVGアイコン: SVGアイコンを使用することで、高画質で軽量なアイコンを表示できます。

5. 利点:

  • 汎用性: ブログのテーマやデザインに合わせて、簡単にカスタマイズできます。
  • SEOに強い: シンプルなデザインで、検索エンジンのクロールに優しい構造です。
  • モバイル対応: レスポンシブデザインを採用しており、スマートフォンやタブレットでも見やすく表示されます。

このHTMLテンプレートは、ブログ記事のアイキャッチを効果的にデザインするための基本的なフレームワークを提供します。必要な要素をカスタマイズすることで、あなたのブログに合った個性的なアイキャッチを作成することができます。

ソースコード

<!DOCTYPE html>
<html lang="{BlogLanguage}">
  <head>
    <meta charset="utf-8">
    <style>
      :root {
        --bg-main: #FFF;
        --bg-secondary: #F5F5F5;
        --text-main: #222;
        --text-highlight: #007bff;
        --content-rounded: 16px;
      }
      * {
        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', sans-serif;
        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);
        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 {
        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: 8px 16px;
        border-radius: 24px;
        background-color: var(--text-highlight);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 20px;
        line-height: 1.3;
        font-weight: bold;
        color: var(--bg-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;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }

      /* 手書き風スタイル */
      .entry-title::before {
        content: "";
        display: block;
        width: 100%;
        height: 6px;
        background-color: var(--text-highlight);
        position: relative;
        top: -10px;
        margin-left: auto;
        margin-right: auto;
        border-radius: 20px;
      }
      .entry-title::after {
        content: "";
        display: block;
        width: 100%;
        height: 6px;
        background-color: var(--text-highlight);
        position: relative;
        top: 10px;
        margin-left: auto;
        margin-right: auto;
        border-radius: 20px;
      }
    </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">
        <h1 class="entry-title">{Title}</h1>
      </div>
    </div>
  </body>
</html>