はてなブログでは、記事に画像が含まれない場合などに、カテゴリや本文から自動でアイキャッチ画像を生成する機能を提供しています。加えて、有料プラン利用者向けに、自動で生成されるアイキャッチ画像のデザインをカスタマイズする機能を提供しています。
企業が運営しているブログの場合は、企業ロゴを含めてブランドを意識してもらいやすくしたり、個人ブログでもブログのイメージに沿った色に変更したりなど、こだわったブログ運営にぜひご利用ください。
自動生成アイキャッチのカスタマイズ機能は、有料プラン「はてなブログPro、はてなブログ for DevBlog、はてなブログBusiness、はてなCMS」に加入しているブログで利用できます。
自動生成アイキャッチのカスタマイズを有効にする
以下の2つの設定を有効にしてください。
- 「アイキャッチのない記事で、SNSシェアされたときの画像を自動で作成する(推奨)」にチェックを入れてください
- この変更で、記事に画像が含まれていない場合には、アイキャッチが自動で生成されるようになります
- 記事に画像が含まれている場合に、自動生成アイキャッチを利用したい場合、編集サイドバーの編集オプション（
）の「自動生成アイキャッチを設定する」にチェックを入れてください
- 「カスタマイズした自動生成アイキャッチを利用する」にチェックを入れてください
- この変更で、アイキャッチを自動で生成する際に、カスタムしたデザインで生成されるようになります
アイキャッチのデザインをカスタマイズする
自動生成アイキャッチのカスタマイズはHTMLで行います。シンプルな例としては、以下のように書くことができます。(説明のためにシンプルにした例となります。記事のタイトルしか出ませんのでこのまま適用しないようにご留意ください)
<!DOCTYPE html> <html lang="ja"> <head> <style> .title { font-size: 72px } </style> </head> <body> <div class="title">{Title}</div> </body> </html>
上記の中で {Title} と指定してある部分は、実際にアイキャッチが作成されるタイミングで「記事のタイトル」に置きかわる変数です。記事のタイトル以外にも複数の変数を提供しています。
利用できる変数
| 変数 | 挿入される値 |
|---|---|
| {Title} | 記事のタイトル |
| {BlogTitle} | ブログのタイトル |
| {AuthorName} | 記事を書いたユーザーのはてなID |
| {BlogLanguage} | ブログの言語設定(言語コード) |
| {FirstCategory} | 先頭のカテゴリ |
| {PostedYear} | 記事の投稿年 |
| {PostedMonth} | 記事の投稿月 |
| {PostedDate} | 記事の投稿日 |
画像の挿入
外部で配信されている画像などのリソースは読み込むことができません。例えば、<img src="https://example.com/image.png">などを記載するとプレビューでは表示されますが、実際に生成されるアイキャッチには画像は表示されません。
そのため、自動生成アイキャッチに画像を含めたい場合、SVGを貼り付ける、あるいは画像をBase64化して貼り付けるなどの対応を行う必要があります。
その他の仕様・制限
- 自動生成されるアイキャッチ画像のサイズは横1200px、縦630pxで固定となります
- 記載できるHTMLのサイズは約65000文字となります
- 日本語フォントは Noto Sans のみに対応しています
- プレビューで表示されるデザインと、実際に出力されるアイキャッチ画像が異なる場合があります
- 自動生成アイキャッチのカスタマイズを有効にしても、過去に生成された自動生成アイキャッチはすぐには置き換わりません。記事を編集するか、時間経過とともに置き換わります
実際の設定コード例とワンポイントアドバイス
以下に実際に利用できるコード例と設定の際のポイントをコメントにて記載しています。参考にご利用ください。
<!DOCTYPE html> <html lang="{BlogLanguage}"> <!-- ここで BlogLanguage を指定すると言語を指定することができます --> <!-- 言語に適した改行の処理に影響があるため指定を推奨します --> <head> <meta charset="utf-8"> <style> :root{ --bg-main: #FFF; --bg-secondary: #003368; --text-main: #003368; --text-back: #d4e3f0; --content-rounded: 12px; } * { margin: 0; padding: 0; } body { background-color: 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: 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-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"> <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> <!-- 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>
