WordPressブログの執筆環境を劇的改善した話【VSCode × Markdown × 自動化】

Others
2026.01.12
スポンサーリンク
スポンサーリンク

はじめに：執筆環境の重要性

ブログを続けるために最も重要なことは何でしょうか？

  • 文章力？
  • ネタ探し？
  • SEO対策？

もちろん、これらも重要です。しかし、私が最も重要だと考えるのは、執筆環境の快適さです。

書きやすい環境があれば、自然と記事を書きたくなります。逆に、環境が悪いと、書くこと自体がストレスになります。

この記事では、私がWordPressブログの執筆環境を劇的に改善した方法をご紹介します。

執筆環境の変化

 

Before：WordPress標準の執筆フロー

従来の方法

私が以前使っていた方法：

1. WordPress管理画面を開く
   → ログイン
   
2. Gutenbergエディタで執筆
   → ブラウザ上で直接編集
   
3. 画像をドラッグ&ドロップ
   → Media Libraryにアップロード
   
4. プレビュー確認
   → 別タブで開く
   
5. 公開
   → 「公開」ボタンをクリック

問題点

1. ブラウザに依存

  • ブラウザがクラッシュしたら、書いた内容が消える
  • 自動保存はあるが、常に不安

2. バージョン管理ができない

  • いつ何を変更したか分からない
  • 過去のバージョンに戻せない

3. 画像管理が煩雑

  • 同じ画像を何度もアップロード
  • Media Libraryが肥大化
  • どれが最新の画像か分からない

4. オフライン作業ができない

  • ネット環境が必須
  • 移動中に書けない

5. 執筆に集中できない

  • Gutenbergの操作に気を取られる
  • Markdown記法が使えない

 

After：理想の執筆環境

新しい方法

現在の方法：

1. VSCodeで記事作成
   → Markdown記法で執筆
   → Ctrl+Shift+V でプレビュー
   
2. 画像を配置
   → ローカルフォルダに保存
   
3. スクリプト実行
   → npm run publish
   
4. WordPress管理画面で確認
   → 公開

改善されたこと

1. 慣れ親しんだエディタ

  • VSCodeで執筆
  • ショートカットキーが使える
  • 拡張機能が使える

2. バージョン管理

git commit -m "記事追加：○○について"
git push
  • いつ何を変更したか記録
  • 過去のバージョンに戻せる
  • チーム開発も可能

3. 画像管理の自動化

  • 画像を上書き保存すればOK
  • 自動で変更を検知
  • Media Libraryがクリーン

4. オフライン作業

  • ネット環境不要
  • 移動中でも書ける
  • 書き溜めておいて、まとめて投稿

5. 執筆に集中

  • Markdownでシンプルに書ける
  • プレビューも高速
  • 余計な操作が不要

 

実際の運用フロー

日常的な記事投稿

Step 1：記事作成

VSCodeで記事を書く：

code posts/new-article/post.md

Front Matter（記事のメタ情報）：

---
title: "記事タイトル"
slug: new-article
category: Development
tags: [WordPress, Markdown, 自動化]
featured_image: featured.jpg
mode: html
status: draft
date: 2026-01-11
---

本文（Markdown記法）：

## はじめに

この記事では、○○について解説します。

### 対象読者

- ○○に興味がある方
- ○○を始めたい方

## 本文

詳しい説明...

npm install example

![スクリーンショット](images/01-screenshot.png)

## まとめ

この記事では、以下について解説しました...

プレビュー確認：

Ctrl+Shift+V

VSCode内でリアルタイムプレビュー！

 

Step 2：画像配置

フォルダ構成：

posts/new-article/
├── post.md
├── featured.jpg  ← アイキャッチ画像
└── images/
    ├── 01-screenshot.png
    └── 02-diagram.png

Markdown内の参照：

![スクリーンショット](images/01-screenshot.png)
![図解](images/02-diagram.png)

シンプル！

 

Step 3：スクリプト実行

npm run publish-single new-article

出力：

📝 処理開始: new-article
📄 タイトル: 記事タイトル
🎯 モード: HTML変換
🏷️  カテゴリー: Development
🔖 タグ: WordPress, Markdown, 自動化

📸 画像アップロード中...
  ✅ 01-screenshot.png → new-article-01-screenshot-a3f2b1.png
  ✅ 02-diagram.png → new-article-02-diagram-7c4d8e.png

🖼️  アイキャッチ画像アップロード中...
  ✅ featured.jpg → new-article-featured-9e8f7d.jpg

🔧 最初のH1見出しを削除（タイトル重複回避）
✨ Markdown → HTML 変換完了

✨ 新規記事を作成します
   📌 Status: draft (新規)

📤 WordPress投稿中...
✅ 投稿成功！
🔗 URL: http://example.com/new-article/
📊 ステータス: draft

数秒で完了！

 

Step 4：WordPress管理画面で確認

1. WordPress管理画面を開く
2. 投稿 → 投稿一覧 → 下書き
3. 記事を開く
4. 最終確認
5. 「公開」ボタンをクリック

完璧に投稿されている！

 

既存記事の更新

さらに便利なのが、既存記事の更新です。

Step 1：VSCodeで編集

code posts/existing-article/post.md

内容を編集：

## 追加セクション

新しい情報を追加...

 

Step 2：画像も更新（オプション）

スクリーンショットを撮り直して、同じファイル名で上書き保存：

posts/existing-article/images/01-screenshot.png

ファイル名は変えない！

 

Step 3：スクリプト実行

npm run test-local

出力：

📝 処理開始: existing-article

📸 画像アップロード中...
  🗑️  古い画像を削除: existing-article-01-screenshot-a3f2b1.png
  ✅ 01-screenshot.png → existing-article-01-screenshot-3f8d2a.png
  ♻️  02-diagram.png (変更なし)

📝 既存記事を更新します（ID: 123）
   📌 Status: publish (既存維持)

✅ 更新成功！

自動的に：

  • 既存記事を検索
  • 画像の変更を検知
  • 古い画像を削除
  • 新しい画像をアップロード
  • 変更がない画像は再利用
  • 記事を更新

完璧！

 

複数記事の一括投稿

過去記事の移行など：

npm run publish

すべての記事を自動投稿！

🚀 3 件の記事を処理します

📝 処理開始: article-1
✅ 投稿成功！

📝 処理開始: article-2
✅ 投稿成功！

📝 処理開始: article-3
✅ 投稿成功！

✅ すべての処理が完了しました

 

GitHub Actions連携

さらなる自動化

次のステップ：git push で自動投稿

設定ファイル

.github/workflows/publish.yml

name: Publish to WordPress

on:
  push:
    branches: [main]
    paths: ['posts/**']

jobs:
  publish:
    runs-on: ubuntu-latest
    
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
      
      - name: Install dependencies
        run: npm install
      
      - name: Publish to WordPress
        env:
          WP_URL: ${{ secrets.WP_URL }}
          WP_USER: ${{ secrets.WP_USER }}
          WP_APP_PASSWORD: ${{ secrets.WP_APP_PASSWORD }}
        run: npm run publish

GitHub Secrets設定

GitHub → Settings → Secrets and variables → Actions
→ New repository secret

WP_URL: https://example.com
WP_USER: username
WP_APP_PASSWORD: xxxx xxxx xxxx xxxx

運用フロー

1. VSCodeで記事作成
   posts/new-article/post.md
   
2. Git commit
   git add .
   git commit -m "記事追加：新しい記事"
   
3. Git push
   git push origin main
   
4. GitHub Actions自動実行
   → WordPressに自動投稿
   
5. メール通知
   → 投稿完了のお知らせ

完全自動化！🎉

 

効果測定

定量的な改善

執筆時間の短縮：

従来の方法:
  記事作成: 2時間
  画像管理: 30分
  投稿作業: 10分
  ──────────
  合計: 2時間40分

新しい方法:
  記事作成: 2時間
  画像管理: 0分（自動）
  投稿作業: 30秒
  ──────────
  合計: 2時間30秒

短縮: 約40分

更新作業の効率化：

従来の方法:
  WordPress管理画面を開く
  → 記事を探す
  → 編集
  → 画像を差し替え
  → 保存
  合計: 約10分

新しい方法:
  VSCodeで編集
  → npm run publish
  合計: 約30秒

短縮: 約9分30秒

年間の効果：

週1回の記事投稿 × 52週 = 52記事/年

短縮時間:
  投稿: 40分 × 52回 = 2,080分 (約35時間)
  更新: 9.5分 × 52回 = 494分 (約8時間)
  ──────────────────
  合計: 約43時間/年

浮いた時間で約21記事追加可能！

 

定性的な改善

1. ストレスの軽減

  • ブラウザクラッシュの不安がない
  • 画像管理の煩わしさがない
  • 執筆に集中できる

2. モチベーションの向上

  • 書きやすいから、書きたくなる
  • ワンコマンドで投稿できる満足感
  • Git管理による安心感

3. 記事の品質向上

  • プレビューで確認しやすい
  • 過去のバージョンと比較できる
  • 落ち着いて推敲できる

4. 継続しやすい

  • オフラインでも書ける
  • スキマ時間を活用
  • 無理なく続けられる

 

Tips & Best Practices

1. フォルダ構成の工夫

推奨構成：

posts/
├── 2025/
│   ├── 01-january/
│   │   ├── article-1/
│   │   └── article-2/
│   └── 02-february/
│       └── article-3/
└── 2026/
    └── 01-january/
        └── article-4/

メリット：

  • 記事が探しやすい
  • 管理しやすい
  • アーカイブしやすい

 

2. テンプレートの活用

記事テンプレート：

cp templates/post-template.md posts/new-article/post.md

テンプレート内容：

---
title: "【カテゴリ名】記事タイトル"
slug: article-name
category: Development
tags: [タグ1, タグ2]
featured_image: featured.jpg
mode: html
status: draft
date: 2026-01-11
---

## はじめに

この記事では...

### 対象読者

- ○○な方
- ○○を始めたい方

## 本文

詳しい説明...

## まとめ

この記事では...

効率アップ！

 

3. 画像の命名規則

推奨：

01-descriptive-name.png
02-another-image.png
03-final-screenshot.png

メリット：

  • 順番が分かる
  • 内容が分かる
  • 管理しやすい

 

4. プレビューの活用

VSCodeの拡張機能：

  • Markdown All in One

    • 便利なショートカット
    • Table of Contents自動生成

  • Markdown Preview Enhanced

    • リッチなプレビュー
    • PDF出力

Ctrl+Shift+V で即座にプレビュー！

 

5. スニペットの活用

VSCodeスニペット：

{
  "Code Block": {
    "prefix": "code",
    "body": [
      "```${1:bash}",
      "$0",
      "```"
    ]
  },
  "Image": {
    "prefix": "img",
    "body": [
      "![${1:説明}](images/${2:filename}.png)"
    ]
  }
}

使い方：

code → Tab → コードブロック完成
img → Tab → 画像リンク完成

 

トラブルシューティング

よくある問題と解決策

問題1：画像が表示されない

原因：

  • 画像パスが間違っている

確認：

post.md: ![説明](images/screenshot.png)
実際のファイル: posts/article/images/screenshot.png

解決：

  • パスを修正
  • ファイル名を確認

 

問題2：既存記事が見つからない

原因：

  • スラッグが違っている

確認：

post.md: slug: article-name
WordPress: 既存記事のスラッグ？

解決：

  • スラッグを一致させる
  • WordPress管理画面で確認

 

問題3：認証エラー

原因：

  • Application Passwordが間違っている

解決：

1. WordPress管理画面
   → ユーザー → プロフィール
   → アプリケーションパスワード
   
2. 新しいパスワードを生成

3. .env.local を更新
   WP_APP_PASSWORD=xxxx xxxx xxxx xxxx

 

まとめ

改善のポイント

1. 執筆環境を整える

  • 慣れ親しんだエディタ
  • Markdown記法
  • リアルタイムプレビュー

2. 自動化する

  • 画像アップロード
  • パス置換
  • 既存記事の更新

3. バージョン管理

  • Git管理
  • 履歴が残る
  • 安心感

4. 継続的な改善

  • GitHub Actions連携
  • さらなる自動化
  • 効率化

Before → After

Before（従来の方法）：

WordPress Gutenbergで執筆
  ↓ ブラウザに依存
  ↓ バージョン管理なし
  ↓ 画像管理が煩雑
  ↓ ストレス

After（新しい方法）：

VSCodeで執筆
  ↓ Markdown記法
  ↓ Git管理
  ↓ 画像自動管理
  ↓ npm run publish
  ↓ 快適！

得られたもの

時間：

  • 年間約43時間の短縮
  • 浮いた時間で約21記事追加可能

快適さ：

  • ストレスフリーな執筆環境
  • 執筆に集中できる
  • 書くことが楽しくなる

継続性：

  • モチベーション維持
  • 無理なく続けられる
  • ブログが続く

品質：

  • 落ち着いて推敲できる
  • バージョン管理で安心
  • 記事の品質が向上

 

おわりに

ブログを続けるために最も重要なのは、書きやすい環境です。

環境が整えば、自然と記事を書きたくなります。

私の場合、執筆環境を改善したことで：

  • 記事を書くことが楽しくなった
  • 更新頻度が上がった
  • 記事の品質が向上した

そして何より、執筆そのものに集中できるようになりました。

もしあなたがWordPressでブログを書いているなら、ぜひこの方法を試してみてください。

きっと、ブログを書くことがもっと楽しくなるはずです。

Happy Blogging! 🚀

参考リンク

関連記事

  • VSCodeからWordPressへ！Markdown記事を自動投稿するシステムを作った話

    • システムの全体像と開発の経緯

  • 【試行錯誤の記録】WordPress画像管理を最適化！ハッシュベースの賢い仕組み

    • 画像管理の技術的な詳細

最終更新： 2026-01-11

スポンサーリンク

コメント