ブログ作成・Codex活用

【Codex活用】
ブログ作成の具体的な流れ

ChatGPT PlusとCodexを使って、ブログ記事を作ってHPへ反映する流れを整理します。

Codexに初心者向けの記事作成を依頼するイメージ

このページでは、実際にブログ記事を作るときの流れを、作業順に分けて確認できます。

記事内容を作る、Codexに指示する、表示を確認する、必要なら修正するという流れをまとめています。

12

【具体的な作業の流れ】

ChatGPT PlusとCodexを使ってブログを作るときは、役割を分けて進めると分かりやすくなります。

特に初心者の場合、
「どこに文章を入れるのか」
「どのキーを押すのか」
「画像はどこに保存するのか」
「Codexには何を貼ればよいのか」
で迷いやすくなります。

そのため、作業の流れを最初に決めておくことが大切です。

ChatGPT Plusでは、文章作成、構成作成、画像を入れる位置の相談、Codex用プロンプト作成を行います。

Codexでは、ChatGPT Plusで作った文章や指示をもとに、HTMLやCSSへ反映し、画像の配置や表示調整を行います。

つまり、ChatGPT Plusで「何を書くか、どう見せるか」を考え、Codexで「実際にHPへ入れる」作業をする、という分け方です。

この流れを覚えておくと、ブログ作成中に、
「これはChatGPT Plusに聞くことなのか」
「これはCodexに頼むことなのか」
を判断しやすくなります。

【ChatGPT PlusとCodexを使ったブログ作成の具体的な行程】

ChatGPT PlusとCodexを使ってブログを作る場合は、いきなりHPに文章を入れるのではなく、作業を分けて進めると分かりやすくなります。

初心者の場合は、次の流れで進めると安心です。

1. ChatGPT Plusで文章を作る
2. ChatGPT Plusで画像の使い方を考える
3. ChatGPT PlusでCodex用プロンプトを作る
4. Codexにプロンプトを貼る
5. CodexでHTMLやCSSに反映する
6. ブラウザで表示を確認する
7. おかしい部分をChatGPT Plusに相談する
8. 修正用プロンプトを作ってCodexに貼る

【1】ChatGPT Plusでブログ文章を作る行程

【何をする場所か】

ChatGPT Plusでは、ブログの文章や構成を作ります。

たとえば、次のような内容を入力します。

  • 今日学んだこと
  • 分からなかったこと
  • できなかったこと
  • 操作でつまずいたこと
  • 画像を入れたい場所
  • 記事にしたいテーマ
  • 読者に伝えたいこと

ChatGPT Plusは、これらのメモを読みやすい文章に整える役割です。

【操作手順】

  1. ChatGPT Plusの画面を開きます。
  2. 入力欄をクリックします。
  3. ブログにしたいメモや文章を入力します。
  4. 長い文章を入力するときは、途中で改行しながら書きます。
  5. 改行したいときは、 Shift + Enter を押します。
  6. 入力が終わったら、送信ボタンを押します。または、 Enter を押して送信します。
  7. ChatGPT Plusが文章を整理してくれます。
  8. 出てきた文章を読み、足りない部分があれば追加で質問します。

【使いやすい指示文の例】

以下の文章を、初心者向けブログ記事として読みやすく整理してください。

誤字脱字、句読点、言い回しを直してください。
内容は省略しないでください。
必要な説明が抜けている場合は、初心者にも分かるように補足してください。
見出し、小見出し、項目、まとめに分けてください。

【2】ChatGPT Plusで画像を確認する行程

【何をする場所か】

ChatGPT Plusでは、画像を見ながら、ブログ内のどこに入れると自然かを考えられます。

画像入力では、入力欄の近くにあるプラスアイコンから写真やファイルを追加したり、画像ファイルをドラッグしたり、コピーした画像を貼り付けたりできます。表示や名称は、利用環境や時期によって変わる場合があります。

【操作手順】

  1. ChatGPT Plusの画面を開きます。
  2. 入力欄の近くにある ＋ またはクリップマークを押します。
  3. 「写真とファイルを追加」「ファイルをアップロード」など、近い名前の項目を選びます。※表示名は環境や時期によって変わる場合があります。
  4. パソコン内から、使いたい画像を選びます。
  5. 「開く」を押します。
  6. 入力欄に、画像について相談したい内容を書きます。
  7. たとえば、次のように入力します。
この画像をブログ記事のどこに入れると自然ですか？
初心者に分かりやすい位置、画像の説明文、alt属性、キャプションも考えてください。
  1. 送信ボタン、または Enter を押して送信します。
  2. ChatGPT Plusの回答を確認します。
  3. 必要であれば、「もっと小さく表示したい」「文章の邪魔にならない位置にしたい」「Codex用プロンプトにしてください」と追加で依頼します。

【画像を貼り付けるキー操作】

  • コピー：Ctrl + C
  • 貼り付け：Ctrl + V
  • 全選択：Ctrl + A
  • 取り消し：Ctrl + Z

【3】ChatGPT PlusでCodex用プロンプトを作る行程

【何をする場所か】

ChatGPT Plusでは、Codexに渡すための指示文を作ります。

Codexへそのまま長い文章を貼ると、内容が短くまとめられたり、細かい操作手順が省略されたりする場合があります。

そのため、ChatGPT Plusで先に、

  • どのページに入れるか
  • どの見出しの下に入れるか
  • 文章を省略しないこと
  • 画像をどこに保存するか
  • 画像パスをどうするか
  • CSSをどう調整するか
  • スマホ表示を確認すること
  • 既存記事を削除しないこと

まで入れた、Codex用プロンプトを作ると安全です。

【操作手順】

  1. ChatGPT Plusで作成したブログ本文を確認します。
  2. 画像を入れる場所や、追加したい内容を決めます。
  3. 入力欄に、次のように書きます。
この文章を既存のOBS記事に追加するためのCodex用プロンプトを作ってください。
既存記事を削除しないこと、画像パス、CSS、スマホ対応、作業後の確認も入れてください。
操作手順は省略しないでください。
  1. 必要であれば、画像ファイル名も指定します。
画像ファイル名は obs-basic-screen-layout.png にしてください。
保存先は images フォルダにしてください。
  1. ChatGPT PlusがCodex用プロンプトを作成します。
  2. 出てきたプロンプトを確認します。
  3. 問題なければ、プロンプト全体を選択します。
  4. コピーするために、 Ctrl + C を押します。

【4】Codexにプロンプトを貼る行程

【何をする場所か】

Codexでは、ChatGPT Plusで作った指示文を貼り付けて、HPファイルに反映します。

Codexでは、HTML、CSS、画像パスなどのHP制作ファイルに関する作業を依頼します。画面表示やボタン名は、利用環境や時期によって変わる場合があります。

【操作手順】

  1. Codexを開きます。
  2. ChatGPTアカウントでサインインします。※画面表示は環境によって変わる場合があります。
  3. 作業するHP制作フォルダ、またはプロジェクトフォルダを選びます。
  4. Codexのコメント欄、または指示入力欄をクリックします。
  5. ChatGPT PlusでコピーしたCodex用プロンプトを貼り付けます。
  6. 貼り付けは、 Ctrl + V を押します。
  7. 貼り付けた内容を確認します。
  8. 送信ボタン、または実行ボタンを押します。※ボタン名は環境によって変わる場合があります。
  9. CodexがHTML、CSS、画像パスなどを確認しながら作業します。
  10. Codexの作業結果を確認します。

【Codexに貼る前に確認すること】

  • どのページを直すのか
  • どの見出しの下に入れるのか
  • 文章を省略しないこと
  • 画像ファイル名
  • 画像保存先
  • HTMLの画像パス
  • CSSの調整
  • スマホ表示の確認
  • 既存記事を削除しないこと
  • 作業後の確認項目

【5】画像をHP制作フォルダに入れる行程

【なぜ必要か】

画像をブログに表示するには、HTMLに画像タグを書く前に、画像ファイル本体がHP制作フォルダ内に入っている必要があります。

HTMLの画像タグは、画像の「住所」を書くものです。その住所に画像がなければ、ブラウザには表示されません。

【おすすめの画像名】

画像名は、日本語や空白を避けて、英数字にすると管理しやすくなります。

たとえば、

スクリーンショット ブログ使用.png12.png

のままだと、あとで分かりにくくなります。

OBSの基本画面画像なら、次のような名前が分かりやすいです。

obs-basic-screen-layout.png

または、

obs-screen-overview.png

【画像ファイルをコピーする手順】

  1. パソコンで画像ファイルを探します。
  2. 画像ファイルをクリックして選択します。
  3. コピーするために、 Ctrl + C を押します。
  4. HP制作フォルダを開きます。
  5. 画像を保存するフォルダを開きます。例：images
  6. 画像フォルダの中で、 Ctrl + V を押して貼り付けます。
  7. 画像名を変更したい場合は、画像ファイルを右クリックします。
  8. 「名前の変更」を選びます。
  9. 新しい名前を入力します。
  10. 例として、obs-basic-screen-layout.png と入力します。
  11. Enter を押して確定します。

【HTMLに書く画像パス】

画像を images フォルダに入れた場合、HTMLでは次のように書きます。

<img src="images/obs-basic-screen-layout.png" alt="OBSの基本画面のスクリーンショット">

この中の、

images/obs-basic-screen-layout.png

が画像の住所です。

画像が表示されない場合は、この住所が間違っている可能性があります。

【6】CodexでHTMLに画像を挿入する行程

【何をするか】

Codexには、画像を表示するためのHTMLを記事内に入れてもらいます。

画像は、本文の途中に大きく割り込ませるのではなく、説明に合う場所へ入れると読みやすくなります。

【HTML例】

<figure class="article-image article-image--obs">
  <img src="images/obs-basic-screen-layout.png" alt="OBSの基本画面。シーン、ソース、プレビュー画面、音声ミキサー、コントロールの位置が分かるスクリーンショット">
  <figcaption>OBSの基本画面です。まずは「シーン」「ソース」「音声ミキサー」「コントロール」の位置を確認すると、トラブルが起きたときにも確認しやすくなります。</figcaption>
</figure>

【それぞれの意味】

  • figure：画像と説明文をひとまとまりにするためのタグです。
  • img：画像を表示するためのタグです。
  • src：画像ファイルの場所を指定します。
  • alt：画像が見られない人や、画像が表示されなかったときのための説明文です。
  • figcaption：画像の下に表示する説明文です。

【7】CodexでCSSを調整する行程

【何をするか】

CSSでは、画像の見た目を整えます。

たとえば、

  • 画像を中央に置く
  • 画像を大きすぎないサイズにする
  • スマホで自動縮小する
  • 画像の角を少し丸くする
  • 画像の下に説明文を付ける

などを設定します。

【CSS例】

.article-image--obs {
  margin: 1.5rem auto 2rem;
  text-align: center;
}

.article-image--obs img {
  width: 100%;
  max-width: 720px;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.article-image--obs figcaption {
  margin-top: 0.6rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #555;
}

【初心者向けの意味】

  • width: 100%;：表示できる範囲に合わせて画像を広げます。
  • max-width: 720px;：PCで大きくなりすぎないようにします。
  • height: auto;：画像の縦横比を崩さないようにします。
  • margin: 0 auto;：画像を中央寄せにします。
  • border-radius: 10px;：画像の角を少し丸くします。

【8】Codex作業後にブラウザで確認する行程

【なぜ確認が必要か】

CodexがHTMLやCSSを修正しても、必ず自分の目で確認します。

特に画像は、

  • ファイルの場所
  • 画像パス
  • ファイル名
  • 拡張子
  • 大文字と小文字

が違うだけで表示されないことがあります。

【確認手順】

  1. HP制作フォルダの中から、修正したHTMLファイルを開きます。
  2. ブラウザで表示します。
  3. 画像を入れた場所までスクロールします。
  4. 画像が表示されているか確認します。
  5. 画像が大きすぎないか確認します。
  6. 画像が小さすぎないか確認します。
  7. 画像の下にキャプションがあるか確認します。
  8. 文章の流れが不自然になっていないか確認します。
  9. スマホ幅でも確認します。ブラウザの幅を狭くして見るだけでも、簡単な確認になります。
  10. 画像が表示されていない場合は、画像ファイルの保存場所とHTMLの src を確認します。

【ブラウザ確認で使うキー操作】

  • ページ更新：Ctrl + R
  • 強めの更新：Ctrl + F5
  • ページ内検索：Ctrl + F
  • 拡大：Ctrl + ＋
  • 縮小：Ctrl + －
  • 標準サイズに戻す：Ctrl + 0

ページ内検索で、

obs-basic-screen-layout

と検索すると、HTML内に画像名が入っているか探しやすいです。

【9】画像が表示されないときの確認行程

画像が表示されないときは、慌てずに順番に確認します。

【確認1】画像ファイルが本当にあるか

HP制作フォルダの中に、

images/obs-basic-screen-layout.png

があるか確認します。

ない場合は、画像ファイルを images フォルダに入れます。

【確認2】HTMLのsrcが合っているか

HTMLに、

<img src="images/obs-basic-screen-layout.png">

と書いてあるか確認します。

画像の名前が少しでも違うと表示されません。

たとえば、次のような違いに注意します。

obs-basic-screen-layout.png
obs-basic-screen-layout.PNG
obs-screen-overview.png
スクリーンショット ブログ使用.png12.png

【確認3】画像の保存場所が違っていないか

画像が assets/images フォルダにあるなら、HTMLは次のようになります。

<img src="assets/images/obs-basic-screen-layout.png">

画像が images フォルダにあるなら、HTMLは次のようになります。

<img src="images/obs-basic-screen-layout.png">

画像の住所と実際の置き場所を合わせることが大切です。

【補足】スクリーンショット画像を入れようとして表示されなかったときの記録

HPやブログを作っていると、文章だけでは分かりにくい部分に、実際のスクリーンショット画像を入れたくなることがあります。

たとえば、ChatGPTの画面、ログイン画面、設定画面、OBSの画面、Codexで作業した画面などは、文章で説明するよりも画像があった方が、初心者には伝わりやすくなります。

しかし、実際に画像を記事へ入れようとすると、思った通りに表示されないことがあります。これは失敗というより、HP制作でよく起きる確認ポイントのひとつです。

やりたかったこと

今回やりたかったことは、記事の説明に合うスクリーンショット画像を、本文の近くに入れることでした。

たとえば、01の説明には01に関係する画面画像、03の説明には03に関係する画面画像、というように、読者が画面操作をイメージしやすい形にしたいと考えました。

  • 説明文の近くに画像を入れる
  • 画像を大きすぎないサイズにする
  • スマホでも見やすくする
  • 画像の下に短い説明文を入れる
  • 画像の意味が分かる alt を入れる
  • 既存の記事本文やリンクを壊さない

最初にしたこと

まず、ChatGPT Plusに「この画像を記事の01の説明部分に入れたい」と相談しました。

そのあと、ChatGPT PlusでCodex用の指示文を作り、Codexに貼り付けて、HTMLへ反映してもらう流れにしました。

この時点では、次のように考えていました。

  • 画像の入れ場所を指定すれば入る
  • 画像名を英数字にすれば分かりやすくなる
  • Codexに頼めばHTMLを書き換えてくれる
  • 画像サイズもCSSで調整できる

うまく表示されなかった流れ

ところが、実際に確認すると、画像が表示されませんでした。

HTMLには画像を表示するための img タグが入っているように見えても、ブラウザ上では画像が出ないことがあります。

このとき初心者が迷いやすいのは、次のような点です。

  • 画像は入ったのか、入っていないのか
  • HTMLが間違っているのか
  • 画像ファイルが悪いのか
  • ファイル名が違うのか
  • 画像の保存場所が違うのか
  • Codexの作業が反映されていないのか

特に大切なのは、HTMLに画像名を書くだけでは画像は表示されない、ということです。

画像ファイル本体が、HP制作フォルダ内の正しい画像フォルダに入っていなければ、ブラウザには表示されません。

原因として考えられること

画像が表示されない原因は、ひとつとは限りません。主に次のような原因が考えられます。

  • 画像ファイル本体がHP制作フォルダ内にない
  • HTMLの src と画像の保存場所が合っていない
  • ファイル名が少し違っている
  • 拡張子が違っている
  • 日本語や空白入りのファイル名で扱いにくくなっている
  • Codexが見られる場所に画像ファイルがない
  • HTMLには画像指定があるが、実際の画像ファイルが存在しない
  • ブラウザに古い表示が残っている
  • CSSで画像が見えにくい表示になっている

ファイル名を変えるだけでは不十分

画像名を英数字にすることは大切です。たとえば、次のような名前にすると、HTMLでも扱いやすくなります。

chatgpt-guide-01.png

ただし、名前を変えるだけでは不十分です。

次の3つがそろっていないと、画像は表示されません。

  1. 画像ファイル本体が、正しい画像フォルダに入っている。
  2. HTMLの src が、その保存場所を正しく指定している。
  3. ファイル名と拡張子が完全に一致している。

たとえば、HTMLに次のように書いてある場合、

<img src="images/chatgpt-guide-01.png" alt="ChatGPTの画面操作説明画像">

実際に次の場所に画像がなければ表示されません。

images/chatgpt-guide-01.png

いったん元に戻す判断も大切

画像が表示されないまま作業を続けると、記事の中に不要なHTMLや、存在しない画像パス、使っていないCSSが残ってしまうことがあります。

そうなると、あとからどこを直せばよいのか分かりにくくなります。

そのため、うまくいかないときは、いったん画像挿入前の状態に戻す判断も大切です。

元に戻すときは、次のようなものだけを整理します。

  • 表示されない画像の img タグ
  • 存在しない画像パス
  • 画像用に追加した専用CSS
  • 画像のためだけに追加した説明文やキャプション

一方で、元からあった記事本文、既存画像、既存リンク、見出し構成は消さないようにします。

次に試すなら、1枚ずつ確認する

複数のスクリーンショット画像を一度に入れようとすると、どこで問題が起きたのか分かりにくくなります。

次に画像を入れるときは、1枚ずつ確認する流れが安全です。

1. 使う画像を1枚だけ用意する
2. 画像名を英数字にする
3. 画像フォルダにコピーする
4. HTMLに1枚だけ挿入する
5. ブラウザで表示確認する
6. 表示されたら次の画像へ進む
7. 表示されない場合は画像パスを確認する

この流れにすると、失敗したときも原因を探しやすくなります。

画像が表示されないときのチェックリスト

  • 画像ファイルはHP制作フォルダ内にあるか
  • 画像は images や assets/images などの画像フォルダに入っているか
  • HTMLの src と画像の保存場所は合っているか
  • ファイル名は完全に一致しているか
  • 拡張子は一致しているか
  • 日本語や空白入りのファイル名を使っていないか
  • Codexが確認できる場所に画像があるか
  • ブラウザを更新したか
  • CSSで画像が非表示になっていないか
  • 親要素が小さすぎて画像が見えなくなっていないか

Windowsの場合、ブラウザで Ctrl + F5 を押すと、強めの更新ができる場合があります。

初心者向けの大切な考え方

画像が表示されないことは、失敗ではありません。HP制作ではよくある確認ポイントです。大切なのは、焦って何度も上書きすることではなく、画像ファイル本体、保存場所、HTMLの src、ファイル名、拡張子を順番に確認することです。

【10】ChatGPT Plusに戻って質問する行程

【どんなときに戻るか】

Codex作業後に分からないことが出たら、ChatGPT Plusに戻って質問します。

たとえば、

  • 画像が表示されない
  • 画像が大きすぎる
  • 文章の位置が変
  • CSSがどこに入ったか分からない
  • 記事一覧に出ない
  • スマホで崩れる
  • Codexの返答の意味が分からない

このようなときは、ChatGPT Plusに相談します。

【質問するときの書き方】

CodexでOBS記事に画像を入れる作業をしましたが、画像が表示されません。
HTMLには以下のように書かれています。

<img src="images/obs-basic-screen-layout.png">

画像ファイルはどこを確認すればよいですか？
初心者向けに順番に教えてください。

コードやエラー内容がある場合は、そのまま貼ると分かりやすいです。

ChatGPT PlusとCodexを使う場合は、役割を分けると作業しやすくなります。ChatGPT Plusでは、文章作成、構成作成、画像の入れ場所、疑問の整理、Codex用プロンプト作成を行います。Codexでは、HTML編集、CSS調整、画像配置、画像パス修正、スマホ表示の調整を行います。

初心者におすすめの流れ

ChatGPT Plusで考える
↓
ChatGPT Plusで文章を作る
↓
ChatGPT Plusで画像の位置を相談する
↓
ChatGPT PlusでCodex用プロンプトを作る
↓
Codexに貼る
↓
CodexでHTML・CSS・画像を反映する
↓
ブラウザで確認する
↓
問題があればChatGPT Plusに戻って相談する

大切なのは、ChatGPT Plusに「考えること」と「文章作成」を任せ、Codexに「HPファイルへ反映すること」を任せることです。

この分け方をすると、ブログ作成の流れが見えやすくなり、どこで何をすればよいのか迷いにくくなります。