♛Queens lab.

生きることって楽しいを見つけることじゃない?

チャットGPTにブログのコードを書いてもらった はてなブログはちょっと注意

 

ブログはHTMLでできている

この文章のコードはこうなっています。

<h3>ブログはHTMLでできている</h3>

<h3>と言うのは大見出しの指定

</h3>と言うのは大見出しはここまで。

 

今どきはHTMLがわからなくても

見たまま編集の機能で

ワードに文章を打ち込むように

簡単に書くことができます。

 

HTMLと言うのは

Webページの作成に使われるコードの事です。

 

もう一つCSSと言うのも有ります。

HTMLがWebページの構成を

作るもので

文字の装飾や配置など

見た目やデザインを設定する言語です。

 

でも大丈夫、そんなことわからなくても

見たまま編集で普通に書けば

ちゃんとそれが反映されます。

 

ちょっと面白いことをしたい時

ツールバーに無い指定をしたい時は

自分でHTML編集しなきゃいけない。

 

例えば文字の色を変えたい時はAから選べばいい

今Aの文字が赤くなっていますが

HTMLで見ると #ff0000と書かれています。

はてなブログのツールバーでは

30色が用意されていますが

他の色を使いたい場合は

カラーコードを調べて

#~の部分を書き換えます。

 

貼り付けた写真にカーソルを乗せると

何かが変化するとか

そういう事もできます。

で、どうやるんだって話ですが

検索してそのコードを調べて貼り付けます。

 

検索せずとも彼がいる

昔は面白いことをしたい時は

検索して探してそれをHTML編集に

貼り付けていました。

 

その検索が結構大変で

こういうのじゃないんだよね。

ここをもっとこんな風にしたいけど

やり方がわからなくてめげること多々。

 

でも、今はチャットGPTが

コードを作ってくれます。

 

下記の記事にあるカウンター、

今は00になっていますが

2026年まであと何時間と言うのを

表示していました。

こちらの記事では

HAPPY NEW YEARの文字が点滅しています。

両方ともチャットGPTに作ってもらいました。

 

はてなブログの注意点

はてなブログではHTMLが

勝手に書き換えられることが有ります。

●はてなブログ独自のHTML整形(サニタイズ)

●テーマCSSの強制スタイル

●レスポンシブ対応用の自動ルール

チャットGPTに教えてもらった理由です。

って、どーゆーこと?という

難しいことは聞かないでください。

 

はてなに悪気は無いのですが

書いた(貼り付けた)HTMLが

自動的に変えられてしまって

干渉が起きるようです。

 

○○を○○するコードを

作ってください!

こんな風にチャットGPTにお願いする時は

はてなブログなので

干渉が起きないようにと言う一文を

プロンプトに記載することが大事です。

 

一度じゃ上手くいかなかった

コードをそのまま貼り付けて

上手く動作しましたが

(プレビューじゃないと動きません)

その前後に文章を入れたら止まってしまったり

黒い背景から文字がはみ出したり

チャチャっと簡単にはできませんでしたが

何度でも何度でも

やり直してくれます。

嫌な顔一つせずに。

 

もしコードの勉強をしたいなら

自分でいろいろ苦労して

書いてみるのがいいのかもしれませんが

私はブログを書くのがメインなので

そういう事には彼にお任せです。

それよりなによりHTMLの文字が小さすぎて

そっちが問題です。

完璧に理解していたとしても

どこが間違って乞う菜たかを

ちっちゃな字を追って探すのは無理。

 

チャットGPTが

上手に作ってくれるかどうかは

私たちの質問が

上手かどうかって言うところも有ります。