0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@kobe_ai_lab(大学教員 Yasukawa)

【全6回】知識ゼロからVPSでWebアプリ公開 #2.5 【Docker入門おまけ】WordPressのCSSを「ローカルファイル編集」で書き換えて、Webの裏側を完全攻略する

Last updated at Posted at 2025-12-08

はじめに

本連載は、超初心者が 「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 してデータが消えている場合や、新しい設定で初期化された場合は、再度インストール画面が出ます）

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

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

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

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

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

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

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

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検証ツールで裏側を覗く

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

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

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

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

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

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

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

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

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

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

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

  1. PC上のテーマフォルダ内にある functions.php を探して開く。
  2. 一番最後 に以下のコードを追記して保存。
/* ▼▼▼ 演習用カスタマイズ ▼▼▼ */
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>';
}
  1. ブラウザを更新して、画面最上部に赤い帯が出れば大成功です！

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

第2.5回 まとめ

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

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

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?