やっぱりタイトル部分を修正、広告数も調整しました。

気分が乗ったのでタイトル表記問題も修正しました。

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

前回3月4日『Bloggerのスマホ表示を整えるのに一苦労した話。』の記事終盤に「スマホから見たトップページの、緑色の文字のタイトル部分が無意味に改行されているのも解決したい」ということを書きました。「気分が乗ったら」という注釈付きで。

その記事を書いた日の夜、気分が乗ったというよりは「どうにも我慢できなくなった」のでタイトル改行問題の修正に着手したという次第。作業はAI(Gemini)に相談しながらの二人三脚で。

現在のスマホから見たトップページ。
緑色のタイトルが右まで伸びている。

これが前回3月4日の記事時点の表示。
タイトルが変なところで改行されていた。

このブログのスマホから見たBloggerでの表示は「モバイルの設定」で「モバイル(カスタム)」としています。（テンプレートは「Awesome Inc.」という名前みたい。詳しくはBlogger公式の→こちらの記事←をご参照ください）

このスマホから見た時のデザインを編集するのがなかなか大変で、AIも何度もコードを出してくれていたんですが、結局「HTMLを編集しなければ解決しない」という結論に。（それまでは「CSS」というHTMLの場所にコードを貼り付けたりしていた）

それで未知の「HTML編集」をAIの力を借り、2日掛かりで行ったのが最初に貼り付けた画像の結果。めちゃくちゃ疲れましたね。主に目が。

しかし、タイトルがスッと横まで伸びて非常に気持ちがいい。

その状態でブログをチェックしていると…今度は「広告の表示」がめちゃくちゃ邪魔に感じまして。

例えばこんな感じ。
トップページのヘッダーの下に広告があって
その広告の下に無意味な空間が。

これは記事の中に差し込まれていた広告。
これも広告の下に無駄な空間が。

なんかもう…こういう「無駄な空間」が許せなくなってきまして。

見てくれている方のため、そして自分の精神衛生上の健康のために広告を大幅に削減することにしました。

現在はスマホから見たヘッダー下や記事の途中には広告が入らないように設定をしました。PCから見た時も今まで画面下とか横に出て来ていたものも削除し、もちろんこっちも記事の途中に広告が入らないように。

ブログの下の方にのみ広告が入るのと、別の記事を読もうとしてくれた時に全画面で入る広告だけは入れさせていただいております。

広告に関しては今度、このスタイルでいかせていただきますので、特に全画面の広告だけはご勘弁くださいませ。


その他、細かく気になっていたところなどもHTMLで修正して、現在のブログデザインは個人的に満足な状態に。自分、がんばった。

そしてその内、「AIとのHTML奮闘記」的な記事も書こうかと思っていますので、気になる方はチェックいただければ幸いです。


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


📷️最後までご覧いただきまして誠にありがとうございます。
当ブログに掲載している写真の無断転載・無断使用はご遠慮いただけますようお願い申し上げます。もしご紹介や引用いただける場合は、本記事へのリンクを添えていただければ幸いでございます。

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

とにかくですね。

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


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

広告の表示位置もAIに相談しながら微調整。

AIに相談しながらだと知識のないHTML編集も意外とできるなと感じています。

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

ちょっと前に『写真と動画の表示幅が自動修正されるようにしてみた。』という記事を書きまして。これが「AIと相談しながら写真・動画の表示幅が思った幅になるように調整した」という話だったわけです。AIはGoogleのAIである「Gemini」を使用。

その記事を書いた後にも写真表示の細かい部分などを相談しながら、少しずつHTMLに変更を加えていたある日。

当ブログの記事のスクリーンショット。
広告が記事本文に被ってしまっていた。

上の画像のように本文に差し込まれている一部の広告が、本文に被ってしまっていることが気になりまして。いつ頃から被っていたのかわからないのですが、広告の種類によって被ったり被らなかったりしていたよう。（たぶんPCから見た時のみ。スマホだと本文中に広告は入らない…はず）

修正後。本文に被らなくなってスッキリ。

自分は「Blogger」でこうやって個人ブログを書いていますが、だいぶ前にデザインを少しいじったりしたことがありまして。フォントの大きさとか色々。

そしてちょっと前に写真の大きさなどをHTMLでいじった時、広告にも影響が出て本文に被るようになった…ということのはず。（AIがそういう趣旨のことを言っていた気がする）

とにかく。

今までは知識がなくていじれなかったデザイン上の不満点を、AIを活用することで自分でいじったり調整できるようになったのは本当に便利だし助かるな、と最近かなり実感している、というのが今回の話。


さてさて。それでは。


📷️最後までご覧いただきまして誠にありがとうございます。
当ブログに掲載している写真の無断転載・無断使用はご遠慮いただけますようお願い申し上げます。もしご紹介や引用いただける場合は、本記事へのリンクを添えていただければ幸いでございます。