Bloggerのテーマを変更した理由
Google Bloggerで複数のブログを運営していると、標準テーマや既存のスキンに不便な点が少しずつ見えてくる。私もメニューやサムネイルの問題を経験し、テーマを見直す必要を感じた。
最初は既存の Blogger XMLテーマで、メニューが正しく表示されなかったり、サムネイルが消えたりする問題を解決しようとした。使用していた公開のサードパーティ製XMLファイルも次第に複雑で重くなり、全体の構造を整理する時期に来ていた。
しかし、修正項目を検討するうちに、既存のスキンに継ぎ足し続けるより、デザインと構造を一から作り直すほうがよいと思うようになった。
そこで今回は ChatGPT Codex 6 Astraと6.1 SOLを活用して、Google Bloggerのテーマを一から制作することにした。
希望するデザインや機能を具体的に説明し、Codexがコードを修正したら、結果を自分で確認する方法で進めた。
漠然としたホームページ制作の依頼ではなく、実際に運営している4つのブログのテーマを対象にした作業だった。
CodexでXMLを新規作成
最初の基準は、PCでもモバイルでも快適に記事を読めることだった。
目立つ装飾より読みやすい構成を優先した。既存のメニューやリンクはできるだけ維持し、必要な機能を追加するよう依頼した。
主な要件は次のようにまとめた。
PC・モバイル対応のレスポンシブデザイン
既存のメニューとカテゴリリンクの維持
最新記事・人気記事の表示
サムネイルとブログ検索機能
ダークモード対応
トップページに記事一覧を24件表示
次のページへの移動機能
記事一覧の途中に広告を適切に配置
トップページは特に 記事を1件ずつ1行で並べるリスト型デザインにした。タイトルとサムネイルを一目で確認できるように配置し、1ページに記事を24件表示してから次のページに移動できるようにした。
広告も無造作に挿入するのではなく、記事一覧の間に適切に配置するよう調整した。
こうした条件を会話で伝えると、CodexがBlogger XML、CSS、JavaScriptを修正する形で作業を進めた。
XMLエラーと修正の過程
最初からすべての機能が一度に正しく動いたわけではない。
テーマを修正している途中で、既存のメニューが消えたり、サムネイルが表示されなくなったりすることもあった。
特に印象に残っているのは、 Bloggerがサポートしていない条件式が原因でXML解析エラーが発生したことだった。
コードがもっともらしく見えても、Bloggerのエディタが受け付けなければテーマに適用できない。
その場合は、エディタに表示されたエラーメッセージをそのままCodexに伝え、原因を確認して該当箇所を修正してもらった。
トップページの記事一覧の矢印も、最初は見た目だけで実際にはページ移動ができなかった。リンクが正しく動作するよう、再度修正した。
この作業を通じてはっきり分かったのは、 AIがコードを書いたからといって、作業が自動的に完了するわけではないということだ。
プレビューや実際のブログでメニューをクリックし、記事一覧やサムネイルが意図どおりに表示されるかを確認するテストが欠かせなかった。
4つのブログのテーマを統合
今回の重要な目標は、4つのブログのデザインを統一しながら、それぞれのサイトに必要な機能を維持することだった。
サイトごとにコードを完全に分けて管理すると、共通デザインを変更する際に同じ修正を4回繰り返さなければならない。
この手間を減らすため、 共通のCSSとJavaScriptはGitHubで管理し、ブログごとのメニューや設定は各XMLに個別に残すよう構成を分けた。
その結果、共通デザインを一か所で管理しながら、サイトごとに異なる特色や機能も反映できた。
また、基本ドメインとtripドメインでは、既存のタグを使った 5言語の選択機能を維持し、newsブログには地域別のニュースを選ぶ機能を適用した。
同じデザインの枠組みを使いながら、それぞれのブログの目的に合わせて機能を変えた。
Google BloggerにCloudflareを使ってドメインを接続する方法は、上記の記事で確認できる。
AIでテーマを制作した実体験
修正と確認を経た新しいBlogger XMLテンプレートを、実際のブログに適用した。
PCとモバイルで交互に確認し、メニュー、サムネイル、検索、ページ移動などの主な機能が正常に動作するかを調べた。
ChatGPT Codexを使って最も強く感じたのは、 AIに何を作ってもらうかと同じくらい、望む結果をどれだけ具体的に説明するかが重要だということだ。
ただ「きれいなブログ」を依頼するのと、記事一覧の件数、広告の位置、既存メニューの維持といった条件を明確に示すのとでは、結果に違いがあった。
エラーが起きたときも、漠然と「動かない」と伝えるより、どの画面でどのような問題が起きたかを伝えるほうが、修正方法を見つけるのに役立った。
結局、今回の Google Bloggerテーマの制作は、AIがすべてを自動で終わらせた作業ではなかった。
自分で要件を決め、Codexがコードを書いて修正した後、実際のブログで結果を確認するという作業を繰り返して完成させた。
ウェブデザインの経験があまりなくても、Bloggerのスキンを自分で変えてみたいなら、ChatGPT CodexのようなAIコーディングツールを活用できる。ただし、 XMLエラーがないか、既存の機能が維持されているか、実際のサイトで正しく動作するかは、自分で確認する必要がある。
#GoogleBlogger, #Bloggerテーマ, #GoogleBloggerテーマ制作, #Blogger, #BloggerXML, #Bloggerスキン, #ブログテーマ, #テーマ制作, #ChatGPT, #ChatGPTCodex, #Codex, #Astra6, #SOL6_1, #AIコーディング, #AIブログテーマ, #ブログデザイン, #ブログカスタマイズ, #ブログ運営, #ブログ制作, #ブログ開発, #レスポンシブウェブ, #レスポンシブブログ, #XML修正, #CSS, #JavaScript, #GitHub, #ダークモード, #ブログSEO, #Bloggerテーマ体験談, #AI活用体験談
よくある質問（FAQ）
Q. CodexでBloggerテーマを作るとき、どのような要件を先に決めるとよいですか？
画面構成と、必ず維持したい機能を具体的にまとめるとよいでしょう。
たとえば、PC・モバイル対応、メニューやカテゴリリンクの維持、記事一覧の件数、サムネイル、検索、ページ移動、ダークモード、広告の位置など、確認可能な条件を書き出しておくと、修正結果を点検しやすくなります。
Q. Blogger XMLのエラーが起きたら、どう対処すればよいですか？
Bloggerのエディタに表示されたエラーメッセージを確認し、問題の状況とともにCodexに伝えて修正し、再度適用してみます。
XMLの文法だけでなく、Bloggerが許可している条件式かどうかも確認する必要があります。エラーを解消した後は、プレビューと実際のブログでメニュー、サムネイル、ページ移動など既存の機能が維持されているかをテストすると安心です。
Q. AIがテーマのコードを書いたら、すぐにブログに適用してもよいですか？
すぐ適用するより、プレビューと機能の確認を行うのがおすすめです。
コードが生成されたというだけで、正常に動作するとは限りません。適用の前後にXMLエラー、画面サイズごとのレイアウト、リンクや検索機能などを確認し、必要に応じて修正を繰り返す必要があります。
Q. 複数のBloggerサイトで共通のデザインを管理するにはどうすればよいですか？
共通のスタイルとスクリプトを分けて管理し、サイトごとの設定は各テーマに残す方法があります。
この記事では、共通のCSSとJavaScriptをGitHubで管理し、ブログごとのメニューや設定は個別のXMLに残しました。各サイトの構成や運営方法によって、適切な管理方法は異なる場合があります。
