loading中...

個人事業主に特化した無料WordPressテーマ「LiteWord」

カスタマイズ・子テーマ・カスタムCSS

最終更新: 2026-03-15

カスタマイズ・子テーマ・カスタムCSS

> このページのURL: https://lite-word.com/manual/customization/

LiteWordテーマにCSS・JavaScript・トラッキングコードなどを追加する方法と、子テーマの使い方を解説する。

設定手順

1. CSSを追加する方法

CSSを追加するには2つの方法がある。

方法A: カスタマイザーの「追加CSS」

  1. 外観 → カスタマイズ を開く
  2. 左メニューの一番下にある 「追加CSS」 をクリック
  3. CSSコードを入力する
  4. プレビューで確認し、「公開」 で保存する

方法B: ページ編集画面の「カスタムコード」

  1. 固定ページまたは投稿の編集画面を開く
  2. ページ設定のサイドバーにある 「カスタムコード」 セクションを開く
  3. CSSコードを入力する
  4. 「更新」 で保存する

使い分け:

  • サイト全体に適用するCSS → 方法A（カスタマイザーの追加CSS）
  • 特定のページだけに適用するCSS → 方法B（ページ編集画面のカスタムコード）

2. JavaScriptを追加する方法

JavaScriptの追加は、カスタマイザーの「コードの追記」パネルから行う。

  1. 外観 → カスタマイズ を開く
  2. 「コードの追記」 パネルを開く
  3. 適切なセクションにJavaScriptコードを入力する（セクションの詳細は後述の「head内・body内にコードを追加」を参照）
  4. 「公開」 で保存する

→ カスタマイザーで開く

3. 子テーマについて

LiteWordには LiteWord-Child（子テーマ） が同梱されている。テーマのカスタマイズを行う場合は子テーマの利用を推奨する。

子テーマを使うメリット:

  • 親テーマをアップデートしても、子テーマに追加したカスタマイズは消えない
  • functions.php や style.css を安全に上書き・追加できる
  • 問題が起きた場合、子テーマを無効にするだけで元に戻せる

子テーマの有効化手順:

  1. 外観 → テーマ を開く
  2. 「LiteWord-Child」 が表示されていることを確認する
  3. 表示されていない場合は、LiteWordテーマフォルダ内の liteword-child フォルダをZIP化してアップロードする
  4. 「有効化」 をクリック

子テーマで編集できるファイル:

  • style.css — 追加のCSS
  • functions.php — 追加のPHP関数
  • その他、親テーマのテンプレートファイルを子テーマにコピーして上書きも可能

4. head内・body内にコードを追加する

Google Tag Manager、Meta Pixel、Google Analytics、その他のトラッキングコードやカスタムスクリプトを追加する方法。

カスタマイザーで開く: /wp-admin/customize.php?autofocus[panel]=head_set

  1. 外観 → カスタマイズ を開く
  2. 「コードの追記」 パネルを開く
  3. 追加したい場所に応じて、以下のセクションにコードを貼り付ける
  4. 「公開」 で保存する

セクション一覧:

セクション セクションID 用途・説明
head内（前半） head_set_in_before_sec `` タグ直後に出力される。メタタグ、プリロード等
head内（後半） head_set_in_after_sec `` タグ直前に出力される。CSS、Google Tag Managerのhead用コード等
body内（前半） head_set_body_before_sec `` タグ直後に出力される。Google Tag Managerのbody用コード（noscript）等
body内（後半） head_set_body_after_sec `` タグ直前に出力される。トラッキングスクリプト等

よくある設置例:

  • Google Tag Manager:
    • head用コード → head内（後半）head_set_in_after_sec
    • body用コード（noscript） → body内（前半）head_set_body_before_sec
  • Meta Pixel（Facebook ピクセル）:
    • ピクセルコード → head内（後半）head_set_in_after_sec
  • Google Analytics（gtag.js）:
    • トラッキングコード → head内（後半）head_set_in_after_sec

よくある質問

Q: カスタマイザーの「追加CSS」と子テーマの style.css のどちらを使うべきですか？

A: 少量のCSS修正であればカスタマイザーの「追加CSS」が手軽。大量のCSSや複雑なカスタマイズの場合は子テーマの style.css を使う方が管理しやすい。

Q: 子テーマを使っていない場合、アップデートでCSSは消えますか？

A: カスタマイザーの「追加CSS」に入力したCSSはデータベースに保存されるため、テーマのアップデートでは消えない。ただし、親テーマのファイルを直接編集した場合はアップデートで上書きされる。

Q: Google Tag ManagerとGoogle Analyticsの両方を入れる必要がありますか？

A: Google Tag Manager経由でGoogle Analyticsを設定している場合は、GTMのコードだけ入れれば十分。両方のコードを直接入れると二重計測になる可能性がある。

Q: コードを追加したらサイトが真っ白になりました

A: JavaScriptやPHPのコードにエラーがある可能性が高い。FTPで子テーマの functions.php を修正するか、カスタマイザーの該当セクションのコードを削除する。カスタマイザーの追加CSSやコード追記セクションの場合は、/wp-admin/customize.php に直接アクセスして修正する。

最終更新: 2026-03-15