おじ語り

思い立ったら色々書く。

MENU

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

 このページには広告が含まれています

はてなブログ新機能『自動生成アイキャッチのカスタマイズ』

今回リリースされたはてなブログの新機能がかなり面白そうでした。
人によっては神機能だなんて言うんじゃあなかろうか。

staff.hatenablog.com

自動生成アイキャッチのカスタマイズ。

この自動生成アイキャッチ機能については僕もよく使わせてもらっています。
自分で撮った写真が無かったり、フリー素材の画像を探してくるまでもないような投稿は全て自動生成アイキャッチを使う。

そうするとはてなブログが用意してくれた画像にブログタイトルだのなんだのが自動で挿入されていい感じになるわけですね。

旧アイキャッチ

この進次郎回のサムネみたいな感じですな。

さすがプロの仕事で間違いない見た目なんだけど、あまりにはてなブログなんですよね。
ブログとしての個性は出せない。別に悪くないんだけど。

それが今回のアップデートで自作のアイキャッチに出来るということじゃあないですか。

昨晩シコシコと制作しましたよ。

新アイキャッチ

河野太郎回から反映されています。

ねぇ、俺政治ブロガーじゃないんだけど。
政治の話と宗教の話はタブーだろJK。

それでいかがでしょうか。
新アイキャッチは。
Xで見るともっとデカくてわかりやすいです。

新アイキャッチ

色味を当ブログに近づけて、ロゴをどーんと配置しました。
あとはタイトルだったり、カテゴリ、投稿日なんかを並べた形ですね。
極めつけは愛犬スタンプ。激カワでしょ。

うん、素人にしては頑張ったんじゃないでしょうか。
HTMLなんか書けないのにここまで作れたんだから偉い!

ほぼChat GPTにお願いした

そうなんですよ。
この機能を使うにはHTMLのコードを書いてデザインをしていかないといけません。

そんな専門知識は全く持って持ち合わせていないのですが、それで諦めないといけないのは平成までよ。
令和には生成AIがいるじゃあないか。

Chat GPTに「HTMLでアイキャッチ作りたいんだけど、こんなルールで色はベージュとブラウン!出来るかい?」って聞けばすぐに「はい喜んで!」ってな感じでコードをズラーっと書いてくれます。

マジでテクノロジーってすげぇや!

ほんで相手がAIだからって偉そうに「違う!中央揃えにしろ!」とか色々注文をつけて何度かやり直させて出来上がったのがこのアイキャッチをってわけですわ。

はてなフォトライフとの連携は出来ないっぽい

今回のアイキャッチ作成で一番手こずったのが画像の利用ですね。

説明を読むと「SVGを貼り付けるか、Base64化して貼り付けしろ」という指示がされているんですよ。
なんのこっちゃですが、つまりははてなフォトライフに保存している画像をそのままもってくることは出来ないっちゅう話ですな!

これはよくわからんし、面倒くさかった。

最終的にはBase64化した画像を使うことにしました。
おそらく画像を画像としてではなく、ルールに従った文字列に一旦変えて、表示の時にまた画像に戻すということなんだろうと思います。

色々と類似のサービスはあるかと思うけど、僕の場合はChat GPTが教えてくれたサイトで画像をBase64化しました。

Base64 Image Encoder

目的の画像をアップするとコードに書き換えてくれるので、それを今回のアイキャッチのHTMLに組み込むことでようやく表示が出来るってわけだ。

色とかデザインはもうちょい工夫の余地があると思うけど、まぁとりあえずはこんな感じでやっていこうかなと思います。

おじーでした。