nekoken2022’s diary

常勤行政保健師歴28年の経験をもとに、保健師向けに役立つ情報を提供するブログです。ぜひご覧ください!

AIと学ぶ はてなブログ編集テク(初心者向け)3 はてなブログ記事のボックスの中を綺麗に改行してみた

 

 

困った時はChatGPTを頼る。

こんにちは!

今回、ブログを作成する過程で、ボックス(色付けの囲みに文字を入力できる場所)に入力した際に、うまく改行ができず困ってしまいました。そこで、HTML編集で上手くいかない箇所をそのままChatGPTにコピーして、「上手く改行できない、どうしたらいい?」と聞いてみました。すると、うまく改行ができるようになりました。結果は、以下の画像のように表示されました。正直とても驚いたので、この情報を共有したいと思い、記事にしました。

まず、下記の画像をみてもらいましょう。

上が変更前 下が変更後

以前作成したものは画像の上部のようになっていましたが、それが訂正後には下部の画像のように改善されました。文字の大きさがだんだん小さくなる現象がなおりました。

実際のHTMLを見てみると

以下がChatGPTが作成前のHTMLです。我流のHTMLをよく理解していないので汚い。

↓↓↓

(ChatGPTが作成する前のHTML)                               <p style="border: 2px solid #4CAF50; background-color:#EBEBEB; padding: 20px; margin: 20px 0;"><span style="font-size: 80%;"><strong>1. 購入と試用結果  </strong> </span><span style="font-size: 80%;">  <br /> - ビックカメラで購入したiPad用シートを使用。<span style="font-size: 80%;"><br />  -新聞シートより大きいため、貼り付け前にカットが必要。</span><span style="font-size: 80%;"><br />  - 曇りはあるが、読みにくくはない。</span><span style="font-size: 80%;"><br /><strong>2.反射軽減効果  </strong>  <br />- 貼った面はぼんやりした反射で眩しさが軽減。<br />  - 未貼付面は反射が強く眩しい。<br /><strong>3. 実用性とコスト  </strong>   <br />- マクドナルドで試し、照明の反射軽減を確認<br />  - 価格は約2600円で、実用性は十分。<br />  - アナログとデジタルの組み合わせが課題。</span></span></p>

ChatGPTに作成しなおしてもらったのが以下です

↓↓↓

(ChatGPTが作成後のHTML)
<p style="border: 2px solid #4CAF50; background-color: #cbfad9; padding: 20px; margin: 20px 0;">
  <span style="font-size: 80%;">
    <strong>1. 購入と試用結果</strong>
  </span>
  <span style="font-size: 80%;">
    <br /> - ビックカメラで購入したiPad用シートを使用。
    <br /> - 新聞シートより大きいため、貼り付け前にカットが必要。
    <br /> - 曇りはあるが、読みにくくはない。
    <br />
    <strong>2. 反射軽減効果</strong>
    <br /> - 貼った面はぼんやりした反射で眩しさが軽減。
    <br /> - 未貼付面は反射が強く眩しい。
    <br />
    <strong>3. 実用性とコスト</strong>
    <br /> - マクドナルドで試し、照明の反射軽減を確認。
    <br /> - 価格は約2600円で、実用性は十分。
    <br /> - アナログとデジタルの組み合わせが課題。
  </span>
</p>

上記のようなHTMLが実際に適応したHTMLです。

 

改めてChatGPTに確認

そしてブログを書いている最中に、なぜ字が小さくなるかも、もっと具体的に質問してみました。

と聞くと

ChatGPTの回答

文字が小さくなってしまうのは、font-sizeを複数回ネストして指定しているためです。このように重複して指定すると、ブラウザが相対的なサイズをどんどん小さく解釈してしまいます。

修正するには、全体で一度だけfont-sizeを指定するようにし、重複して指定しないようにします。

具体的に次の箇所が修正されました:

各<span>タグ内のfont-size: 80%;を削除し、全体の<p>タグに一度だけfont-size: 80%;を設定しました。
重複する<span>タグを削除しました。
修正前のHTMLから、font-size: 80%;が重複して指定されていた部分を取り除き、全体の<p>タグに適用するようにしました。

 

とのことでした。その結果が修正後のHTMLとなります。

 

どうでしょうか?私はHTMLの事は少ししか学習していないのですが、ほとんど超初心者です。ChatGPTを利用する前は、この問題をネットで調べて、時間を浪費する事になっていたと思います。皆さんも是非利用してみてはいかがでしょうか?

 

ーネコケンー

以前の記事はこちら

AIと学ぶ はてなブログ編集テク(初心者向け)1 はてなブログの目次に”目次”という字を入れてみた。 - nekoken2022’s diary

 

AIと学ぶ はてなブログ編集テク2(初心者向け)はてなブログの目次に”枠線”をつけてみた。 - nekoken2022’s diary