はじめに

本連載は、超初心者が 「Dockerを使って自作Webアプリをサーバー公開する」 までのステップバイステップ講座です。

第1回：Dockerってなに？＆ Webサーバーを起動せよ
第2回：人気No.1 CMS「WordPress」を構築せよ
第2.5回：【Docker入門おまけ1】WordPressのCSSを「ローカルファイル編集」で書き換えて、Webの裏側を完全攻略する（今回）
第3回：オリジナルアプリ開発① 〜コードを書く〜
第4回：オリジナルアプリ開発② 〜コンテナ化〜
第5回：【実演】VPSへのデプロイ（世界へ公開）
第6回：守りの技術：バックアップとセキュリティ

前回の第2回では、 docker-compose という「レシピ本」を使って、たった3分でWordPress環境を立ち上げました。
しかし、ただ画面をポチポチ操作するだけなら、Dockerを使う意味は半分しかありません。

今回は「番外編」として、 「手元のパソコンにあるファイルを書き換えると、コンテナの中身が変わる（同期）」 というDockerの強力な機能を体験します。
これが理解できると、第3回からの「オリジナルアプリ開発」が劇的にわかりやすくなります！

Step 0: 設定ファイルを「最強モード」に進化させる

前回作った docker-compose.yml は、「とりあえず動かす」ためのシンプルな設定でした。
今回は、「パソコン上でコードを書いて、サイトをカスタマイズする」ために、設定を少しだけ書き換えます。

1. フォルダを開く

前回作成したデスクトップの my-wordpress フォルダを開き、中の docker-compose.yml をエディタ（VS Codeなど）で開いてください。

2. コードを1行追加する

wordpress の設定部分（ services: の下の方）に、以下の volumes （ボリューム）設定を追加します。

変更前（前回の状態）：

  wordpress:
    image: wordpress:latest
    ports:
      - "8000:80"
    environment:
      # ... (省略) ...
    depends_on:
      - db

変更後（今回）：

  wordpress:
    image: wordpress:latest
    ports:
      - "8000:80"
    volumes:                    # ★ここを追加
      - ./html:/var/www/html    # ★ここを追加
    environment:
      # ... (省略) ...

💡 解説：これ何したの？
volumes: - ./html:/var/www/html は、 「私のPCにある html フォルダと、コンテナの中の /var/www/html （サイトのデータ置き場）を同期せよ！」 という命令です。
これで、PC上でファイルをいじれるようになります。

3. 再起動する

書き換えたら上書き保存して、ターミナルで以下のコマンドを実行し、設定を反映させます。

cd ~/Desktop/my-wordpress
docker-compose up -d

これで準備完了です！フォルダの中に新しく html というフォルダが生まれ、その中にWordPressの全ファイルが「ドバッ」と同期されたはずです。

Step 1: サイトの準備と管理者設定

それではブラウザで http://localhost:8000 にアクセスしましょう。
（※前回 down してデータが消えている場合や、新しい設定で初期化された場合は、再度インストール画面が出ます）

インストール:
- 言語：日本語
- タイトル： My Lab Blog
- ユーザー名： admin
- パスワード： password123 （練習用）
- メール：自分のアドレス

※最近はこんな単純なパスワードじゃダメです。ちゃんとしたのに変えましょう。
一応、パスワード例載せときます。

jK3L25i9BYwc

ログイン: 設定したユーザーで管理画面に入ります。
大掃除:
- 「投稿」→「Hello world!」をゴミ箱へ。
- 「固定ページ」→「サンプルページ」もゴミ箱へ。

これで、開発を始めるための真っ白なキャンバスが整いました。

Step 2: リッチな記事を作る（HTML構造の理解）

まずは普通に記事を書きますが、 「Webページの構造」 を意識してみましょう。

左メニュー 「投稿」 → 「新規投稿」 。
タイトル：「Docker学習日記」
見出しブロック: 「＋」から 「見出し」 を選び、「今日の学び」と入力。
- ※これが裏では <h2> タグになります。
リストブロック: 「＋」から 「リスト」 を選び、箇条書きを入力。
- ※これが裏では <ul> <li> タグになります。
公開: 右上の「公開」を押し、実際の画面（フロントエンド）を確認してください。

Step 3: CSSマジック！ファイルを編集してデザインを変える

ここからが本番です。管理画面は使いません。
PC上のファイルを直接編集して 、コンテナの中のWebサイトのデザインを変えてみます。

1. テーマファイルを探す

デスクトップの my-wordpress フォルダの中を見てください。
html > wp-content > themes と進み、 現在有効なテーマのフォルダ （例: twentytwentyfour など）を開きます。

その中に style.css というファイルがあります。これがWebサイトの「見た目」の設計図です。

2. エディタで編集する

style.css をVS Code（なければメモ帳でも可）で開き、 ファイルの最後 に以下のコードをコピペして保存します。

/* ▼▼▼ 演習用カスタマイズ ▼▼▼ */

/* 1. 全体の背景色を変える */
body {
    background-color: #f0f8ff !important; /* アリスブルー */
    color: #333333;
}

/* 2. 記事のタイトルに下線を引く */
h1, h2 {
    border-bottom: 3px solid #ff6347; /* トマト色 */
    padding-bottom: 10px;
}

3. ブラウザで確認

ブラウザに戻り、ページを 再読み込み（F5） してください。
背景が水色になり、見出しにオレンジの線が引かれましたか？

🎓 学びのポイント
「PCでファイルを保存」→「Dockerが瞬時にコンテナへ同期」→「Webサーバーが新しいデザインを表示」。
この一連の流れ（ボリュームマウント）こそが、Docker開発の醍醐味です。

Step 4: Chrome検証ツールで裏側を覗く

プロのエンジニアは、デザインを変える前に必ず 「検証ツール」 を使います。

ブラウザ上の「見出し」の上で 右クリック → 「検証」 。
右側のパネル（Stylesタブ）を見てください。
先ほど書いた border-bottom: 3px solid #ff6347 が表示されています。
ここのカラーコードをクリックして、色を青や緑に変えてみてください。 リアルタイムで画面が変わります 。

（※ここでの変更は一時的なシミュレーションです。リロードすると元に戻ります）

【応用課題】さらに深く！機能拡張とPHP編集

余裕がある人は、さらに一歩進んで「エンジニア領域」に踏み込みましょう。

Step 5: プラグインでお問い合わせフォームを作る

WordPressは「プラグイン」というアプリを入れることで進化します。

管理画面 「プラグイン」 → 「新規追加」 。
検索窓に Contact Form 7 と入力し、インストール＆有効化。
左メニュー「お問い合わせ」から ショートコード （ [contact-form-7 ...] ）をコピー。
「固定ページ」 を新規作成し、ショートコードを貼り付けて公開。

これで、プログラムを一行も書かずに高機能なフォームが完成しました。

Step 6: 禁断のPHP編集（サイトの脳みそをいじる）

最後に、プログラムファイル（PHP）を書き換えてみます。失敗すると画面が真っ白になる、緊張感のある作業です。

PC上のテーマフォルダ内にある functions.php を探して開く。
一番最後 に以下のコードを追記して保存。

/* ▼▼▼ 演習用カスタマイズ ▼▼▼ */
add_action('wp_body_open', 'show_dev_message');

function show_dev_message() {
    echo '<div style="background: red; color: white; text-align: center; padding: 10px;">';
    echo '開発モード：Dockerで編集中';
    echo '</div>';
}

ブラウザを更新して、画面最上部に赤い帯が出れば大成功です！

もし真っ白になったら？
焦らず、PC上のエディタで追記したコードを削除して保存すれば、すぐに元に戻ります。
「壊してもすぐ直せる」 。これがDocker環境の安心感です。

第2.5回まとめ

今回は、Docker環境で実際に「開発」を行う手触りを感じてもらいました。

volumes を使えば、PCとコンテナを同期できる。
Webサイトは HTML（構造） 、 CSS（見た目） 、 PHP（機能） で出来ている。
これらをDockerごしに編集することで、自由にサイトを作れる。

さて、既存のWordPressをいじるのはここまでです。
次回はいよいよ 「第3回：オリジナルアプリ開発①」 。
誰かが作ったCMSではなく、 あなた自身の力で、0からコードを書いてWebアプリを作ります 。お楽しみに！