Gemini作成ページのWordPressデザインズレ修正方法
このページは、指定されたYouTube動画の内容を要約したものです。Geminiで作成したWebページをWordPressに移植した際に発生するデザインのズレを修正する方法について解説します。
発生する問題点
Geminiで作成したWebページをWordPressのテーマ（動画では「Cocoon」を例示）に移植すると、テーマ側で設定されているCSSが優先され、意図しないデザインになってしまうことがあります。
具体的な例：
- 見出し（h1, h2タグなど）に、テーマ固有の背景色（例：グレー）が自動的に付いてしまう。
- テキストの色が、元のデザイン（例：白）からテーマのデフォルト色（例：黒）に変わってしまう。
解決策：CSSによる強制上書き
この問題は、WordPressテーマのCSSよりも強いCSSを追加で読み込ませることで解決できます。動画では、投稿ごとにカスタムHTMLブロックを使ってCSSを適用する方法が紹介されています。
手順1：見出しの背景色を無効化する
- 提供されているツール内の
Zリソースフォルダから「テンプレート、個別記事見出し背景無効化」というファイルを開きます。 - 中に記述されている以下のCSSコードをコピーします。
- コード内の
XXXXを、対象となるWordPress投稿のIDに書き換えます（IDは投稿一覧やURLで確認可能）。 - WordPressの投稿編集画面で、一番上に「カスタムHTML」ブロックを追加し、書き換えたコードを貼り付けます。
<style>
/* このページ（ID: XXXX）の見出し背景のみを無効化 */
#post-XXXX h1,
#post-XXXX h2 {
background: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
border: none !important;
}
</style>
※ !important は、他のCSS設定よりこのスタイルを優先させるための記述です。
手順2：文字色を修正する
文字色が変わってしまった場合は、HTMLコードを直接編集することで修正できる可能性が高いです。
- 色を変更したい要素（例：見出し）のHTMLコードを探します。
- その要素のクラス属性に、色を指定するクラス（例：Tailwind CSSの
text-white）を追加します。
これにより、テーマのデフォルト色設定を上書きし、意図した文字色に戻すことができます。
