はてなブログの自動アイキャッチ画像をカスタマイズする

タイトルの通りです。
はてなブログの自動アイキャッチ画像がカスタマイズできることを知ったので、さっそくカスタマイズしてみました。

編集方法

ほぼこちらのサイトを参考にさせていただきました。
ありがとうございます。

spica-mic.hatenablog.jp

完成系

完成したアイキャッチがこちら。

そのコードがこちら。

<!DOCTYPE html>
<html lang="{BlogLanguage}">
  <!-- ここで BlogLanguage を指定すると言語を指定することができます -->
  <!-- 言語に適した改行の処理に影響があるため指定を推奨します -->
  <head>
    <meta charset="utf-8">
    <style>
      :root{
        --bg-main: #FFF; /*←headerとmain-wrapperは白のまま変更しない*/
        --bg-secondary: #A3BCE2;/*body（外枠）を薄い青（#A3BCE2）に！*/
        --text-main: #001e43;/*←文字の色をネイビーに変更*/
        --text-back: #e0efff;/*←カテゴリの背景は薄い青*/
        --content-rounded: 12px;
      }
      * {
        margin: 0;
        padding: 0;
      }
      body {
        background-color: var(--bg-main);/*←この行でbodyの色を指定　--bg-mainに変更*/
        border: 32px solid ;
        border-image: linear-gradient( 135deg, #72EDF2 10%, #5151E5 100%) 1;/*外枠をグラデーションに変更*/
        /*border: 32px solid var(--bg-secondary);/*グラデーションに変更したのでコメントアウト*/
        color: var(--text-main);
        font-weight: normal;
        font-family: 'Noto Sans CJK JP';
        box-sizing: border-box;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        padding: 24px 24px;
        line-height: 1.4;
        word-break: break-word;
      }

      /* カテゴリによるカスタマイズ */
      /* 後述の通り、変数を使ってカテゴリのclassを付与すると
      カテゴリごとにデザインをカスタマイズすることができます */
      body.category-日記 {
        background-color: #fff;
      }

      /* コンテンツ部分の共通設定 */
      body > div {
        background-color: var(--bg-main);
      }
      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: 42px;/*ブログタイトルのフォントサイズを少し小さめに変更*/
        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; /* Xのシェア時には、アイキャッチの下部に
        タイトル要素が重ねて表示されるため空白を用意しておくことを推奨します */
      }
      .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;
      }
    </style>
  </head>
  <body class="category-{FirstCategory}">
    <!-- 上記のようにclassを指定することで、例えばある特定のカテゴリのみ
    背景色や文字色の変更などデザインを変更する、という調整を行うことができます -->
    <div class="header">
      <div class="icon">
        <img src="data:image/svg+xml;base64,～省略～"/>
        <!-- SVGかbase64化した画像のみ挿入することが可能です -->
      </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>