グーテンベルクはワードプレス最新のビジュアルエディタでは、"ブロックをドラッグ&ドロップ "という簡単な操作で、簡単にレイアウトすることができます。この記事では、テキストや画像などのコンテンツを追加する方法を説明しますが、初心者でもすぐに美しいページを作成するために始めることができます。
![画像 [1] - Gutenbergエディターでテキスト、画像、メディアファイルを追加する方法](https://www.361sale.com/wp-content/uploads/2025/06/20250617114150394-image.png)
I. グーテンベルク・エディターとは?
グーテンベルクWordPressバージョン5.0からデフォルトで搭載されたビジュアルエディタで、従来のエディタの単一コンテンツボックスを「ブロック」(Block)という概念に置き換え、グラフィックとテキストの混在配置、レイアウト制御、マルチメディアの埋め込みをサポートします。各コンテンツ要素(段落、タイトル、画像、動画など)は独立したブロックであり、ユーザーは自由に組み合わせたり、並べ替えたりすることができ、コンテンツ編集の自由度が大幅に向上しました。
II.テキストコンテンツの追加
1.段落テキストの挿入
- ページの任意の空白領域またはプラスボタン(+)をクリックして、「段落」ブロックを選択します;
![画像 [2] - Gutenbergエディターでテキスト、画像、メディアファイルを追加する方法](https://www.361sale.com/wp-content/uploads/2025/06/20250617135145418-image.png)
- 追加したい本文の内容を入力する;
- 文字サイズ、文字色、背景色は右側で設定できます;
![画像 [3] - Gutenbergエディターでテキスト、画像、メディアファイルを追加する方法](https://www.361sale.com/wp-content/uploads/2025/06/20250617135536828-image.png)
- 太字、斜体、リンクの追加、その他の編集操作は、クイックフォーマットツールバーからも実行できます。
![画像 [4] - Gutenbergエディターでテキスト、画像、メディアファイルを追加する方法](https://www.361sale.com/wp-content/uploads/2025/06/20250617135746166-image.png)
2.タイトルの追加
- プラス記号(+)をクリックし、「タイトル」ブロックを選択します;
![画像 [5] - Gutenbergエディターでテキスト、画像、メディアファイルを追加する方法](https://www.361sale.com/wp-content/uploads/2025/06/20250617135918881-image.png)
- 構造化レイアウトのための見出しレベル(H2、H3、H4など);
![画像 [6] - Gutenbergエディターでテキスト、画像、メディアファイルを追加する方法](https://www.361sale.com/wp-content/uploads/2025/06/20250617135950427-image.png)
- 見出しの適切な使用は、記事の読みやすさを向上させSEOパフォーマンス
III.挿入イメージ
1.単一画像の挿入
- プラス記号(+)をクリックして「画像」ブロックを選択します;
![画像 [7] - Gutenbergエディターでテキスト、画像、メディアファイルを追加する方法](https://www.361sale.com/wp-content/uploads/2025/06/20250617140108272-image.png)
- ローカル画像をアップロードするか、メディアライブラリから既存の画像を選択するか、外部画像URLを挿入するかを選択します;
![画像 [8] - Gutenbergエディターでテキスト、画像、メディアファイルを追加する方法](https://www.361sale.com/wp-content/uploads/2025/06/20250617140132460-image.png)
- 画像挿入後、ブロック設定で画像サイズ、配置、代替テキスト(altテキスト)などを調整できます。
![画像 [9] - Gutenbergエディターでテキスト、画像、メディアファイルを追加する方法](https://www.361sale.com/wp-content/uploads/2025/06/20250617140529216-image.png)
![画像 [10] - Gutenbergエディターでテキスト、画像、メディアファイルを追加する方法](https://www.361sale.com/wp-content/uploads/2025/06/20250617140416426-image.png)
2.ピクチャースタイルの設定
- デフォルトの角丸スタイルに設定可能;
![画像 [11] - Gutenbergエディターでテキスト、画像、メディアファイルを追加する方法](https://www.361sale.com/wp-content/uploads/2025/06/20250617140910485-image.png)
- 画像の下にキャプション説明を追加できるようになりました;
![画像 [12] - Gutenbergエディターでテキスト、画像、メディアファイルを追加する方法](https://www.361sale.com/wp-content/uploads/2025/06/20250617141254786-image.png)
- 挿入後、上下の矢印をクリックすると、ページ上の画像の位置を素早く調整することができます。
![画像 [13] - Gutenbergエディターでテキスト、画像、メディアファイルを追加する方法](https://www.361sale.com/wp-content/uploads/2025/06/20250617141350162-image.png)
IV.追加メディアドキュメント(ビデオ、オーディオ、PDF)
1.ビデオの挿入
- オプション1:「ビデオ」セクションを選択し、ビデオファイルをアップロードするか、メディアライブラリからビデオを選択します;
![画像 [14] - Gutenbergエディターでテキスト、画像、メディアファイルを追加する方法](https://www.361sale.com/wp-content/uploads/2025/06/20250617141437409-image.png)
- 方法2:「埋め込み」ブロックを挿入し、YouTubeやVimeoなどへのリンクを貼り付けると、プレーヤーが自動的に生成されます。
![画像 [15] - Gutenbergエディターでテキスト、画像、メディアファイルを追加する方法](https://www.361sale.com/wp-content/uploads/2025/06/20250617171044185-image.png)
2.オーディオの挿入
- オーディオ」ブロックを追加する;
- MP3ファイルのアップロードまたは既存のオーディオの選択をサポートします;
- 挿入後、自動再生の有無やループ再生などのオプションを設定できる。
![画像 [16] - Gutenbergエディターにテキスト、画像、メディアファイルを追加する方法](https://www.361sale.com/wp-content/uploads/2025/06/20250617141617152-image.png)
3.PDFやその他のドキュメントを挿入する
- Files "ブロックを追加する;
- PDF、Word、その他のドキュメントをアップロードします;
- システムは、ユーザーが閲覧または保存できるように、ダウンロードボタンまたはプレビューリンクを自動的に生成します。
![画像[17] - Gutenbergエディターでテキスト、画像、メディアファイルを追加する方法](https://www.361sale.com/wp-content/uploads/2025/06/20250617141714275-image.png)
V. ブロックの動きとコンビネーション・スキル
- ブロックの左側にカーソルを合わせると、上下にドラッグして並べ替えることができる;
- 複数のブロックを「グループ」にまとめることができ、背景や余白などを簡単に統一して設定できる;
![画像 [18] - Gutenbergエディターにテキスト、画像、メディアファイルを追加する方法](https://www.361sale.com/wp-content/uploads/2025/06/20250617142806491-image.png)
- カラム」や「メディア&テキスト」レイアウトブロックを使えば、グラフィックやテキストを横に並べるなど、高度なレイアウト効果を実現できます。
VI.ヒントと最適化の提案
- ショートカットの使用
/ブロック名を入力(例/イメージ) 対応するコンテンツを素早く追加する; - テキストの代わりに画像を設定するSEO最適化とアクセシビリティ;
- カバー画像」ブロックを使って、エフェクトの最初に背景画像+テキストを追加し、視覚的な魅力を高めることができます;
- よく使われる組み合わせブロック(例:画像+テキスト+ボタン)は、後で再利用できるように「再利用可能ブロック」として保存できます。
まとめ
グーテンベルクの編集者ジャンワードプレスタイポグラフィがシンプルで直感的に。積み木のようなブロックでテキスト、画像、動画を簡単に追加でき、自由に組み合わせてプロフェッショナルで見栄えの良いページを作ることができます。
| お問い合わせ | |
|---|---|
| チュートリアルが読めない?無料でお答えします!個人サイト、中小企業サイトのための無料ヘルプ! |
カスタマーサービス WeChat
|
| ① 電話:020-2206-9892 | |
| ② QQ咨询:1025174874 | |
| 三 Eメール:info@361sale.com | |
| ④ 勤務時間: 月~金、9:30~18:30、祝日休み | |
この記事へのリンクhttps://www.361sale.com/ja/60169この記事は著作権で保護されており、必ず帰属表示を付けて複製してください。






















![絵文字[wozuimei]-Photonflux.com|プロのWordPress修理サービス、ワールドワイド、迅速対応](https://www.361sale.com/wp-content/themes/zibll/img/smilies/wozuimei.gif)
![表情[baoquan]-光子波动网 | 専門WordPress修復サービス、全世界対応、迅速対応](https://www.361sale.com/wp-content/themes/zibll/img/smilies/baoquan.gif)

コメントなし