① 「ベーシックギャラリー」を追加する

1. 編集したいページを「Elementorで編集」で開きます。
2. 左上の「＋」（要素を追加）を押し、「ベーシックギャラリー」で検索します。
3. 該当するウィジェットをページの入れたい場所へドラッグします。配置済みなら、その部品をクリックします。

② 写真と列数を決める

134

1. 「画像の追加」を押し、掲載したい画像を複数選びます。
2. 選択した画像の順序を確認して挿入します。
3. 「カラム」で横に並べる列数を選びます。「画像の解像度」も表示サイズに合わせます。
4. 拡大表示したい場合は「リンク」を「メディアファイル」にし、「Lightbox」を確認します。

ここを確認：意図した順番と列数で写真が並んでいる。

③ 見た目と表示を確認する

123

1. 「スタイル」→「画像」の「すき間」で写真同士の余白を整えます。
2. 必要に応じて枠線や角の丸みを付けます。
3. 「キャプション」を使うときは、メディアに説明を登録し、読みやすい文字色にします。

④ スマホで確認して保存する

上部のスマートフォンのアイコンで表示を確認します。「公開」または「更新」で保存し、プレビューや実際のページで動作を確認します。作成途中の場合は下書き保存を使います。

スマホ表示の調整方法 ／ 保存・公開の手順

① 「テキストパス」を追加する

1. 編集したいページを「Elementorで編集」で開きます。
2. 左上の「＋」（要素を追加）を押し、「テキストパス」で検索します。
3. 該当するウィジェットをページの入れたい場所へドラッグします。配置済みなら、その部品をクリックします。

② 文字と曲線を選ぶ

1234

1. 「テキスト」に表示したい短い言葉を入力します。
2. 「パスタイプ」から波・アーク・円などを選びます。
3. 必要なら「リンク」に移動先を入力します。
4. 「パスを表示」で、文字が沿う線を見せるか決めます。

ここを確認：文字の末尾が切れず、全部読める。

③ 見た目と表示を確認する

123

1. 「スタイル」の「サイズ」で全体の大きさ、「回転」で向きを調整します。
2. 「タイポグラフィ」と「文字間隔」で読みやすく整えます。
3. 「開始点 (%)」で曲線上の文字の始まる位置を調整します。

④ スマホで確認して保存する

上部のスマートフォンのアイコンで表示を確認します。「公開」または「更新」で保存し、プレビューや実際のページで動作を確認します。作成途中の場合は下書き保存を使います。

スマホ表示の調整方法 ／ 保存・公開の手順

① 「続きを読む」を追加する

1. 編集したいページを「Elementorで編集」で開きます。
2. 左上の「＋」（要素を追加）を押し、「続きを読む」で検索します。
3. 該当するウィジェットをページの入れたい場所へドラッグします。配置済みなら、その部品をクリックします。

② 本文を区切る位置を決める

3

1. 対象の記事をElementorで開きます。
2. 一覧で見せたい導入文と、続きの本文の間へ「続きを読む」を置きます。
3. 左側の「続きを読む」欄に、必要に応じてリンクの表示文言を入力します。
4. 保存後、個別の記事だけでなく投稿一覧ページを開いて表示を確認します。

ここを確認：対応する投稿一覧で、意図した位置までの本文が出る。

③ 見た目と表示を確認する

1. このウィジェットには通常の「スタイル」タブがありません。
2. 一覧での見た目や表示可否は、テーマや一覧側の本文出力方法に依存します。
3. 任意のページへ移動するボタンを作りたい場合は「ボタン」を使います。

④ スマホで確認して保存する

上部のスマートフォンのアイコンで表示を確認します。「公開」または「更新」で保存し、プレビューや実際のページで動作を確認します。作成途中の場合は下書き保存を使います。

スマホ表示の調整方法 ／ 保存・公開の手順

① 「HTML」を追加する

1. 編集したいページを「Elementorで編集」で開きます。
2. 左上の「＋」（要素を追加）を押し、「HTML」で検索します。
3. 該当するウィジェットをページの入れたい場所へドラッグします。配置済みなら、その部品をクリックします。

② HTMLコードを入力する

1

1. 「HTML コード」の入力欄をクリックします。
2. 下の入力例など、表示したいHTMLを貼り付けます。
3. 右側の表示を確認し、タグの閉じ忘れや不要な文字がないか見直します。
4. 外部サービスの埋め込みは、提供元の案内に従ってコードを貼り付け、プレビューでも表示を確認します。

ここを確認：HTMLのタグではなく、意図した文章や部品が表示される。

③ 見た目と表示を確認する

1. このウィジェットには通常の「スタイル」タブがありません。
2. 前後の余白は「高度な設定」や親コンテナで調整します。
3. 文字やリンクだけなら、テキストエディターやボタンの方が編集しやすい場合があります。

④ スマホで確認して保存する

上部のスマートフォンのアイコンで表示を確認します。「公開」または「更新」で保存し、プレビューや実際のページで動作を確認します。作成途中の場合は下書き保存を使います。

スマホ表示の調整方法 ／ 保存・公開の手順

① 「画像カルーセル」を追加する

1. 編集したいページを「Elementorで編集」で開きます。
2. 左上の「＋」（要素を追加）を押し、「画像カルーセル」で検索します。
3. 該当するウィジェットをページの入れたい場所へドラッグします。配置済みなら、その部品をクリックします。

② 写真と表示枚数を設定する

1234

1. 「画像の追加」を押し、掲載する画像を複数選びます。
2. 画像の順番を確認して挿入します。写真が小さくぼやける場合は「画像の解像度」を上げます。
3. 「表示するスライド」で一度に見せる枚数、「スクロールするスライド」で1回に送る枚数を選びます。
4. 「ナビゲーション」を「矢印とドット」などに設定します。

ここを確認：矢印やスワイプで写真が切り替わる。

③ 自動再生の動きを決める

123

1. 「追加オプション」を開き、自動再生を使うか選びます。
2. 「自動再生速度」は次の画像までの待ち時間です。5000msは5秒です。
3. 「アニメーション速度」は切り替えの速さです。必要に応じてホバーや操作で一時停止を使います。

④ スマホで確認して保存する

上部のスマートフォンのアイコンで表示を確認します。「公開」または「更新」で保存し、プレビューや実際のページで動作を確認します。作成途中の場合は下書き保存を使います。

スマホ表示の調整方法 ／ 保存・公開の手順

① 「画像ボックス」を追加する

1. 編集したいページを「Elementorで編集」で開きます。
2. 左上の「＋」（要素を追加）を押し、「画像ボックス」で検索します。
3. 該当するウィジェットをページの入れたい場所へドラッグします。配置済みなら、その部品をクリックします。

② 写真・タイトル・説明を入れる

1234

1. 「画像の選択」を押し、使いたい写真を選択します。
2. 「タイトル」にサービス名、「説明」に短い紹介文を入力します。
3. 詳しいページへ移動させる場合は「リンク」にURLを入力します。
4. 「タイトル HTML タグ」はページの見出し構成に合わせます。文字を大きくするためだけにH1へ変えないようにします。

ここを確認：写真とタイトルが紹介内容に合っている。

③ 見た目と表示を確認する

123

1. 「スタイル」→「ボックス」で画像の位置と配置を選びます。
2. 「画像間隔」と「コンテンツスペース」で余白を整えます。
3. 「画像」「コンテンツ」を開き、画像の大きさや文字色を調整します。

④ スマホで確認して保存する

上部のスマートフォンのアイコンで表示を確認します。「公開」または「更新」で保存し、プレビューや実際のページで動作を確認します。作成途中の場合は下書き保存を使います。

スマホ表示の調整方法 ／ 保存・公開の手順

① 「動画」を選ぶ

1. 編集したいページを「Elementorで編集」で開きます。
2. すでに配置済みなら、右側のページで変更したい部品をクリックします。
3. 新しく追加する場合は、左上の「＋」を押し、検索欄に「動画」と入力します。
4. 見つかった部品を、右側の入れたい場所までドラッグします。マウスを押したまま移動し、置きたい場所で離します。

開き方から確認したい場合：ページを作成・編集する

② 動画のURLを貼り付ける

123

1. 「ソース」で、動画を置いているサービスを選びます。YouTubeなら「YouTube」です。
2. YouTubeで紹介したい動画を開き、「共有」からURLをコピーします。
3. 「リンク」のサンプルURLを消し、コピーしたURLを貼り付けます。
4. 「開始時間」「終了時間」は、動画全体を見せる場合は空欄のままにします。
5. 「自動再生」は最初は「いいえ」、「プレイヤーコントロール」は「表示」にすると、見る人が自分で再生しやすくなります。

画面のURLはElementorの初期サンプルです。必ずご自身が掲載したい動画のURLに置き換えます。URLが長くて欄から見切れていても、入力内容が省略されたとは限りません。

成功の目印：右側が指定した動画のサムネイルやプレイヤーに変わります。

③ 再生のしかたを確認する

1. 必要があれば開始時間を秒数で指定します。例：30なら30秒の位置から始まります。
2. 「ミュート」は音を出さない設定、「ループ」は繰り返し再生する設定です。通常の説明動画なら、最初はオフのままで構いません。
3. 「スタイル」で縦横比を確認します。横長動画なら16:9がよく使われます。
4. プレビューで再生ボタンを押し、映像と音声を確認します。

1

④ スマホで確認して保存する

上部のスマートフォン形のアイコンを押し、表示を確認します。問題がなければ右上の「公開」または「更新」を押し、保存後に実際のページを開き直します。

• 目的の動画が再生される。
• スマホでもプレイヤーが画面内に収まる。
• 音声の有無や再生ボタンが意図した状態になっている。

スマホ表示の詳しい調整方法 ／ 下書き保存・公開・元に戻す手順

① 「画像」を選ぶ

1. 編集したいページを「Elementorで編集」で開きます。
2. すでに配置済みなら、右側のページで変更したい部品をクリックします。
3. 新しく追加する場合は、左上の「＋」を押し、検索欄に「画像」と入力します。
4. 見つかった部品を、右側の入れたい場所までドラッグします。マウスを押したまま移動し、置きたい場所で離します。

開き方から確認したい場合：ページを作成・編集する

② 使いたい写真を選ぶ

123

1. 「画像の選択」の大きな枠を押します。
2. メディアライブラリから使う画像を選びます。パソコンの画像なら「ファイルをアップロード」から追加します。
3. 画像の内容が分かる代替テキストを入力します。例：「打ち合わせをしているスタッフ」。
4. 選択した画像を挿入します。「画像の解像度」は表示する大きさに合うものを選びます。
5. 画像を押しても移動させない場合、「リンク」は「なし」のままにします。

成功の目印：右側に選んだ写真が表示されます。

③ 写真の幅を調整する

12

1. 「スタイル」を押します。
2. 「幅」の単位が％なら、まず100を指定すると入れ物の幅に合わせられます。
3. 小さくしたい場合は80や60などに減らし、右側を見ながら調整します。
4. 「高さ」は必要がなければ未入力にし、写真の縦横比を保ちます。

「画像の解像度」は元画像の細かさ、「幅」はページでの表示サイズです。小さな画像を大きく表示すると、ぼやけることがあります。

成功の目印：写真がつぶれず、ページ内に収まっていればOKです。

文字の後ろに敷く「背景画像」を変えたい場合

123

1. 画像そのものではなく、背景を持つコンテナを選びます。
2. 「スタイル」→「背景」を開きます。
3. 「背景タイプ」の筆形の「クラシック」を選びます。
4. 「画像」の枠から写真を選びます。
5. 表示位置やサイズを確認し、スマホでも人物や商品の大事な部分が見えるように調整します。

画像ウィジェットは写真を部品として置きます。背景画像はコンテナの後ろに敷きます。背景は画面の幅によって一部が切れることがあるため、重要な説明文を画像だけに入れないようにしましょう。

成功の目印：文字などの背後に写真が表示されます。

④ スマホで確認して保存する

上部のスマートフォン形のアイコンを押し、表示を確認します。問題がなければ右上の「公開」または「更新」を押し、保存後に実際のページを開き直します。

• 写真が横につぶれたり縦に伸びたりしていない。
• スマホでも重要な部分が見える。
• 画像にリンクを付けた場合、移動先が正しい。

スマホ表示の詳しい調整方法 ／ 下書き保存・公開・元に戻す手順

① 「テキストエディター」を選ぶ

1. 編集したいページを「Elementorで編集」で開きます。
2. すでに配置済みなら、右側のページで変更したい部品をクリックします。
3. 新しく追加する場合は、左上の「＋」を押し、検索欄に「テキストエディター」と入力します。
4. 見つかった部品を、右側の入れたい場所までドラッグします。マウスを押したまま移動し、置きたい場所で離します。

開き方から確認したい場合：ページを作成・編集する

② 白い入力欄に文章を書く

12

1. 「ビジュアル」を選びます。「コード」はHTMLを編集するときの表示なので、通常の文章入力には使いません。
2. 左側の白い本文欄をクリックし、最初から入っている文章を選んで消します。
3. 例として「私たちは、お客様のホームページづくりをお手伝いします。」と入力します。
4. Enterキーで次の段落へ移り、「初めての方も、お気軽にご相談ください。」と入力します。

画面例では、初期状態のサンプル文章が入っています。ご自身の紹介文に置き換えてください。

成功の目印：右側に入力した2つの段落が表示されればOKです。

③ 読みやすく整える

1. 強調したい文字だけをマウスでなぞって選択し、太字を設定します。ボタンが見当たらない場合は「フォーマット」メニューを確認します。
2. 箇条書きにしたい項目は、1項目ずつ改行して選択し、箇条書きの書式を設定します。
3. 文字全体の大きさや色は「スタイル」で整えます。まず本文16pxを目安に、右側で読みやすさを確認します。

章のタイトルを付けたい場合は「見出し」

文字にリンクを付ける

1. 「お問い合わせ」のように、移動先が分かる文字を入力して選択します。
2. リンクの挿入を選び、移動先ページのURLを貼り付けます。見当たらない場合は「挿入」メニューを確認します。
3. 設定を確定し、保存後の実際のページでその文字を押して移動先を確かめます。

④ スマホで確認して保存する

上部のスマートフォン形のアイコンを押し、表示を確認します。問題がなければ右上の「公開」または「更新」を押し、保存後に実際のページを開き直します。

• 変な場所で改行されていない。
• 文章が小さすぎず、行を追いやすい。
• リンクが意図したページを開く。

スマホ表示の詳しい調整方法 ／ 下書き保存・公開・元に戻す手順

準備：編集したいページを開く

1. WordPress管理画面の「固定ページ」→「固定ページ一覧」を開きます。
2. 編集するページの「Elementorで編集」を押します。

左に設定欄、右にページの見た目が表示されれば準備完了です。開き方がわからない場合は、ページを作成・編集する手順をご覧ください。

① 編集する見出しを選ぶ

すでにある文字を変えたい場合：右側のページ上で、変更したい見出しを1回クリックします。左上に「見出しを編集」と出れば選択できています。

見出しを新しく追加する場合：画面左上の「＋」（要素を追加）を押してから、次の順番で操作します。

12

1. 左側の検索欄に「見出し」と入力します。
2. 検索結果の左側にある「見出し」を、右側の入れたい場所までドラッグします。ドラッグとは、マウスのボタンを押したまま移動し、置きたい場所で離す操作です。

② 表示する文字を入力する

123

1. 左上の「コンテンツ」を押します。
2. 「タイトル」欄の文字を消し、「サービスのご案内」と入力します。
3. 「HTMLタグ」は、ページ内の大きな区切りなら「H2」を選びます。

「リンク」は、見出しを押したときに別ページへ移動させる場合に使います。今回は空欄のままで大丈夫です。

HTMLタグとは？
文章の中で「どの階層の見出しか」を示す設定です。H2は章の見出し、H3はその中の小見出し、と考えてください。文字を大きくするための設定ではありません。

12

③ 文字の大きさを変える

今回はパソコン表示の文字サイズを32pxにします。「px」は大きさの単位で、数字を大きくすると文字も大きくなります。

12

1. 画面上部のパソコン形のアイコンを押します。
2. 左側の「スタイル」を押します。
3. 「タイポグラフィ」右側の鉛筆マークを押します。文字の大きさなどを設定する欄が開きます。

地球のマークではなく、その右隣の鉛筆を選んでください。

3

4. 「サイズ」の単位が「px」であることを確認します。
5. 右側の数字欄に「32」と入力します。
6. 入力欄の外をクリックして、右側の見た目を確認します。

ほかの項目は、今回はそのままで大丈夫です。

成功の目印：右側の見出しの文字サイズが変わります。32pxは練習用の例なので、実際のページに合わせて調整してください。

④ スマートフォンで読めるか確認する

画面上部のスマートフォン形のアイコンを押します。右側が縦長の画面に切り替わります。

12

• 文字が画面の外にはみ出していませんか？
• 1文字だけが次の行に残るなど、不自然な改行になっていませんか？
• 小さすぎて読みにくくありませんか？

大きすぎる場合は、スマホ表示のまま「スタイル」→「タイポグラフィ」を開き、サイズを少し小さくします。例として24pxから調整してください。最後にパソコンのアイコンへ戻し、両方の表示を見比べます。

⑤ 保存して、実際のページを見る

1. 右上の「公開」または「更新」を押します。ボタン名はページの状態やバージョンによって異なります。画像の環境では「公開」と表示されています。
2. 保存処理が終わるまで待ちます。
3. 実際のページを開き、見出しが変わっているか確認します。スマートフォン実機でも確認すると安心です。

「公開」は閲覧者に見えるページへ反映する操作です。練習中のページを公開したくない場合は、右側の矢印から下書きとして保存します。保存・公開・元に戻す操作の詳細