ある日、試しにはてなブログに記事を投稿し、そのURLをXに貼ってみた。すると、投稿にサムネイル画像がきちんと表示された。Bloggerではこれが表示されず、長い間そのままにしていた。ふたつを並べて見ると、印象の差は小さくなかった。
「やはりBloggerは古いのだろうか」と考えかけたところで、ふと思い当たった。これはHTMLの設定を変えれば解決できるのではないか、と。
HTMLに手を出さずにきた理由
1990年代の学生時代、HTMLでホームページを作っていたことがある。だからHTMLが何かは分かっている。ただ、凝ったデザインのページを作るには相当な手間がかかることも、当時の経験からよく知っていた。それ以来、デザインまわりには自分では手を出さない、というのが習慣になっていた。
考えが変わったきっかけは、最近のバイブコーディングの体験だった。AIにコードを任せてみると、自分では書けないようなものが短時間で出てくる。コーディングはAIに任せられるという実感が、HTMLに対する心理的なハードルも一緒に下げてくれた。それで、Bloggerのテーマの手直しにも取りかかる気になった。
実際にやったこと
作業の流れは単純だった。AIに現在のHTMLファイルを渡し、変えてほしい点を言葉で伝える。出力されたファイルをBloggerに貼り付け、ブラウザで表示を確認する。気になる点があれば、またAIに伝える。この繰り返しだ。
指示は、たとえば次のようなものだった。
「フォントや行間をnoteのように読みやすくしてほしい」
「画像のボーダーと影を消してフラットな見た目にしてほしい」
「Xにシェアしたときにアイキャッチ画像が出るようにしてほしい」
HTMLの知識は特に必要なかった。どんな見た目にしたいかを伝えるだけで、自分でコードを書くことは一度もなかった。
結果として、HTMLファイルの改良版を保存した回数は6回。かかった時間は1時間ほどだった（図1）。
時間がかかったのはモバイル表示だった
全体としては順調だったが、一箇所だけ時間を取られたのがモバイル表示だ。
スマートフォンから見ると、h2よりh3のほうが大きく表示され、見出しのサイズが逆転していた。リンクの下線も表示されない。PCでの表示とはかなり様子が違っていた。
AIと一緒にCSSを修正し、!importantを付けて上書きも試したが、変化がなかった。原因は、Bloggerがモバイル向けに独自のテンプレートを別途配信していることだった。URLに?m=1が付くと、書き換えたCSSが反映されない仕組みになっていたのだ。
解決方法は単純で、Bloggerの管理画面でモバイルテーマの設定を「デスクトップを表示」に切り替えるだけだった。この設定ひとつで、問題はすべて解消した。
ただ、そこに辿り着くまでには少し遠回りをした。AIは「モバイル設定のギアアイコンを押してください」と案内してくれたのだが、そのギアアイコンは現在のBloggerのUIには存在しなかった。AIも私も、設定画面の現状を正確には把握できていなかったことになる。
あとから思えば、スクリーンショットを貼って「この画面にはギアアイコンがありません」と伝えていれば、もっと早く解決できたはずだ。画面の状況を面倒がらずに共有すること。AIと作業するうえでの、地味だが実用的な教訓だった。
乗り換えを考える前に
noteやはてなブログへの乗り換えを考えている理由が「デザインの古さ」だけなら、その前に一度試してみる価値はあると思う。
フォント、行間、文字色、画像のスタイル、Xカードの設定。この程度の調整であれば、AIに任せることで1時間ほどで済む。これまでBloggerに書き溜めてきた記事も、そのまま残せる。
もちろん、noteのコミュニティ機能や記事の販売が目的なら話は別だ。プラットフォームを移す理由には、デザイン以外のものもある。
ただ、見た目だけが理由なら、まずAIに「noteのような見た目にしてほしい」と伝えてみてはどうだろうか。私の場合は、思っていたよりも手軽に済んだ。
0 件のコメント:
コメントを投稿