ある日、試しにはてなブログへ記事を投稿し、そのURLをXに貼ってみた。
すると、投稿の中にサムネイル画像がきれいに展開された。当たり前のことのようだが、Bloggerではそれが出ない。ずっとそのままにしてきた。並べて見ると、差は歴然だった。
「やっぱりBloggerは古いのか」と思いかけたその瞬間、別の考えが頭をよぎった。
これって、HTMLの設定を変えればなんとかなるんじゃないか。
「自分ではHTMLを触る気がなかった」人間が動いた理由
1990年代の学生時代、HTMLでホームページを作っていた。だからHTMLが何かは分かっている。ただ、こったデザインのページを作るには相当な手間がかかることも身に染みて知っていた。以来、「デザイン周りは自分でやらない」が暗黙のルールになっていた。
その方針を変えたのは、最近のバイブコーディング体験だった。AIにコードを任せてみると、自分では到底書けないものがあっという間に出てくる。「コーディングはAIに任せればいい」という実感が、HTMLへの心理的なハードルも一緒に下げていた。
だからBloggerのテーマ改造にも、やる気になれた。
実際にやったこと――AIとの対話、6回のHTML更新、1時間
作業の流れは単純だ。
AIに現状のHTMLファイルを渡し、「こう変えてほしい」と伝える。出力されたファイルをBloggerに貼り付け、ブラウザで表示を確認する。気になる点があればまたAIに伝える。それだけだ。
指示の出し方はこんな具合だった。
「フォントや行間をnoteのように読みやすくしてほしい」
「画像のボーダーと影を消してフラットな見た目にしてほしい」
「Xにシェアしたときにアイキャッチ画像が出るようにしてほしい」
HTMLの知識は要らない。どんな見た目にしたいかを言葉で伝えるだけでいい。自分でコードを書くことは一行もなかった。
結果として、HTMLファイルの改良版を保存した回数は6回。かかった時間は1時間に満たなかった（図1）。
詰まったのは「モバイルの罠」だった
順調に見えたが、一箇所だけ時間を取られた場所がある。モバイル表示だ。
スマートフォンから見ると、見出しのサイズが逆転していた。h2よりh3のほうが大きく表示されてしまう。リンクの下線も出ない。PCの表示とまるで違う。
AIと一緒にCSSを修正し、!importantまで付けて上書きを試みた。それでも直らない。
原因は、Bloggerが独自のモバイルテンプレートを別途配信していたことだった。URLに?m=1が付いた瞬間、書き換えたCSSが完全に無視される仕組みになっていたのだ。
解決策は拍子抜けするほどシンプルだった。Bloggerの管理画面で「モバイルテーマ→デスクトップを表示」に切り替えるだけ。設定1つで、すべて解決した。
ただ、そこに辿り着くまでに遠回りをした。AIは「モバイル設定のギアアイコンを押してください」と案内してくれたのだが、そのギアアイコンがBloggerのUIから消えていた。AIも私も、設定画面の現状を正確には把握できていなかった。
後から思えば、スクリーンショットを貼って「この画面です、ギアはありません」と伝えていれば、もっと早く解決できただろう。面倒がらずに画面を共有すること。AIとの作業で学んだ、地味だが確実な教訓だ。
乗り換える前に、1時間だけ試してほしい
noteやはてなブログに乗り換えようとしている理由が「デザインの古さ」だけなら、急がなくていいかもしれない。
AIに任せれば、フォント、行間、文字色、画像スタイル、Xカードの設定――これだけのことが1時間で片付く。Bloggerに積み上げてきた記事の蓄積も、そのまま生きる。
もちろん、noteのコミュニティ機能や記事の販売が目的なら話は別だ。プラットフォームの乗り換えには、デザイン以外の理由もある。
ただ、「なんとなく古く見えるから」という理由だけで移行を考えているなら、まず1時間だけ試してみてほしい。HTMLを自分で書く必要はない。AIに「noteみたいな見た目にして」と伝えるだけでいい。
思っていたより、ずっと手軽だった。
本記事はAIとの対話のみで構成されています。筆者は本文を1行も執筆していません。
蛇足を一つ。本文中に「私たちが書き換えたCSS」という表現がある。この「私たち」はAIと筆者を指している。コードを書いたのはAIで、判断したのは筆者だ。この分業を「私たち」という一語に収めることに、今は違和感がない。それがむしろ、何かを示しているような気もしている。
