はてなブログは基本的に記事ごとにアイキャッチ画像を設定でき、好きな画像をアイキャッチとして設定できるのだが、記事のタイトルなどから自動生成してくれる「自動生成アイキャッチ」機能がある。
これまではいかにも自動生成ではてなブログ～って感じのデザインだったのだが、このたび有料プラン利用者向けにHTMLを使って自由にカスタマイズできる機能を提供された。
つい先日このブログもはてなブログPROに切り替えたので、ちょっとHTMLをいじってみた。
はてなブログに投稿しました
— すぴ🐭🎀 (@spica_mic) 2024年3月16日
はじめてのミュージカルなに観る？劇団四季のかんたん作品紹介 - 虹はね、 https://t.co/CF1eWBXdSP#はてなブログ
過去のツイート含めて切り替わっている！
どうやってカスタマイズしたか残しておくので、ぜひ参考にしていただければ！
HTML/CSSの知識無くてもマネするだけで大丈夫なように書いている（つもり）です。
新機能「自動生成アイキャッチ画像をカスタマイズする」について
公式のヘルプはこちら
見てみると、かなり自由にHTMLを書くことが出来る。
記事のタイトルやブログのタイトルなどを変数で引っ張ってくることが出来て、結構便利かも。
なお、cssや画像を別ファイルで用意して、リンクで引っ張ってくることが出来ないので、とにかくHTMLで完結していく必要があるみたい。
また、以下の制約がある。
画像の挿入
外部で配信されている画像などのリソースは読み込むことができません。例えば、<img src="https://example.com/image.png">などを記載するとプレビューでは表示されますが、実際に生成されるアイキャッチには画像は表示されません。 そのため、自動生成アイキャッチに画像を含めたい場合、SVGを貼り付ける、あるいは画像をBase64化して貼り付けるなどの対応を行う必要があります。
その他の仕様・制限
・自動生成されるアイキャッチ画像のサイズは横1200px、縦630pxで固定となります
・記載できるHTMLのサイズは約65000文字となります
・日本語フォントは Noto Sans のみに対応しています
・プレビューで表示されるデザインと、実際に出力されるアイキャッチ画像が異なる場合があります
・自動生成アイキャッチのカスタマイズを有効にしても、過去に生成された自動生成アイキャッチはすぐには置き換わりません。記事を編集するか、時間経過とともに置き換わります
自動生成アイキャッチ画像をカスタマイズする - はてなブログ ヘルプ
まずは有効化する
まずは有効化してみる。
「アイキャッチのない記事で、SNSシェアされたときの画像を自動で作成する(推奨)」と「カスタマイズした自動生成アイキャッチを利用する」の2つにチェックを入れる。
あとはその下の枠にHTMLを書いていくだけだ。
HTMLをカスタムする
HTMLを書いていくだけだ、といわれても、自由に考えるのも難しいので今回は公式が提示しているサンプルをベースに作り込んでいくこととしよう。
公式はヘルプに記載があるほか、ダッシュボードのアイキャッチのデフォルトにもなっている。
ざっくりデフォルトのHTMLの構成を見ていくと、bodyに対して、"header"と"main-wrapper"という部品があるシンプルな構成を<style>タグを使って装飾をしている。
headerにブログタイトルとカテゴリが、main-wrapperに記事タイトルが入る構成
このデフォルトの構成をあまりいじらずにカスタマイズしていこう。
ここから先はHTMLやCSSの知識があまりなくても、こうしたい！に合わせてカスタマイズできるように書いていく。
色を変えたい！
デフォルトだとはてなブログのアクセントカラーになっているのだが、変えてみる。
序盤、<style>入ってすぐのところの:root{}のかっこの囲われた場所で色を指定している。
<style>
:root{
--bg-main: #FFF; /*←この行にheaderとmain-wrapperの背景色を入れる*/
--bg-secondary: #003368;/*←この行にbody（外枠）の色を入れる！*/
--text-main: #003368;/*←この行に文字の色を入れる！*/
--text-back: #d4e3f0;/*←この行にカテゴリの背景の色を入れる！*/
}
色指定は何通りか書き方があるが、今回は16進法6桁のHEXカラーで記載することとする。
#003368などを好きな色に書き換えればOK
こんな感じで変えてみた。
<style>
:root{
--bg-main: #FFF; /*←headerとmain-wrapperは白のまま変更しない*/
--bg-secondary: #A3BCE2;/*body（外枠）を薄い青（#A3BCE2）に！*/
--text-main: #3d3f44;/*←文字の色をブログとそろえた*/
--text-back: #d2d7e5;/*←カテゴリの背景はグレーに！*/
--content-rounded: 12px;
}
外枠やブログタイトルと記事タイトルの間にある線を消したい
ここからは完全に好みなのだが、ブログタイトルと記事タイトルの間にある線はいらない人もいるのではないだろうか。
このブログも実際のサイトはヘッダーの下に線がないので、ないほうが統一感が出る気がする。
ちなみにこの線は、実は線というよりスキマである。
"header"と"main-wrapper"という部品の隙間から"body"の色が出ているのだ。
なので"body"と"header"と"main-wrapper"の色をそろえればこの線は見えなくなる。
先ほど序盤、<style>入ってすぐのところの:root{}のかっこの囲われた場所で色を指定していると説明したが、実はそれぞれのパーツを指定しているのではなく、変数を定義している。
変数を使用してbodyの見た目を設定しているところというのが、先ほど編集したところのすぐ下のbody{}と囲ってある部分である。
そしてbackground-colorと書いてある行が、背景色を指定する行である。
<style>
:root{
--bg-main: #FFF; /*←headerとmain-wrapperは白のまま変更しない*/
--bg-secondary: #A3BCE2;/*body（外枠）を薄い青（#A3BCE2）に！*/
--text-main: #3d3f44;/*←文字の色をブログとそろえた*/
--text-back: #d2d7e5;/*←カテゴリの背景はグレーに！*/
--content-rounded: 12px;
}
* {
margin: 0;
padding: 0;
}
body {
background-color: var(--bg-secondary);/*←この行でbodyの色を指定 関数を呼び出している*/
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;
}
なので、実際にbodyの背景色を設定するところを、--bg-secondaryではなく、--bg-mainに変えてあげれば、背景色がすべて統一されるはず。
（省略）
body {
background-color: var(--bg-main);/*←この行でbodyの色を指定 --bg-mainに変更*/
color: var(--text-main);
（省略）
線もなくなったが、枠も消えた。
間にある線はいらないが、外枠は欲しい
外枠が不要であればこれで良いのだが、外枠をつけたい場合どうするか。
bodyの背景色をそのまま、あらたに枠を追加する。
枠を追加するのも、やはりbody{}と囲ってある部分に記述する。
枠は以下のように記載する。
border: 太さ 線の形状（通常の1本線はsolid） 色;
当初の枠の色を32pxで追加するとこんな感じ。
body {
background-color: var(--bg-main);/*←この行でbodyの色を指定 --bg-mainに変更*/
border: 32px solid var(--bg-secondary);/*--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;
}
はてなブログのアイコンを消したい
ブログタイトルの左に、があるととどうしても自分のブログというより、はてなブログの主張が強すぎる気もするので変えてみよう。
を指定しているのが後半のこの部分
<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>
削除するだけであれば、この部分を削除するだけでOKである。
はてなブログアイコンの代わりに好きな画像を入れたい
代わりの画像を入れることも可能だ。
コメントアウトが付いている通り、SVGかbase64化した画像のみ挿入することが可能で、リンクを指定して読み込ませることが出来ない。
Canvaなどは有料会員だとsvgで書き出せるのだが、手元にpngやjpegファイルしかない場合、まず変換が必要となる。
pngをsvgに書き出せるサイトはいくつかあるが、今回はこのサイトでやってみる。
今回の用途だと解像度は求められないので、圧縮しておく。50px x 50pxもあれば十分だろう。
そうして圧縮したファイルを上記のサイトにドラッグアンドドロップするとSVGに変換してくれるので、ダウンロードしておく。
SVGのままだと長いのでbase64化しておこう。
エンコードはこのサイトを使ってみる。
先ほどダウンロードしたSVGファイルは特に設定せず開くと、ブラウザなどで画像の形で表示されるが、今回欲しいのはテキストの文字列である。
そこで、テキストエディタで開く。
テキストエディタは何でもよいのだが今回はデフォルトで入っているであろう「メモ帳」でやってみる。
エクスプローラーから先ほど変換したSVGファイルを右クリックし、「プログラムから開く(H)」>「別のプログラムを選択(C)」を選ぶ。
するとポップアップが表示される。
目的の「メモ帳」が出ない場合は「その他のアプリ↓」をクリック
スクロールすると「メモ帳」が出てくるので、これを選択する。
メモ帳の画面で長い文字列が出てくる。
2行目の<svg versionから一番最後の</svg>までをコピーして、以下のサイトの「Base64エンコーダ」に貼り付ける。
Base64エンコードをクリックすると、下の「Base64デコーダ」枠にエンコードされた文字列が出てくる。
ただし、これをコピーするのではなく、さらに下にスクロールして、「SVG埋め込みデータ」の「HTML imgタグ」の枠の「コピー」をクリックして、HTML imgタグの形で取得する。
ここまでお疲れさまでした！
ここでコピーしてきたものを、HTMLの後半の以下の部分と入れ替える。
<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>
上のサンプルはブログタイトルと記事タイトルの間にある線を消してない場合だが、消した場合と組み合わせても問題なく表示される
ブログアイコンが入ると自分のサイトっぽくなる。
ブログアイコンを四角くする
元々がはてなのアイコンだったので、丸く表示されるようになっているのだが、ブラウザのタブに表示されるのは四角いこともあり、もうすこし四角く表示させたい。
このアイコンの形をカスタマイズしているのはこの部分である。
.icon > svg, .icon > img {
border-radius: 50%;
width: 64px;
margin-right: 12px;
}
border-radiusが角に丸みをつけるパラメータだ。
50%にすると丸になり、0にするか、この行ごと消せば四角になる。（＝角の丸みがなくなる）
そして、border-radiusは％のほかpxでも指定できる。
もっとアレンジ！
他にもフォントサイズや枠の幅などもカスタマイズできるのだが、ここまでで十分なボリュームになってしまったのでいったん区切る。
枠も背景色は1色ではなくグラデーションカラーにすることもできる。
グラデーションも直線上にかけるのか円形状にかけるのかなどで書き方は変わるのが、基本は同じで、body{}と囲ってある部分に記述する。
枠が1色の時は、border: 太さ 線の形状（通常の1本線はsolid） 色;と記載するが、グラデーションを駆けるときは"色"を省略し、以下を追加する。
border-image: conic-gradient(開始=上の真ん中の色, 時計回りに2番目の色, 3番目の色, ・・・, 開始の色) 1
そうしてできたのが本ブログの自動生成アイキャッチだ。
今年観た作品（宝塚・劇団四季・その他ミュージカル・アイスショーまで）を振り返った。
— すぴ🐭🎀 (@spica_mic) 2023年12月30日
2023年観劇まとめ - 虹はね、https://t.co/WtupaRdE9U
さいごに
なるべく記事にアイキャッチ画像はつけようと思っているのだが、なかなかうまく作れないときは自動生成のものを使っていたのだが、このたびカスタマイズできるようになったことで、自分のブログらしさが増して嬉しい。
自動生成アイキャッチのカスタマイズは有料プラン利用者（個人だとはてなブログPro）限定のサービスだが、ぜひ使っていきたい機能である。
はてなブログProで広告が外せてすっきりしたこともありおすすめ。
WordPressで自力でブログ書くより、はてなブログカスタマイズするほうがCSSの知識必要な感じがある。笑
ブログをはじめるまでまったくHTMLに触れたことはなかったし、仕事で使うとかも全くないのだが、ブログをいじりたい！と思ってからいろいろ触ってみたり本で勉強したりで、少し触れるようになってしまった。
この本は基本からきちんと押さえていろいろできるようになるのでおすすめ。
いちばんよくわかるHTML5&CSS3デザインきちんと入門
それではみなさんよいブログライフを！
