Bloggerのスマホ表示を整えるのに一苦労した話。

最近、AIの力を借りてBloggerのデザインを微調整しています。

どうも、ひらた店長です。

2月18日の『写真と動画の表示幅が自動修正されるようにしてみた。』、そして昨日3月3日に『広告の表示位置もAIに相談しながら微調整。』で書いた通り、AI(Gemini)の力を借りながら、自分が今までBloggerを使っていて「気になっていたところ」などをいじっていました。

写真や動画を貼り付けた時のサイズとか、表示される広告の位置とかをHTML編集で微調整したわけですが、昨日は「スマホからBloggerを見た時のトップページ」の表示問題に着手。

テーマで「モバイルの設定」を「モバイル（カスタム）」にしているんですが、トップページは記事一覧が表示されるんですが…少し不満に思っていたことが。

当ブログのスマホから見たトップページ。
記事一覧に不要な黒い空間があるのが不満。

それをHTML編集で空間を削除。
見た目がスッキリした。

こんな風に不満に思っていたことを昨夜、解消できたわけだけど…上の一枚目と二枚目の間には約6時間ほどのHTMLとの死闘が…。

自分の使っているBloggerのデザインのHTMLが「古い設計」らしくて。(AI談)

そのせいかAIが提案してくれたコードをHTMLに差し込んだりしても、デザインが全然変わらなかったりしたんです。コードを差し込んで確認、それをAIに伝えて別のコードを作ってもらい、それを差し込んで確認…という作業を延々と6時間やっていたわけ。

なので3月3日の夜、スマホでたまたまブログを見てくれた人はデザインが狂っていたりする時もあったと思う。非常に申し訳ないと思いつつひたすら作業を続けていたわけです。

そんなこんなで23時過ぎ、「もうダメだ」と諦めたんですよ。一枚目の画像の「黒い空間」がまったく削除できなくて。

それで昨夜の作業中、「マシかな」と思う状態のバックアップを取っていたので、その状態に戻してそれをAIに伝えたら「最後にこの微調整のコードだけ入れて終わりにしましょう」ってことになって。その微調整のコードを入れたら…なぜか奇跡的に二枚目の画像のように「黒い空間が消えた」という次第。

訳わかんなくて「嬉しい」という感情より先にパニックですよ。

AIに聞くとITの世界だと、こういうことって稀にある…らしいです。いじくり回して全然解決しなかったことが、不意にちょっとしたことで直る(変わる)っていう現象が。

とにかくですね。

昨日はめちゃくちゃ苦労したけど、記事一覧の表示を多少なりとも見やすくできてホッとしたという話。本当は緑色の文字のタイトル部分が無意味に改行されているのも解決したいんだけど…それは妥協しました。(今後、気分が乗ったら修正に着手するかもしれない)


さてさて。
それでは今回はこの辺で。