対象：ブロックエディタ（Gutenberg）。カスタムHTML ブロックを用いた貼り付け。タイトルは <h1>...</h1> の中身を使用。
目次
1. GPTでHTMLを作成する
- ChatGPTに「HTMLタグ付きのページ」を依頼します。例プロンプト：
例：「個人ブログの自己紹介ページを、HTMLと最小限のCSS込みで作ってください。スマホ対応・日本語・シンプル。」 - 出力されたHTMLを確認し、
<h1>と<body>...</body>が含まれていることを確認。
このマニュアルでは、タイトルは
<h1>…</h1> の「中身」をWordPressの「投稿タイトル」に、本文は <body> 内の内容を貼り付けます。2. WordPressにログイン
- ブラウザで
https://あなたのドメイン/wp-admin/にアクセス。 - 管理者アカウントでログイン。
設定 → 一般 でサイト言語やタイムゾーンを日本に揃えておくと運用がスムーズです。
3. 新規投稿を作成（タイトルへ<h1>を反映）
- 左メニュー 投稿 → 新規追加 をクリック。
- GPTのHTMLから
<h1>...</h1>の中身テキストのみをコピーし、投稿画面上部の「タイトル」に貼り付け。
注意：本文側に同じ<h1>を残すと見出しが重複します。本文では削除するか、<h2>などに変更しましょう。
4. 本文に<body>内を貼り付け（カスタムHTMLブロック）
- 本文エリアで ＋ → カスタムHTML を追加。
- GPTのHTMLから
<body>と</body>の間だけをコピーして貼り付け。 - 右上の プレビュー をクリックして表示確認。
画像が表示されない場合は、WordPressの「メディア」に画像をアップロードし、
<img src="..."> のURLを置き換えてください。5. プレビューで確認
- スマホ表示（狭い幅）でも崩れないか。
- リンク・画像・表・動画の動作確認。
- 本文に
<h1>が残っていないか（タイトルと二重にならないように）。
レスポンシブ未対応なら、GPTに「モバイル対応にリライトして」と頼むと改善が早いです。
6. 公開する
- 右上の 公開 → 確認ダイアログで再度 公開。
- 公開URLを開いて最終チェック（タイトル・見出し・改行・画像）。
固定ページで使う場合も手順は同様です（メニューに載せたい場合は「外観 → メニュー」で追加）。
付録：サンプルHTMLとチェックリスト
A. サンプルHTML（GPTへ依頼して得られる想定）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>サンプルページ</title>
<style>
body{font-family:system-ui, sans-serif; line-height:1.8; margin:0; padding:24px}
h1{font-size:28px}
p{margin:0 0 1em}
</style>
</head>
<body>
<h1>私の新しい記事</h1>
<p>これはサンプル本文です。</p>
</body>
</html>
B. 貼り付け時のチェックリスト
- タイトル：
<h1>の中身だけを「投稿タイトル」に入れたか - 本文：
<body>...</body>の「中身だけ」を貼り付けたか - 本文側の
<h1>は削除したか（または<h2>へ変更） - 画像パスはWordPressのメディアURLになっているか
- スマホ表示崩れはないか（プレビュー確認）
C. うまく表示されないとき
- テーマやプラグインのCSSと競合 → GPTに「内蔵CSSを名前空間化して」と依頼
- 外部JSがブロックされる → 可能ならJSを使わない構成に変更
- iFrame禁止の環境 → 画像とテキスト主体に置き換え
📂 Nextcloud × WordPress 表示マニュアル
Nextcloud画像 表示方法比較テンプレート