Gutenbergエディターにテキスト、画像、メディアファイルを追加する方法

グーテンベルクはワードプレス最新のビジュアルエディタでは、"ブロックをドラッグ&ドロップ "という簡単な操作で、簡単にレイアウトすることができます。この記事では、テキストや画像などのコンテンツを追加する方法を説明しますが、初心者でもすぐに美しいページを作成するために始めることができます。

画像 [1] - Gutenbergエディターでテキスト、画像、メディアファイルを追加する方法

I. グーテンベルク・エディターとは?

グーテンベルクWordPressバージョン5.0からデフォルトで搭載されたビジュアルエディタで、従来のエディタの単一コンテンツボックスを「ブロック」(Block)という概念に置き換え、グラフィックとテキストの混在配置、レイアウト制御、マルチメディアの埋め込みをサポートします。各コンテンツ要素(段落、タイトル、画像、動画など)は独立したブロックであり、ユーザーは自由に組み合わせたり、並べ替えたりすることができ、コンテンツ編集の自由度が大幅に向上しました。

II.テキストコンテンツの追加

1.段落テキストの挿入

  • ページの任意の空白領域またはプラスボタン(+)をクリックして、「段落」ブロックを選択します;
画像 [2] - Gutenbergエディターでテキスト、画像、メディアファイルを追加する方法
  • 追加したい本文の内容を入力する;
  • 文字サイズ、文字色、背景色は右側で設定できます;
画像 [3] - Gutenbergエディターでテキスト、画像、メディアファイルを追加する方法
  • 太字、斜体、リンクの追加、その他の編集操作は、クイックフォーマットツールバーからも実行できます。
画像 [4] - Gutenbergエディターでテキスト、画像、メディアファイルを追加する方法

2.タイトルの追加

  • プラス記号(+)をクリックし、「タイトル」ブロックを選択します;
画像 [5] - Gutenbergエディターでテキスト、画像、メディアファイルを追加する方法
  • 構造化レイアウトのための見出しレベル(H2、H3、H4など);
画像 [6] - Gutenbergエディターでテキスト、画像、メディアファイルを追加する方法
  • 見出しの適切な使用は、記事の読みやすさを向上させSEOパフォーマンス

III.挿入イメージ

1.単一画像の挿入

  • プラス記号(+)をクリックして「画像」ブロックを選択します;
画像 [7] - Gutenbergエディターでテキスト、画像、メディアファイルを追加する方法
  • ローカル画像をアップロードするか、メディアライブラリから既存の画像を選択するか、外部画像URLを挿入するかを選択します;
画像 [8] - Gutenbergエディターでテキスト、画像、メディアファイルを追加する方法
  • 画像挿入後、ブロック設定で画像サイズ、配置、代替テキスト(altテキスト)などを調整できます。
画像 [9] - Gutenbergエディターでテキスト、画像、メディアファイルを追加する方法
画像 [10] - Gutenbergエディターでテキスト、画像、メディアファイルを追加する方法

2.ピクチャースタイルの設定

  • デフォルトの角丸スタイルに設定可能;
画像 [11] - Gutenbergエディターでテキスト、画像、メディアファイルを追加する方法
  • 画像の下にキャプション説明を追加できるようになりました;
画像 [12] - Gutenbergエディターでテキスト、画像、メディアファイルを追加する方法
  • 挿入後、上下の矢印をクリックすると、ページ上の画像の位置を素早く調整することができます。
画像 [13] - Gutenbergエディターでテキスト、画像、メディアファイルを追加する方法

IV.追加メディアドキュメント(ビデオ、オーディオ、PDF)

1.ビデオの挿入

  • オプション1:「ビデオ」セクションを選択し、ビデオファイルをアップロードするか、メディアライブラリからビデオを選択します;
画像 [14] - Gutenbergエディターでテキスト、画像、メディアファイルを追加する方法
  • 方法2:「埋め込み」ブロックを挿入し、YouTubeやVimeoなどへのリンクを貼り付けると、プレーヤーが自動的に生成されます。
画像 [15] - Gutenbergエディターでテキスト、画像、メディアファイルを追加する方法

2.オーディオの挿入

  • オーディオ」ブロックを追加する;
  • MP3ファイルのアップロードまたは既存のオーディオの選択をサポートします;
  • 挿入後、自動再生の有無やループ再生などのオプションを設定できる。
画像 [16] - Gutenbergエディターにテキスト、画像、メディアファイルを追加する方法

3.PDFやその他のドキュメントを挿入する

  • Files "ブロックを追加する;
  • PDF、Word、その他のドキュメントをアップロードします;
  • システムは、ユーザーが閲覧または保存できるように、ダウンロードボタンまたはプレビューリンクを自動的に生成します。
画像[17] - Gutenbergエディターでテキスト、画像、メディアファイルを追加する方法

V. ブロックの動きとコンビネーション・スキル

  • ブロックの左側にカーソルを合わせると、上下にドラッグして並べ替えることができる;
  • 複数のブロックを「グループ」にまとめることができ、背景や余白などを簡単に統一して設定できる;
画像 [18] - Gutenbergエディターにテキスト、画像、メディアファイルを追加する方法
  • カラム」や「メディア&テキスト」レイアウトブロックを使えば、グラフィックやテキストを横に並べるなど、高度なレイアウト効果を実現できます。

VI.ヒントと最適化の提案

  • ショートカットの使用 / ブロック名を入力(例 /イメージ) 対応するコンテンツを素早く追加する;
  • テキストの代わりに画像を設定するSEO最適化とアクセシビリティ;
  • カバー画像」ブロックを使って、エフェクトの最初に背景画像+テキストを追加し、視覚的な魅力を高めることができます;
  • よく使われる組み合わせブロック(例:画像+テキスト+ボタン)は、後で再利用できるように「再利用可能ブロック」として保存できます。

まとめ

グーテンベルクの編集者ジャンワードプレスタイポグラフィがシンプルで直感的に。積み木のようなブロックでテキスト、画像、動画を簡単に追加でき、自由に組み合わせてプロフェッショナルで見栄えの良いページを作ることができます。


お問い合わせ
チュートリアルが読めない?無料でお答えします!個人サイト、中小企業サイトのための無料ヘルプ!
カスタマーサービス WeChat
カスタマーサービス WeChat
電話:020-2206-9892
QQ咨询:1025174874
Eメール:info@361sale.com
勤務時間: 月~金、9:30~18:30、祝日休み
© 複製に関する声明
著者:Linxiulian
終わり
好きなら応援してください。
クドス135 分かち合う
linxiulianのアバター - Photon Flux|WordPress 修理サービス、プロフェッショナル、ワールドワイド、迅速対応
おすすめ
解説 ソファ購入

コメントを投稿するにはログインしてください

    コメントなし