はてなインターン 2024 でアイキャッチ画像カスタマイズが開発されたらしいので試してみる。
どう？自分のブログに合うように作ってみたけど反映されてる？？
2024/9/6 追記
正しく反映されていそう！！とりあえずアイキャッチのHTML公開します。商用利用可でご自由にお使いください。
<!DOCTYPE html> <html lang="{BlogLanguage}"> <!-- ここで BlogLanguage を指定すると言語を指定することができます --> <!-- 言語に適した改行の処理に影響があるため指定を推奨します --> <head> <meta charset="utf-8"> <style> :root{ --bg-main: #ffffff; --bg-secondary: #ffffff; --text-main: #1f1f1f; --text-back: #ffffff; --content-rounded: 15px; } * { margin: 0; padding: 0; } body { background-color: var(--bg-secondary); color: var(--text-main); font-weight: normal; font-family: 'Noto Sans CJK JP'; line-height: 1.4; height: calc(100vh - 70px); padding: 35px 35px; } .body-inner { box-sizing: border-box; display: flex; flex-direction: column; word-break: break-word; height: 100%; box-shadow: 0px 1px 26px -3px #a0acc0; border-radius: var(--content-rounded); } /* カテゴリによるカスタマイズ */ /* 後述の通り、変数を使ってカテゴリのclassを付与すると カテゴリごとにデザインをカスタマイズすることができます */ body.category-日記 { background-color: #fff; } /* コンテンツ部分の共通設定 */ body > div { background-color: var(--bg-main); } .footer-margin { height: 56px; /* Xのシェア時には、アイキャッチの下部に タイトル要素が重ねて表示されるため空白を用意しておくことを推奨します */ } /* ヘッダの設定 */ .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; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: transparent; background: linear-gradient(128deg, #17c9c9 0%, #336cff 100%); background-clip: text; -webkit-background-clip: text; } .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; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 30px; line-height: 1.3; font-weight: bold; color: #fff; background: linear-gradient(128deg, rgba(238, 34, 51, 0.8666666667) 0%, #EC44BD 100%); } /* メインコンテンツの設定 */ .main-wrapper { flex: 1; width: 100%; display:flex; } .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; } .entry-posted-date { font-size: 25px; font-weight: 600; margin-bottom: 10px; color: #A0AEC0; } </style> </head> <body class="category-{FirstCategory}"> <div class="body-inner"> <div class="header"> <div class="icon"> <img src="data:image/png;base64,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" /> </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"> <p class="entry-posted-date">{PostedYear}/{PostedMonth}/{PostedDate}</p> <div class="entry-title">{Title}</div> </div> </div> <div class="footer-margin"></div> </div> </body> </html>
