Go to Qiita Advent Calendar Top
LoginSignup
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?

@yun_98(ゆん)

VS CodeでWordPress（JINテーマ）のHTML編集を快適にする方法

Last updated at Posted at 2025-10-26

🎯 この記事のゴール

JINテーマのカスタムHTMLブロック、使いづらくないですか？

「この閉じタグどこだっけ...」
「スクロールしてたら編集したい場所を見失った...」
「コピペしたら変なところに貼り付いてる...」

そんな悩みを解決します。VS Codeを使えば、HTMLの編集が驚くほど快適になります。

この記事を読めば：

  • JINテーマの小さいエディタから解放される
  • VS Codeで快適にHTMLを編集できる
  • WordPress記事を効率的に作成できる

📋 目次

  1. なぜVS Codeを使うのか
  2. VS Codeのインストールと設定
  3. WordPress記事の編集ワークフロー
  4. おすすめ拡張機能
  5. 実際の作業手順

🤔 なぜVS Codeを使うのか

JINテーマのカスタムHTMLブロックの問題点

まず、現状の課題を整理します。

問題1：エディタが小さすぎる

┌──────────────────┐
│ <div class="...  │ ← 5行程度しか表示されない
│   <div style=... │
│     <a href="... │
│       ...        │
│     </a>         │
└──────────────────┘

長いHTMLを編集する際、全体を把握するのが困難です。

問題2：シンタックスハイライトが無い

  • タグの対応関係がわかりにくい
  • 閉じタグの忘れに気づきにくい
  • インデントが崩れやすい

問題3：コピペ作業が非効率

コピペの度に：

  1. スクロールして該当箇所を探す
  2. コピペ
  3. 元の場所に戻る
  4. 次の箇所を探す...

この繰り返しは時間がかかります。

私も最初はWordPressのエディタで編集していましたが、限界を感じてVS Codeに切り替えました。

VS Codeを使うメリット

✅ 画面が大きい - コード全体を一目で確認できる
✅ シンタックスハイライト - 色分けで視認性が高い
✅ 自動補完 - タグの閉じ忘れを防げる
✅ 検索・置換が強力 - 一括編集が簡単
✅ プレビュー機能 - 見た目を確認しながら編集
✅ バージョン管理 - 過去の状態に戻せる
✅ 複数ファイル管理 - 複数の記事を同時に開ける

使ってみると、作業効率が大幅に向上します。特にHTMLが長くなるほど、その差は歴然です。

💻 VS Codeのインストールと設定

5分程度で完了します。

ステップ1：VS Codeのインストール

  1. 公式サイトにアクセス
    https://code.visualstudio.com/

  2. ダウンロード

    • Windows: Download for Windows をクリック
    • Mac: Download for Mac をクリック

  3. インストール

    • インストーラーを起動
    • 指示に従って進める
    • 完了

ステップ2：日本語化（任意）

英語のままでも使えますが、日本語の方が使いやすいです。

  1. VS Codeを起動
  2. 左側の 拡張機能アイコン をクリック（四角が4つのアイコン）
  3. 検索窓に Japanese Language Pack と入力
  4. インストール をクリック
  5. VS Codeを再起動

ステップ3：基本設定

フォントサイズを大きくする

  1. Ctrl + , (Mac: Cmd + ,) で設定を開く
  2. 検索窓に font size と入力
  3. Editor: Font Size を 14 → 16 に変更

見やすいサイズに調整しましょう。

オートセーブを有効にする

  1. 設定画面で auto save と検索
  2. Files: Auto Save を afterDelay に変更

これで1秒後に自動保存されます。

📝 WordPress記事の編集ワークフロー

実際の使い方を説明します。

方法1：直接コピペ方式（シンプル）

初めての方におすすめの方法です。

ステップ1：VS Codeでファイルを作成

  1. VS Codeを起動
  2. ファイル → 新規ファイル
  3. Ctrl + S (Mac: Cmd + S) で保存
  4. ファイル名：amazon-book.html
  5. 保存場所：デスクトップなど、わかりやすい場所

ステップ2：HTMLを書く

ここでは、Amazon書籍埋め込みのHTML（例）を作成します。

<div
  style="
    border: 2px solid #ff9966;
    border-radius: 12px;
    margin: 30px 0;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(255, 153, 102, 0.2);
    max-width: 100%;
    width: 100%;
  "
>
  <div
    style="
      background: linear-gradient(135deg, #ff9966 0%, #ff8552 100%);
      color: #fff;
      padding: 12px 24px;
      font-weight: bold;
      font-size: 1.1em;
      display: flex;
      align-items: center;
      gap: 10px;
    "
  >
    <span style="font-size: 1.3em; line-height: 1">📚</span>
    <span>おすすめ参考書</span>
  </div>
  <div style="padding: 24px">
    <a
      href="AmazonのURL"
      target="_blank"
      rel="nofollow noopener"
      class="amazon-book-responsive"
      style="
        display: flex;
        flex-direction: row;
        gap: 20px;
        text-decoration: none;
        color: inherit;
        align-items: flex-start;
      "
    >
      <div
        class="amazon-book-image-mobile"
        style="
          flex-shrink: 0;
          width: 160px;
          min-width: 160px;
          max-width: 160px;
          margin: 0;
          padding: 0;
        "
      >
        <img
          src="書籍画像URL"
          alt="書籍タイトル"
          style="
            width: 100%;
            height: auto;
            display: block;
            border-radius: 6px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin: 0;
            padding: 0;
          "
        />
      </div>
      <div style="flex: 1; display: flex; flex-direction: column; min-width: 0">
        <h3
          style="
            font-size: 1.3em;
            margin: 0 0 12px 0;
            padding: 0;
            color: #2c3e50;
            line-height: 1.5;
            font-weight: bold;
            border: none;
            background: none;
          "
        >
          書籍タイトル
        </h3>
        <p
          style="
            color: #666;
            line-height: 1.7;
            margin: 0 0 16px 0;
            padding: 0;
            font-size: 0.95em;
            flex-grow: 1;
          "
        >
          書籍の説明文をここに書きます。
        </p>
        <span
          class="amazon-book-button-mobile"
          style="
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            background: #ff9966;
            color: #fff;
            padding: 12px 28px;
            border-radius: 25px;
            font-weight: bold;
            font-size: 0.95em;
            align-self: flex-start;
            text-decoration: none;
            border: none;
            cursor: pointer;
            width: fit-content;
          "
          >Amazonで見る →</span
        >
      </div>
    </a>
  </div>
</div>

ステップ3：VS Codeで編集

便利なショートカットを活用しましょう。

覚えておくと便利なショートカット：

操作 Windows Mac 説明
保存 Ctrl + S Cmd + S ファイルを保存
全選択 Ctrl + A Cmd + A 全て選択
コピー Ctrl + C Cmd + C コピー
検索 Ctrl + F Cmd + F 検索
置換 Ctrl + H Cmd + Alt + F 一括置換
行の複製 Shift + Alt + ↓ Shift + Option + ↓ 行をコピー
行の削除 Ctrl + Shift + K Cmd + Shift + K 行を削除

実際の編集例（置換機能）：

「書籍タイトル」を実際のタイトルに変更したいとき：

  1. Ctrl + H(Windows) Cmd + Alt + F (macOS)で置換窓を開く
  2. 上の欄に 書籍タイトル と入力
  3. 下の欄に実際のタイトルを入力
  4. 「すべて置換」をクリック

一括で変更できるので、作業が早くなります。

ステップ4：WordPressに貼り付け

編集が終わったら：

  1. VS Codeで Ctrl + A → Ctrl + C （全選択してコピー）
  2. WordPress記事編集画面を開く
  3. カスタムHTMLブロック を追加
  4. Ctrl + V で貼り付け
  5. プレビューで確認
  6. 公開

方法2：プレビュー付き方式（推奨）

HTMLをブラウザでリアルタイムプレビューしながら編集する方法です。

ステップ1：Live Server拡張機能をインストール

コードを保存した瞬間にブラウザが自動更新されます。

  1. VS Codeの左側の 拡張機能アイコン をクリック
  2. 検索窓に Live Server と入力
  3. Ritwick Dey 作の Live Server をインストール

ステップ2：作成しておいたHTMLを挿入して完全なHTMLファイルを作成

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>プレビュー</title>
    <style>
      body {
        font-family: sans-serif;
        padding: 20px;
        background: #f5f5f5;
      }
      .container {
        max-width: 800px;
        margin: 0 auto;
        background: white;
        padding: 40px;
        border-radius: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      Ï
      <h1>プレビュー</h1>

      <!-- ここから下をWordPressにコピペ -->
        <!-- 中身 ここを消して作成したHTMLのコードを入れる-->
      <!-- ここまでをWordPressにコピペ -->
    </div>
  </body>
</html>

ステップ3：Live Serverで起動

  1. HTMLファイルを開く
  2. 右下の Go Live ボタンをクリック
  3. ブラウザが自動で開く
  4. 編集すると自動で反映される

ステップ4：WordPress用の部分だけコピー

コメント <!-- ここから下をWordPressにコピペ --> の間だけをコピーしてWordPressに貼り付けます。

めんどくさい人用（そのままコピペver）

すごく長いので畳んでおきます 
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>プレビュー</title>
    <style>
      body {
        font-family: sans-serif;
        padding: 20px;
        background: #f5f5f5;
      }
      .container {
        max-width: 800px;
        margin: 0 auto;
        background: white;
        padding: 40px;
        border-radius: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      Ï
      <h1>プレビュー</h1>

      <!-- ここから下をWordPressにコピペ -->
      <div
        style="
          border: 2px solid #ff9966;
          border-radius: 12px;
          margin: 30px 0;
          background: #fff;
          overflow: hidden;
          box-shadow: 0 2px 8px rgba(255, 153, 102, 0.2);
          max-width: 100%;
          width: 100%;
        "
      >
        <div
          style="
            background: linear-gradient(135deg, #ff9966 0%, #ff8552 100%);
            color: #fff;
            padding: 12px 24px;
            font-weight: bold;
            font-size: 1.1em;
            display: flex;
            align-items: center;
            gap: 10px;
          "
        >
          <span style="font-size: 1.3em; line-height: 1">📚</span>
          <span>おすすめ参考書</span>
        </div>
        <div style="padding: 24px">
          <a
            href="AmazonのURL"
            target="_blank"
            rel="nofollow noopener"
            class="amazon-book-responsive"
            style="
              display: flex;
              flex-direction: row;
              gap: 20px;
              text-decoration: none;
              color: inherit;
              align-items: flex-start;
            "
          >
            <div
              class="amazon-book-image-mobile"
              style="
                flex-shrink: 0;
                width: 160px;
                min-width: 160px;
                max-width: 160px;
                margin: 0;
                padding: 0;
              "
            >
              <img
                src="https://placehold.co/160x240?text=書籍画像"
                alt="書籍タイトル"
                style="
                  width: 100%;
                  height: auto;
                  display: block;
                  border-radius: 6px;
                  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                  margin: 0;
                  padding: 0;
                "
              />
            </div>
            <div
              style="
                flex: 1;
                display: flex;
                flex-direction: column;
                min-width: 0;
              "
            >
              <h3
                style="
                  font-size: 1.3em;
                  margin: 0 0 12px 0;
                  padding: 0;
                  color: #2c3e50;
                  line-height: 1.5;
                  font-weight: bold;
                  border: none;
                  background: none;
                "
              >
                書籍タイトル
              </h3>
              <p
                style="
                  color: #666;
                  line-height: 1.7;
                  margin: 0 0 16px 0;
                  padding: 0;
                  font-size: 0.95em;
                  flex-grow: 1;
                "
              >
                書籍の説明文をここに書きます。この本は〇〇について詳しく解説しており、初心者から上級者まで幅広くおすすめできる一冊です。
              </p>
              <span
                class="amazon-book-button-mobile"
                style="
                  display: inline-flex;
                  align-items: center;
                  justify-content: center;
                  gap: 6px;
                  background: #ff9966;
                  color: #fff;
                  padding: 12px 28px;
                  border-radius: 25px;
                  font-weight: bold;
                  font-size: 0.95em;
                  align-self: flex-start;
                  text-decoration: none;
                  border: none;
                  cursor: pointer;
                  width: fit-content;
                "
                >Amazonで見る →</span
              >
            </div>
          </a>
        </div>
      </div>
      <!-- ここまでをWordPressにコピペ -->
    </div>
  </body>
</html>

🔧 おすすめ拡張機能

作業効率を上げるための拡張機能を紹介します。

1. Auto Rename Tag

  • 機能: 開始タグを変更すると、終了タグも自動で変更
  • インストール: 拡張機能で Auto Rename Tag を検索
<!-- 変更前 -->
<div>内容</div>

<!-- <div> を <span> に変更すると... -->
<span>内容</span>  ← 自動で変わる

2. Prettier - Code formatter

  • 機能: HTMLを自動整形
  • インストール: 拡張機能で Prettier を検索
  • 使い方: Shift + Alt + F(windows) Shift + Option + F(Mac)で整形
<!-- 整形前 -->
<div><span>テキスト</span><p>段落</p></div>

<!-- 整形後 -->
<div>
  <span>テキスト</span>
  <p>段落</p>
</div>

3. HTML CSS Support

  • 機能: CSSの自動補完
  • インストール: 拡張機能で HTML CSS Support を検索

4. Color Highlight

  • 機能: カラーコードに色を表示
  • インストール: 拡張機能で Color Highlight を検索
background: #FF9966;  ← この文字がオレンジ色で表示される

5. Live Server

  • 機能: リアルタイムプレビュー
  • インストール: 拡張機能で Live Server を検索
  • 使い方: HTMLファイルを開いて Go Live をクリック

🎬 実際の作業手順(挿絵は例です)

具体的な流れを図解します。

シーン1：VS CodeでHTMLを編集

┌─ VS Code ────────────────────────────────────┐
│ amazon-book.html                             │
├──────────────────────────────────────────────┤
│ 1  <div style="border: 2px solid #FF9966;... │
│ 2    <div style="background: linear-grad...  │
│ 3      <span>📚</span>                       │
│ 4      <span>おすすめ参考書</span>            │
│ 5    </div>                                  │
│ 6    <div style="padding: 24px;">            │
│                                              │
│ 全体が見える！シンタックスハイライトあり！   │
└──────────────────────────────────────────────┘

操作：

  1. Ctrl + H(Windows) Cmd + Alt + F (macOS)で置換窓を開く
  2. 一括置換で編集（自分で直してもOK）
  3. Ctrl + S(Windows) Cmd + S (macOS)で保存

シーン2：プレビューで確認

┌─ VS Code ────────┐  ┌─ ブラウザ ──────────┐
│ amazon-book.html │  │ 📚 おすすめ参考書    │
│                  │  │ ┌────┐             │
│ <div style="...  │  │ │画像│ タイトル     │
│   <span>📚</span>│  │ │    │ 説明文       │
│                  │  │ └────┘ [ボタン]     │
│ 編集すると →     │  │ ← 自動で反映       │
└──────────────────┘  └─────────────────────┘

シーン3：WordPressに貼り付け

┌─ VS Code ────────────────────┐
│ Ctrl + A (全選択)             │
│ Ctrl + C (コピー)             │
└──────────────────────────────┘
        ↓
┌─ WordPress ──────────────────┐
│ カスタムHTMLブロック          │
│ Ctrl + V (貼り付け)           │
│                              │
│ プレビュー確認 → 公開         │
└──────────────────────────────┘

💡 Tips & Tricks

効率を上げるテクニックを紹介します。

Tip 1：スニペット登録

よく使うHTMLはスニペットに登録すると便利です。

  1. ファイル → ユーザー設定 → ユーザースニペット
  2. html.json を選択
  3. 以下を追加：
{
  "Amazon Book Box": {
    "prefix": "amazonbook",
    "body": [
      "<div style=\"border: 2px solid #FF9966; ...\">",
      "  ...",
      "</div>"
    ],
    "description": "Amazon書籍埋め込みボックス"
  }
}

使い方：HTMLファイルで amazonbook と入力して Tab キー

Tip 2：複数カーソル

同じ文字列を一気に編集できます。

  1. 編集したい単語を選択
  2. Ctrl + D を押すと、次の同じ単語も選択される
  3. 何度も押すと、すべての同じ単語が選択される
  4. そのまま入力すると一気に変更

Tip 3：Emmet記法

HTMLを高速で書けます。

div.amazon-book-box>div.amazon-book-header

と入力して Tab キーを押すと...

<div class="amazon-book-box">
  <div class="amazon-book-header"></div>
</div>

が自動生成されます。

🎯 まとめ

VS Codeを使うメリット

✅ JINテーマの小さいエディタから解放される
✅ 大画面で全体を見渡せる
✅ シンタックスハイライトで見やすい
✅ 検索・置換が強力
✅ プレビューで確認しながら編集
✅ 複数の記事を同時に管理できる

推奨ワークフロー

  1. VS Codeで編集

    • HTMLファイルで編集
    • Live Serverでプレビュー確認

  2. WordPressに公開

    • HTML部分をコピペ
    • プレビュー確認して公開

最初にやること

  • VS Codeをインストール
  • 日本語化（任意）
  • Live Serverをインストール
  • Auto Rename Tagをインストール
  • Prettierをインストール

これで快適な執筆環境が整います。

最後に

最初は「エディタを変えるだけ？」と思うかもしれませんが、実際に使ってみると違いがわかります。

特に、HTMLが長くなればなるほど、その差は大きくなります。

WordPressのエディタで苦労している時間が大幅に減るはずです。

ぜひ一度試してみてください。

この記事が役に立ったら、シェアしていただけると嬉しいです。

質問があればコメント欄でどうぞ。

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?