WordPres Gutenberg エディター テキスト、画像、動画、リンクの挿入

グーテンベルグのエディターは「ブロック」が中心で、テキストや画像などのコンテンツを挿入する際は、対応するタイプのブロックを追加して編集するのが基本です。この方法は柔軟性が高く、各要素のスタイルや位置を正確にコントロールすることができます。以下が詳しい手順です：

I. テキストの挿入：段落ブロックと見出しブロックによるコンテンツの構築

テキストは記事の主体であり、Gutenbergは「Paragraph」と「Title」ブロックによってテキストレイアウトを実現している：

1.段落テキスト（本文）の挿入

• 方法1直接テキストを入力すると、自動的に「段落」ブロックが作成されます。
• 
• 方法2編集エリアの「+」アイコン（ブロックインサーター）をクリックし、「段落」を検索してクリックすると、空白の段落ブロックが生成されるので、内容を入力する。
• 

フォーマッティング：

段落ブロックを選択すると、右側にブロック（ブロック設定）パネルが表示され、設定することができます：

• アライメント（左揃え、中央揃え、右揃え、両端揃え）；
• 文字サイズ（小、普通、大、特大）；
• テキストの色（色の四角をクリックして選択し、読みやすさを確保するために背景色とのコントラストに注意してください）；
• 背景色（段落にベースカラーを追加し、重要なコンテンツを強調します。）

2.見出しの挿入（コンテンツの階層化）

タイトルは記事の構造（例：章、節）を区別するために使用され、「H1-H6」階層に従って使用することが推奨されます（H1は通常記事のメインタイトルで、編集ページの一番上にデフォルトで設定されているため、繰り返し追加する必要はありません）。

手続き：

1. 編集エリアの「＋」アイコンをクリックし、「タイトル」を検索して選択すると、タイトルブロックが生成されます。
2. タイトルのテキストを入力します（例：「I. 設置の準備」）。
3. ブロックを選択し、右パネルの「見出しレベル」でH2～H6（レベル1の小見出しはH2、レベル2の小見出しはH3など）を選択する。

テクニックテキスト入力後、テキストを選択して Ctrl+B(太字）または Ctrl+I(イタリック体) を使うと、テキストを素早くスタイリングできます。

II. 画像の挿入："Pictures "ブロックを使って画像を追加し、最適化する。

画像は投稿に命を吹き込みます。Gutenbergの「画像」ブロックは、以下のステップでアップロード、サイズ変更、最適化をサポートします：

1. 写真を挿入する3つの方法

• 方法1：新しい画像をアップロードするをクリック→「写真」を検索→「アップロード」をクリック→コンピューター上の画像ファイルを選択→アップロードが完了するまで待つ。
• 方法2：メディアライブラリの画像を使うすでにアップロードされている画像（以前挿入した画像など）がある場合は、「ピクチャ」ブロックをクリックし、「メディアライブラリ」を選択→対象の画像にチェックを入れる→「選択」をクリックします。
• 方法3：画像を直接貼り付けるコンピュータに画像をコピーし（右クリックで「コピー」）、編集エリアに戻り、右クリックで「貼り付け」すると、システムが自動的に画像ブロックを作成し、アップロードします。

2.画像スタイルの調整（最適化されていること）

画像ブロックを選択すると、右側のパネルで以下の主要なパラメータを設定できます：

• アライメント：
  • 左寄せ／右寄せ：画像は横に表示され、テキストはその周りに表示されます；
  • 中央揃え：写真は中央に表示され、テキストは上下に表示されます；
  • ワイドアライメント：画像が編集エリアの幅いっぱいに表示されます（大きな画像に適しています）。
• マグニチュードWidth "スライダーをドラッグしてスケールを調整します（画像の歪みを避けるため、"Constrain Scale "にチェックを入れておくことをお勧めします）。
• リンク画像をクリックすると高解像度の画像ページにジャンプするなど）リンクは必要ありません。
• 代替テキスト（Altテキスト）検索エンジンが画像の内容を認識しやすくし、SEOを向上させ、アクセシビリティを容易にするためです。

3.一般的な問題の解決

• 画像のアップロードに失敗しました: 画像のサイズ（5MB以下を推奨）、フォーマット（JPG、PNG、WebPに対応）を確認するか、ページを更新して再試行してください。
• 不鮮明な画像：必ずオリジナル画像（解像度は横幅1000px以上）をアップロードし、オリジナルサイズ以上のズームは避けてください。

ビデオの挿入：「ビデオ」ブロックでローカルまたはオンラインビデオを追加する。

自分で撮影したビデオでも、YouTubeやStation B、その他のプラットフォームからのビデオでも、「ビデオ」ブロックから挿入できます：

1.ローカルビデオ（自分でアップロードしたもの）を挿入する。

1. をクリック→「ビデオ」を検索→「アップロード」を選択→コンピュータ内のビデオファイルを選択（MP4、WebM形式がサポートされています）。
2. アップロードが完了すると、ビデオは自動的にブロック内に表示され、再生をクリックしてテストすることができます。

注意してください。ローカル動画ファイルは容量が大きいため、サーバースペースを占有し、読み込み速度が遅くなる可能性があります。 この方法は、小さな動画（100MB以内）にのみ使用し、大きな動画はオンラインプラットフォームを優先することをお勧めします。

2.オンラインビデオを挿入する（推奨）

ビデオ・プラットフォームのリンク経由で挿入されるため、サーバーのスペースを取らず、読み込みも速い：

1. 動画プラットフォーム（例：YouTube、B Station、Tencent Video）を開き、ターゲットの動画を見つけ、共有リンクをコピーする（例：以下のように）。 https://www.bilibili.com/video/BV123456）。
2. Gutenbergの編集エリアで、リンクを直接貼り付ける→システムが自動的に認識し、動画ブロックを作成し、動画プレーヤーを表示します。

対応プラットフォームYouTube、B-Site、Tencent Video、Youku、Aqiyiなどの主流プラットフォームを使用し、リンクを貼り付けてから読み込むまで2〜3秒待つ。

3.ビデオスタイルの調整

ビデオブロックを選択し、右パネルを設定することができます：

• アライメント（画像と同じ、左右アライメントでテキストが回り込む）；
• 幅（動画プレーヤーのサイズを変更します。携帯電話での不完全な表示を避けるため、幅1000pxを超えないことをお勧めします；）
• 自動再生：推奨しない（ほとんどのブラウザは自動再生をブロックし、体験に影響を与える）。

第四に、リンクを挿入する。

リンクはウェブサイトの「血管」であり、コンテンツと他のページや外部のウェブサイトを関連付けることができる：

1.テキストにリンクを追加する（ハイパーリンク）

1. リンクを追加するテキストを選択します（例："Click for detailed tutorial"）。
2. 上にポップアップ表示されるツールバーの「リンク」アイコン（鎖の形）をクリックするか、ショートカットキーを押す。 Ctrl+K。
3. 入力ボックスにリンクのアドレス（サイト内のページへのリンクなど）を貼り付けます。 https://你的域名/教程 または外部リンク https://example.com）。
4. オプション設定：
   • 新しいタブで開く」にチェックを入れてください（訪問者がサイトを離れるのを防ぐため、外部リンクを推奨します）；
   • リンク設定」アイコン（小さな歯車）をクリックして、リンクタイトル（マウスホバー時に表示されるヒントテキスト）を追加します。
5. Enter "または "Apply "をクリックして設定を完了すると、テキストが青くなり下線が引かれ、リンクが正常に追加されたことを示します。

2.画像へのリンクの追加

1. 画像ブロックを選択し、右パネルにある "リンク "入力ボックスを見つける。
2. リンクアドレスを入力してください（例：画像をクリックすると商品詳細ページにジャンプします）。
3. 新しいタブで開く」にチェックを入れ（必要に応じて）、空白をクリックして保存する。

3.リンクの削除

• テキストリンク：リンクのあるテキストを選択し、ツールバーの「リンクの削除」アイコン（十字の鎖）をクリックするか、または Ctrl+K その後、リンクアドレスを削除してください。
• 画像リンク：画像を選択し、右側の「リンク」入力ボックスのアドレスを削除します。

V. 初心者オペレーターへのアドバイス

1. ブロック操作のショートカット：
   • 素早くブロックを追加： Enter / + ブロック名（例 /图片 (画像ブロックを直接表示させる）；
   • ブロックの移動：ブロックを選択して ↑/↓ 矢印キー、または「⋮⋮」アイコンをブロックの左側にドラッグします；
   • ブロックの削除：ブロックを選択して Delete ボタンをクリックするか、ブロックツールバーの「削除」アイコンをクリックする。
2. リアルタイム・プレビュー編集ページの右上にある「プレビュー」ボタンをクリックして、リンクが機能しているか、画像や動画が正しく表示されているかを確認してください。
3. 過剰なタイポグラフィは避ける文字色と背景色は、ページをすっきりさせるため、あまり多用せず（3色以内）、写真や動画のサイズは統一し（例：横幅は800pxに設定）、美観を高める。

以上の手順で、Gutenbergエディターでテキスト、画像、動画、リンクを簡単に挿入・編集することができます。各要素は独立した「ブロック」なので、それを選択して右のパネルで設定を調整し、正確なレイアウトを実現してください。何度か練習すれば、すぐにコツをつかめるでしょう！