洗練されたダークモードアイキャッチでブログ記事を際立たせる

image0

このテーマの特徴

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

デザインの特徴

  • ダークモードを採用: 背景色はダークグレーとブラックで統一されており、テキストはホワイトで表示されます。これは、モダンでスタイリッシュな印象を与え、記事の内容に集中しやすい環境を提供します。
  • アクセントカラーの活用: ゴールドをアクセントカラーとして採用し、タイトルや区切り線に効果的に使用することで、視覚的なアクセントを付けています。
  • タイポグラフィー: 記事タイトルは大きく、太字で表示され、視覚的なインパクトを与えます。また、見出しや本文のフォントサイズは適切に調整されており、読みやすさを考慮しています。
  • 影と丸み: コンテンツ部分は影と丸みを帯びたデザインを採用しており、立体感と洗練された印象を与えています。
  • カテゴリ表示: 記事のカテゴリを分かりやすく表示するために、背景色と太字で強調表示しています。

機能的な特徴

  • レスポンシブデザイン: デバイスの幅に合わせてレイアウトが自動的に調整されるため、PC、タブレット、スマートフォンなど、あらゆるデバイスで快適に閲覧できます。
  • カスタマイズしやすい: ブログタイトル、記事タイトル、カテゴリ名などの情報は、テンプレート内で変数として定義されているため、簡単に変更できます。
  • SEOに配慮した設計: 見出しタグ（h1）やメタタグを使用することで、検索エンジンのランキングで上位表示されやすくなるように設計されています。

利点

  • 視覚的に魅力的なアイキャッチを作成: ダークモードとアクセントカラーの組み合わせ、タイポグラフィー、影などの効果により、目を引くアイキャッチを作成できます。
  • シンプルで洗練されたデザイン: シンプルながらも洗練されたデザインは、どんなブログ記事にもマッチします。
  • カスタマイズしやすい: ブログのテーマに合わせて、色やフォントなどを簡単に変更できます。

全体的な評価

このHTMLテンプレートは、シンプルながらもスタイリッシュなアイキャッチを作成するための優れたテンプレートです。ダークモード、アクセントカラー、タイポグラフィー、影などの効果的なデザイン要素が組み込まれており、視覚的に魅力的なアイキャッチを作成できます。また、カスタマイズ性も高く、様々なブログやウェブサイトに活用できます。

ソースコード

<!DOCTYPE html>
<html lang="{BlogLanguage}">
  <head>
    <meta charset="utf-8">
    <style>
      :root {
        --bg-main: #181818; /* ダークグレー */
        --bg-secondary: #000; /* ブラック */
        --text-main: #fff; /* ホワイト */
        --text-back: #333; /* ダークグレー */
        --accent-color: #FFD700; /* ゴールド */
        --content-rounded: 12px;
        --box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      }

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

      body {
        background-color: var(--bg-secondary);
        color: var(--text-main);
        font-family: 'Noto Sans CJK JP', sans-serif;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        padding: 24px;
        line-height: 1.4;
        word-break: break-word;
      }

      body > div {
        background-color: var(--bg-main);
        padding: 24px;
        border-radius: var(--content-rounded);
        box-shadow: var(--box-shadow);
      }

      /* ヘッダー部分 */
      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 0;
      }

      .header .blog-title {
        font-size: 24px;
        font-weight: bold;
        text-transform: uppercase;
      }

      .header .category {
        display: flex;
        gap: 12px;
        font-size: 16px;
      }

      .category span {
        background-color: var(--text-back);
        color: var(--text-main);
        padding: 6px 12px;
        border-radius: 24px;
        font-weight: bold;
      }

      /* メインコンテンツ部分 */
      .main-wrapper {
        flex: 1;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 56px; /* シェアボタンのための余白 */
      }

      .main {
        width: 75%;
        text-align: center;
      }

      .entry-title {
        font-size: 64px;
        font-weight: bold;
        text-transform: uppercase;
        margin-bottom: 16px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* 影 */
      }

      .entry-title::before {
        content: '';
        display: block;
        width: 100%;
        height: 6px;
        background-color: var(--accent-color);
        margin-bottom: 8px;
        border-radius: 3px;
      }
    </style>
  </head>
  <body class="category-{FirstCategory}">
    <div class="header">
      <div class="blog-title">{BlogTitle}</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>