コードの追記（head・body）

最終更新: 2026-03-15

> 設定場所: 外観 → カスタマイズ → 「コードの追記（head内など）」
> カスタマイザーで開く: コード追記パネルを開く
> このページのURL: https://lite-word.com/manual/code-injection/

サイト全体の タグ内や タグ内にカスタムコードを挿入できる。Google Tag Manager、Facebook Pixel、Google Analyticsなどの計測タグや、カスタムCSS・JavaScriptの追加に使用する。

設定手順

セクション	設定ID	挿入位置	主な用途
head内（前半部分）	`head_set_in_before_sec`	`` タグ内の前半	Google Tag Manager（headコード）、metaタグ
head内（後半部分）	`head_set_in_after_sec`	`` タグ内の後半	追加CSS、Webフォント読み込み
body内（前半部分）	`head_set_body_before_sec`	`` タグ直後	GTM noscriptコード、トラッキングピクセル
body内（後半部分）	`head_set_body_after_sec`	`` タグ直前	カスタムJavaScript、チャットウィジェット

各セクションにはテキストエリアが1つずつあり、自由にコードを入力できる。

カスタマイザーのコード追記はサイト全体に適用されるが、ページ単位で個別にコードを追加することも可能。

メタボックス設定	設定ID	挿入位置
カスタムhead	`seo_custom_head`	そのページの `` 内
カスタムfooter	`seo_custom_footer`	そのページの `` 直前

> 補足: ページ単位のコードは、サイト全体のコード追記に追加される形で出力される（上書きではない）。


  /* 例: 見出しの色を変更 */
  h2 { color: #333; }

> ヒント: 簡単なCSSなら「外観 → カスタマイズ → 追加CSS」でも追加できる。大量のCSSや条件付きのCSSはコード追記が適している。

LiteWordにはSEO設定にGoogle Analytics連携機能があるが、手動で設置する場合は head内（前半部分） にGA4のgtag.jsコードを貼り付ける。

Q. コードを追加したのにサイトに反映されない
A. カスタマイザーで「公開」を押して保存しているか確認する。キャッシュプラグインやCDN（Cloudflare等）のキャッシュが残っている場合はキャッシュクリアを試す。

Q. headの前半と後半、どちらに入れればいい？
A. 計測タグ（GTM・Pixelなど）は前半に入れる。できるだけ早く読み込まれることで計測漏れを防げる。CSS・フォントは後半でOK。

Q. コードを入れたらサイトが崩れた
A. 入力したコードに構文エラーがないか確認する。閉じタグの不足やJavaScriptのエラーが原因となることが多い。問題のコードを削除して「公開」すれば元に戻る。

Q. 特定のページだけに計測タグを入れたい
A. ページ編集画面の「SEO設定」メタボックスにある「カスタムhead」「カスタムfooter」を使う。サイト全体ではなく、そのページだけにコードが挿入される。

Q. Google AnalyticsはSEO設定とコード追記、どちらで設定すべき？
A. LiteWordのSEO設定にGA連携機能がある場合はそちらを使う方が簡単。手動でgtag.jsを貼る場合は二重計測にならないよう注意する。

最終更新: 2026-03-15 10:00