はてなブログProのアイキャッチ画像をおしゃれにカスタマイズする方法【コピペOK】

この記事でわかること

はてなブログProの自動生成アイキャッチとは？
HTMLでどこをどう編集すればおしゃれになるか
初心者でも失敗しにくいコードテンプレート
配色やフォントなどのカスタマイズポイント
実際に筆者が試して微調整した「Q&A集」つき！

はじめに

こんなお悩み、ありませんか？

自動生成されるアイキャッチがなんとなく古臭い、イマイチしっくりこない
ブログの世界観と合ったデザインにしたいけど、どこを触ればいいかわからない
HTMLやCSSは苦手だけど、テンプレートで簡単におしゃれにしたい

そんな悩みをまるっと解決できる記事を、今回はご用意しました。

はてなブログProのアイキャッチ、自動でつくってくれるのはありがたいけど、正直「ちょっとダサい」って思ったことありませんか？

私もその一人でした。

実際に自分のブログ「くらしハック研究所。」で自動生成アイキャッチのデザインをカスタマイズしてみたのですが、調整に3時間ほどかかりました（笑）。

でもその甲斐あって、納得のいくデザインに仕上がったので、この記事ではコピペOKのテンプレ付きでカスタマイズ方法を共有します！

実際に使っているカスタムテンプレート

以下は、現在私が使用している最終完成版のHTMLコードです。

<!DOCTYPE html>
<html lang="{BlogLanguage}">
<head>
  <meta charset="utf-8">
  <style>
    :root {
      --bg-gradient-start: #e9f1e9;
      --bg-gradient-end: #cfd7cf;
      --text-main: #444;
      --text-sub: #666;
      --content-rounded: 16px;
    }
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      background: linear-gradient(135deg, var(--bg-gradient-start), var(--bg-gradient-end));
      color: var(--text-main);
      font-family: 'Noto Sans JP', sans-serif;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      padding: 24px;
    }
    .header {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 80px;
      padding: 0 16px;
    }
    .icon img {
      width: 64px;
      height: 64px;
      border-radius: 12px;
    }
    .blog-title {
      font-size: 48px;
      font-weight: 700;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: center;
      min-width: 280px;
      transform: translateX(-50px);
    }
    .category span {
      font-size: 32px;
      padding: 6px 14px;
      border-radius: 20px;
      background-color: #e3e7e3;
      color: var(--text-sub);
      font-weight: bold;
    }
    .main-wrapper {
      display: flex;
      flex: 1;
      justify-content: center;
      align-items: center;
      padding: 30px 20px;
    }
    .entry-title {
      text-align: center;
      font-size: 72px;
      font-weight: bold;
      color: var(--text-main);
      line-height: 1.1;
      word-break: break-word;
      max-width: 90%;
    }
    @media (max-width: 768px) {
      .entry-title {
        font-size: 56px;
      }
    }
    @media (max-width: 480px) {
      .entry-title {
        font-size: 40px;
      }
    }
  </style>
</head>
<body class="category-{FirstCategory}">
  <div class="header">
    <div class="icon">
      <img src="data:image/png;base64,（ここにBase64画像を入れる）" alt="ブログアイコン">
    </div>
    <div class="blog-title">{BlogTitle}</div>
    <div class="category">
      <span>{FirstCategory}</span>
    </div>
  </div>
  <div class="main-wrapper">
    <div class="entry-title">{Title}</div>
  </div>
</body>
</html>