レスポンシブで洗練されたアイキャッチテンプレート

image0

このテーマの特徴

このHTMLテンプレートは、ブログ記事のアイキャッチをデザインするためのベースとして機能する、洗練されたテンプレートです。以下に、その特徴を詳しく説明します。

1. カスタマイズ可能なカラーパレット:

  • :root要素で、--bg-main, --bg-secondary, --text-main, --text-back, --accent-colorという5つのカスタム変数を定義しています。これらの変数は、背景色、テキスト色、アクセントカラーを簡単に変更できるように設計されています。
  • カテゴリによるカラーカスタマイズ: body.category-日記 や body.category-旅行 といったCSSルールにより、カテゴリー別に色を変えることができます。例えば、日記のカテゴリでは背景色を白、アクセントカラーをオレンジ系に、旅行のカテゴリでは背景色を淡い青、アクセントカラーを青系に変更できます。

2. 柔軟なレイアウト:

  • Flexbox: テンプレート全体にFlexboxを使用し、レスポンシブで柔軟なレイアウトを実現しています。
  • コンテンツエリア: コンテンツエリアは、body > div で定義され、背景色、パディング、丸みなどを設定することで、コンテンツを適切に表示することができます。
  • ヘッダー: ヘッダーエリアには、ブログのロゴ、タイトル、カテゴリを表示します。Flexboxを使って要素を水平方向に配置し、必要なスペースを確保します。
  • メインコンテンツ: メインコンテンツは、記事のタイトルを表示するエリアです。-webkit-line-clamp プロパティを使って、タイトルを4行に制限し、読みやすくしています。

3. モダンな要素の追加:

  • 幾何学模様: geometric-pattern クラスで定義された要素は、SVGを使って幾何学模様を生成し、背景にモダンな印象を加えています。透明度を調整することで、控えめなアクセントとして使用することができます。
  • グラデーション: gradient クラスで定義された要素は、背景にグラデーションを追加します。linear-gradient 関数を使って、アクセントカラーと背景色を組み合わせ、視覚的な奥行きを演出しています。

テンプレートの使用例:

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>私のブログ - 最新記事</title>
    <!-- 上記のCSSコードをheadタグ内に記述 -->
  </head>
  <body class="category-日記">
    <div class="header">
      <div class="icon">
        <!-- ここにロゴのSVGアイコンを記述 -->
      </div>
      <div class="blog-title">
        <div class="title">私のブログ</div>
      </div>
      <div class="spacer"></div>
      <div class="category">
        <span>日記</span>
      </div>
    </div>

    <div class="main-wrapper">
      <div class="main">
        <div class="entry-title">今日の夕飯はカレーでした！</div>
      </div>
    </div>
  </body>
</html>

このテンプレートは、ブログ記事のアイキャッチを作成するための基本的なフレームワークを提供します。必要に応じて、CSSを調整したり、独自の要素を追加したりすることで、さらに個性的なアイキャッチをデザインすることができます。

ソースコード

<!DOCTYPE html>
<html lang="{BlogLanguage}">
  <head>
    <meta charset="utf-8">
    <style>
      :root {
        --bg-main: #f0f8ff; /* 淡い水色 */
        --bg-secondary: #003368; /* 濃い青 */
        --text-main: #003368; /* 濃い青 */
        --text-back: #d4e3f0; /* 淡い青 */
        --accent-color: #ff7f50; /* オレンジ */
        --content-rounded: 12px;
      }

      * {
        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-日記 {
        --bg-main: #fff; /* 白 */
        --accent-color: #ff9933; /* オレンジ系 */
      }
      body.category-旅行 {
        --bg-main: #e0ffff; /* 淡い青 */
        --accent-color: #00bfff; /* 青系 */
      }

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

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

      /* モダンな要素: 幾何学模様 */
      .geometric-pattern {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        opacity: 0.15;
      }

      .geometric-pattern svg {
        width: 100%;
        height: 100%;
        fill: var(--accent-color);
      }

      /* グラデーション */
      .gradient {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        background: linear-gradient(to bottom right, var(--accent-color) 0%, var(--text-back) 100%);
        opacity: 0.3;
        border-radius: var(--content-rounded) var(--content-rounded) 0 0;
      }

      /* モバイル対応 */
      @media screen and (max-width: 768px) {
        .main {
          width: 90%;
        }

        .entry-title {
          font-size: 40px;
        }
      }
    </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>
    </div>
    
    <!-- モダンな要素: 幾何学模様 -->
    <div class="geometric-pattern">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
        <polygon points="50,0 100,50 50,100 0,50" />
      </svg>
    </div>
    
    <!-- グラデーション -->
    <div class="gradient"></div>
  </body>
</html>