Elementorによるホームページの編集：モジュール（テキスト、画像、ボタンなど）の追加

基本的なモジュールの追加を学ぶことは、Elementorでページをデザインするためのコアスキルです。この章では、テキスト、画像、ボタン、その他の一般的な要素を手作業で追加し、スタイルを調整してホームページに最初の形を与える方法を紹介します。

準備：Elementorの編集モードに入る

1. WordPressのバックエンドにログインし、"ページ"→"ホーム"（または編集したいページ）を探し、"編集 "をクリックします。
2. ページ上部の "Elementorで編集 "ボタン（青いElementorアイコン）をクリックし、ビジュアル編集インターフェースに入ります。

入ってみると、インターフェイスは3つのセクションに分かれている：

• 左：モジュールパネル(追加可能なすべての要素を含む）
• 中央：編集エリア(ページ効果のリアルタイム表示）
• 右：スタイルパネル(詳細なスタイルは、要素が選択されているときに調整できます）

ステップ1："Title "モジュール（テキストタイトル）の追加

見出しはページの「骨組み」であり、訪問者をコンテンツの階層に誘導するために使用されます。

1. ヘッダーモジュールを探す左のモジュールパネルで、"Basic "カテゴリーの下にある "Title "モジュール（アイコンは "T"）を見つける。
2. ドラッグ＆ドロップでページに追加Title'モジュールを長押しし、中央の編集エリアの'+ Drag element here'位置までドラッグし、マウスを離します。この時点で、ページはデフォルトのタイトル「This is the title」で表示されます。
3. タイトルの内容を変更する追加したタイトルモジュールを選択すると、右側に編集パネルがポップアップ表示されます：
   • コンテンツ」→「タイトルテキスト」で、デフォルトのテキストを削除し、タイトルを入力する（例：「個人ブログへようこそ」）。
   • Header Level "でレベルを選択する（H1は最も大きく、大見出しに適している。H2は2番目に大きく、小見出しに適しており、コンテンツレベルに応じて選択される）。
4. タイトルスタイルの調整右パネルの「スタイル」タブをクリックしてカスタマイズする：
   • カリグラフィックフォント」ドロップダウンボックスから、お好きなフォント（例：「Microsoft Black」「Arial」）を選択してください。
   • マグニチュードフォントサイズ」スライダーをドラッグするか、直接値を入力してください。
   • カラー: "Text Colour "ボックスをクリックして、タイトルの色（例：黒、紺）を選択します。
   • 正しい順序で並ぶ文字揃え」ボタンをクリックして、タイトルを左、中央、右のいずれかに設定します（ホームページのメインタイトルは中央揃えを推奨）。

ステップ2：「パラグラフ」モジュール（本文）を追加する

段落は、あらすじや説明など、詳細を示すために使われる。

1. 段落モジュールの追加左側の "Basic "カテゴリーでParagraphモジュール（アイコンは段落記号）を見つけ、Titleモジュールの下にドラッグ＆ドロップします。
2. 段落の内容を修正する段落モジュールを選択し、内容を入力する（例：「ここで私は私の人生の教訓と勉強ノートを共有します。）共有することを歓迎します！"。
3. 段落スタイルの最適化スタイル」タブに切り替える：
   • フォントサイズ読みやすくするため）16～18pxに設定することをお勧めします。
   • 御身長1.5～1.8倍に調整（文字間隔をより快適に）。
   • カラータイトルと区別できる色を選んでください（例：背景色に近すぎないように濃いグレー）。

ステップ3："Picture "モジュールを追加する（画像を挿入する）

画像はページに命を吹き込みますので、わかりやすく、関連性のある画像（個人的な写真、商品画像、風景など）を選ぶことをお勧めします。

1. 画像のアップロードまたは選択左側の "Basic "カテゴリーから "Pictures "モジュールを探し、段落の一番下までドラッグする。Picture」モジュールを選択し、右側の「Content」→「Picture」にある「Select Picture」をクリックする：
   • 写真がすでにパソコンにある場合は、「ファイルをアップロード」をクリック→写真を選択→「選択」をクリックします。
   • 以前にアップロードしたことがある場合は、メディアライブラリ内の既存の画像を直接選択できます。
2. 画像表示の調整スタイル」タブに切り替える：
   • サイズ：在「宽度」中设置图片占页面的比例（如 100% 表示全屏宽度，80% 表示窄一点）。
   • ラウンドコーナーボーダー半径スライダーをドラッグして画像の角を丸くします（値が大きいほど角の丸みが強調されます）。
   • fig.誰かにつきまとうトラウマ体験ボックスシャドウ "をオンにすると、写真にわずかな影をつけることができます。
3. 画像の説明を追加する（オプション）コンテンツ」→「代替テキスト」に画像の説明文（例：「私の旅行写真」）を入力すると、検索エンジンが画像の内容を理解しやすくなり、SEOが向上します。

ステップ4："Button "モジュールの追加（ガイド付きクリック）

ボタンは、「もっと見る」、「連絡する」、「今すぐ購入する」など、訪問者が行動を起こすように誘導するためによく使われます。

1. ボタンモジュールの追加左側の "Basic "カテゴリーから "Buttons "モジュールを見つけ、画像の下にドラッグ＆ドロップする。
2. ボタンの内容とリンクの設定コンテンツ」の右側にあるボタンモジュールをチェックしてください：
   • コピーボタンのテキストを入力します（例："View my posts"）。
   • リンク"Dynamic "の横の入力ボックスをクリックし、リンクアドレス（例：あなたのブログロールページアドレス、または外部リンク）を入力します。
     • ステーション内のページにリンクしている場合は、入力ボックスの右側にある「ページを選択」アイコンをクリックして、ターゲットページを直接選択することができます。
3. ボタンスタイルのデザインStyle'タブに切り替えて、人目を引くボタンを作りましょう：
   • カラーテキストの色」には白を、「背景の色」には明るい色（ページのメインカラーと調和するように青やオレンジなど）を選んでください。
   • サイズボタンをクリックしやすくするために、"ボタンサイズ "に "中 "または "大 "を選択します。
   • ジオメトリーボーダー半径 "を5-10pxに設定する（角は少し丸くした方が美観上好ましい）。
   • ** hover 效果 **：点击「hover」选项卡，设置鼠标悬停时的颜色（如颜色加深），提升交互感。

ステップ5：モジュールの間隔を調整する（よりきれいなページのため）

複数のモジュールを追加した後、モジュールの間隔が近すぎたり遠すぎたりして問題が発生する可能性があり、レイアウトを調整する必要がある：

1. 厳選モジュールモジュールの端をクリックします（青い枠が表示されます）。
2. 外側の余白を調整する: 右側のパネル「詳細設定」→「マージン」で、モジュールと上下の要素との間隔を設定します（例：「トップマージン」を30pxに設定し、上のモジュールとの間隔を広げます）。
3. ラインアップを押し続ける。 Ctrl キー（または Command キー) 複数のモジュールを同時に選択し、上部ツールバーの "整列 "ボタン（"中央揃え "など）をクリックすると、要素がよりきれいに整列されます。

ステップ 6: 保存とプレビュー

1. 変更を保存するページの左下にある "更新 "ボタンをクリックしてください。
2. プレビュー効果左上の "プレビュー "ボタンをクリックし、"デスクトッププレビュー"、"タブレットプレビュー"、"携帯電話プレビュー "を選択し、異なるデバイスでの表示効果を確認してください（携帯電話では、テキストが重なっていないか、画像が歪んでいないかを確認してください）。

初心者のためのヒント

• モジュールは繰り返し追加することができます：複数の段落や画像が必要な場合は、直接ドラッグして対応するモジュールを数回ドロップすることができます。
• モジュールの削除：モジュールを選択した後、キーパッド Delete ボタンをクリックするか、モジュール上部の「ゴミ箱」アイコンをクリックしてください。
• モジュールのコピー: モジュールを選択した後、"コピー "アイコンをクリックすると、同じスタイルのエレメントを素早くコピーすることができます（内容を変更するだけです）。

以上の手順で、Elementorのコアモジュールの追加スキルはマスターしました。次は、「icon」、「divider」、「list」などのモジュールを追加して、よりリッチなホームページを作ってみてください！