レトロな雰囲気が引き立つアイキャッチテンプレート

image0

このテーマの特徴

このHTMLテンプレートは、レトロな雰囲気を醸し出すアイキャッチ用のデザインとなっています。以下に、具体的な特徴を解説します。

1. レトロなカラーパレット:

  • --bg-mainと--bg-secondaryには、薄いグレーと濃いグレーが設定されています。これらは、レトロな雰囲気を出すための定番カラーです。
  • --text-mainには、濃いグレーが設定され、視認性を確保しつつレトロな雰囲気を保っています。
  • --text-accentには、マスタードイエローが設定されています。これは、レトロな雰囲気を出しつつ、アクセントカラーとして注目を集める役割を果たします。

2. レトロなフォント:

  • 'Noto Sans CJK JP', serifというフォントが使用されています。これは、読みやすく、かつレトロな雰囲気を持つ日本語フォントです。

3. レトロなレイアウト:

  • ヘッダー、メインコンテンツ、フッターというシンプルな構造を採用し、レトロな雰囲気に合うように整えられています。
  • ヘッダーには、ブログタイトルとカテゴリが表示され、レトロな雰囲気のアイコンが配置されています。
  • メインコンテンツには、レトロなフレーム、グラデーション、テクスチャが施され、視覚的なアクセントになっています。

4. レトロなデザイン要素:

  • メインコンテンツには、レトロなフレーム、グラデーション、テクスチャが施されています。
  • フレームは、濃いグレーの枠線と影で表現されています。
  • グラデーションは、マスタードイエローのグラデーションで、レトロな雰囲気を強調しています。
  • テクスチャは、ノイズパターンで表現され、レトロな印刷物のような質感を出しています。

5. カテゴリによるカスタマイズ:

  • body.category-{FirstCategory}というクラスを使用することで、カテゴリに応じて背景色を変更することができます。
  • 例えば、category-日記というカテゴリの場合、背景色が白になります。

6. その他:

  • border-radiusやbox-shadowなどのCSSプロパティを使って、丸みのある角や影をつけることで、レトロな雰囲気をさらに高めています。
  • line-heightやword-breakなどのCSSプロパティを使って、テキストの可読性を高めています。

7. SEO対策:

  • meta charset="utf-8"タグで文字コードを指定し、日本語の表示を正しく行うように設定されています。
  • lang="{BlogLanguage}"タグで言語を指定し、検索エンジンのクロール効率を高めています。

まとめ:

このHTMLテンプレートは、レトロな雰囲気を前面に出したアイキャッチデザインとなっています。カラーパレット、フォント、レイアウト、デザイン要素、カスタマイズ機能など、さまざまな要素が組み合わされ、魅力的なアイキャッチを作成することができます。

ソースコード

<!DOCTYPE html>
<html lang="{BlogLanguage}">
  <head>
    <meta charset="utf-8">
    <style>
      :root {
        --bg-main: #F5F5F5; /* レトロな雰囲気の薄いグレー */
        --bg-secondary: #D9D9D9; /* レトロな雰囲気の濃いグレー */
        --text-main: #333333; /* レトロな雰囲気の濃いグレー */
        --text-accent: #FFC300; /* レトロな雰囲気のマスタードイエロー */
        --content-rounded: 12px;
      }
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        background-color: var(--bg-secondary);
        color: var(--text-main);
        font-family: 'Noto Sans CJK JP', 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;
      }
      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: space-between;
        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(--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;
      }

      /* レトロなフレーム */
      .main {
        border: 10px solid var(--bg-secondary); /* レトロな雰囲気の濃いグレーの枠線 */
        border-radius: var(--content-rounded);
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); /* レトロな雰囲気の影 */
      }

      /* レトロなグラデーション */
      .main::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          to bottom,
          rgba(255, 227, 119, 0.5),
          rgba(231, 183, 67, 0.5)
        ); /* レトロなマスタードイエローのグラデーション */
        z-index: -1;
        opacity: 0.5;
        border-radius: var(--content-rounded);
      }

      /* レトロなテクスチャ */
      .main::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cmVjdCBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIi8+PHBhdGggZD0iTSAwIDAgTCAxMDAgMCAgTCAxMDAgMTAwICAgTCAwIDEwMCB6IiBmaWxsPSJub25lIiBzdHJv"
          "a2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMSIgZmlsbC1vcGFjaXR5PSIuMSIgc3Ryb2tlLW9wYWNpdHk9Ii4xIi8+PC9zdmc+"); /* レトロなノイズテクスチャ */
        z-index: -2;
        opacity: 0.1;
        border-radius: var(--content-rounded);
      }
    </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>
  </body>
</html>