2026年5月20日

Elementorの基本的な使い方とページ作成手順

プラグイン関連

はじめに

Elementorは世界で最も使われているWordPressページビルダープラグインです。コーディング不要でプロ品質のページを作れます。無料版と有料版（Pro）の違い・基本操作・パフォーマンスへの影響と対策を解説します。

症状・原因

Elementorでページを作ったが表示が遅い
ヘッダー・フッターをElementorで編集したい（Pro機能）
Elementorのデータが多くてデータベースが肥大化している
テンプレートを別サイトにエクスポートしたい

解決手順

ステップ1：インストールと有効化

# 無料版
wp plugin install elementor --activate

# Elementor Pro（公式サイトからDL後）
wp plugin install /path/to/elementor-pro.zip --activate

ステップ2：グローバル設定を行う（最初に必須）

Elementor → 設定 →「スタイル」タブ
→ デフォルトカラー: ブランドカラーを設定
→ デフォルトフォント: 本文・見出し用フォントを設定
→ コンテンツ幅: 1200px（推奨）
→ 要素の間隔: 10px

グローバルカラーを定義：

Elementor → グローバル設定 → カラー
→ プライマリ: #2271b1
→ セカンダリ: #d63638
→ テキスト: #1d2327
→ アクセント: #00a32a

ステップ3：ページを作成する

固定ページ → 新規追加 →「Elementorで編集」
→ テンプレートを選択（ライブラリから）または白紙から作成
→ セクション追加 → カラム設定 → ウィジェットをドラッグ

主なウィジェット：

見出し: H1〜H6 + SEO考慮したタグ設定
テキストエディター: リッチテキスト
画像: 遅延読み込み・ALT設定
ボタン: CTA（行動喚起）
フォーム（Pro）: お問い合わせフォーム内蔵

ステップ4：テンプレートを保存・エクスポートする

作成したページをテンプレートとして保存：

Elementor編集画面 → 公開ボタン横の矢印 →「テンプレートとして保存」
→ テンプレート名: LP-v1

別サイトへエクスポート：

Elementor → テンプレート → 保存済みテンプレート
→ エクスポート → .json ファイルをダウンロード
→ 移行先サイトで → インポート

ステップ5：データベースの肥大化を解消する

Elementorは改訂履歴をDBに大量保存するため定期的なクリーンアップが必要です：

# Elementorのデータをクリーンアップ
wp elementor flush-css
wp elementor regenerate-files

# 不要な改訂履歴を削除
wp post delete $(wp post list --post_type=revision --format=ids) --force

# Elementorのキャッシュをクリア
wp cache flush

ステップ6：パフォーマンスを最適化する

Elementor → 設定 →「パフォーマンス」タブ
→ CSS 印刷方法: 外部ファイル（推奨）
→ アセットの読み込み: 使用するウィジェットのみ
→ 実験的な機能: 最適化されたアセット読み込み ✓

// functions.php — 使わないElementorウィジェットを無効化
add_action('elementor/widgets/register', function(\Elementor\Widgets_Manager $manager) {
    $manager->unregister('counter');
    $manager->unregister('progress');
    $manager->unregister('testimonial');
}, 15);

注意事項

Elementorはページのレンダリングに多くのCSS/JSを生成します。キャッシュプラグインと組み合わせてパフォーマンスを補ってください
wp-content/uploads/elementor/ フォルダに生成されたCSSファイルのパーミッションが755になっているか確認してください
Elementor Proはサイトライセンス（1サイト・3サイト・無制限）があります

まとめ

Elementorはグローバルカラー・フォント設定を最初に行い、テンプレートライブラリからページを作成するのが効率的です。DBの肥大化対策として wp elementor flush-css && wp post delete $(wp post list --post_type=revision --format=ids) --force を定期実行してください。

Post Views: 4