はてなブログカスタマイズを0から学ぶ

無料版はてなブログのカスタマイズを学んでいくブログ

吹き出し

今回は吹き出しを作ってみたいと思います。

参考にした記事はこちら↓

poyaran.com

 

1.画像の用意

まず、使いたい画像を用意します。

ChatGPTを使って作ってもらったアイコン用のイラストと猫のイラストを使います。

はてなフォトライフにアップロード、と書いてあるんですが、はてなフォトライフがブログ画面から見つけられず。

はてなヘルプから検索してはてなフォトライフのトップページにとび、そこからアップロードしました。

サイズを150pxに変更。

画像アドレスを右クリックして画像のアドレスをコピーし、メモ帳に貼っておきます。

 

2.CSSコードをコピーして貼り付ける

CSSのコード(結構長い)と貼り付け方は参考元の記事を参照。

画像のURLとクラス名のところを編集して、ダッシュボードにある「デザイン」→「カスタマイズ」→「デザインCSS」に貼り付けます。

 

3.定型文に登録

簡単に使えるように、HTMLコードを定型文に登録します。

HTMLコードと登録方法は参考元の記事を参照。

 

さあ、できた!

と思いきや問題発生。

定型文を張り付けて文字を入力したのに、あれ?表示されない?

 

デザインCSSにすでにあるコードの一番下に貼ったんですが、表示されないので場所を移動。

もともとあったCSSコードのすぐ下に貼りなおしたら、できました!

 

こんな感じになります!

面白いですね!

memo

見たまま編集画面には文字しか表示されませんが、プレビューでみると確認できます。

それにしても、ChatGPTが作るイラストのレベルが高いです!

今もさらに優れたAIの開発に多額の費用が投じられているらしいので、将来どんなことになっているのかわくわくします。

しかし人間よりもかしこくなってしまうのではないか、という心配が現実になる日も遠くないかもしれません。