Title: 画像ブロック Author: Dion Hulse Published: 2019年3月7日 Last modified: 2024年10月3日 --- ## カテゴリー * [はじめに](https://ja.wordpress.org/support/category/getting-started/) * [インストール](https://ja.wordpress.org/support/category/installation/) * [基本的な使い方](https://ja.wordpress.org/support/category/basic-usage/) * [基本的な管理](https://ja.wordpress.org/support/category/basic-administration/) * [カスタマイズ](https://ja.wordpress.org/support/category/customizing/) * [メンテナンス](https://ja.wordpress.org/support/category/maintenance/) * [セキュリティ](https://ja.wordpress.org/support/category/security/) * [高度なトピック](https://ja.wordpress.org/support/category/advanced-topics/) * [トラブルシューティング](https://ja.wordpress.org/support/category/troubleshooting/) ## 翻訳・改善にご協力ください ドキュメンテーションを現在[英語版](https://wordpress.org/support/)から翻訳中です。 どなたでも[ご協力いただけます](https://ja.wordpress.org/team/2019/08/06/359/)。 誤字や間違った情報にお気づきの方は、各記事の下にあるフィードバックセクションから お知らせください。 # 画像ブロック [**ブロック**一覧へ戻る](https://ja.wordpress.org/support/article/blocks/) 画像ブロックは、「ブロックの追加」ボタン (ブロックインサーター) をクリックすること で、ページに追加することができます。 別方法として、`/image` や `/画像`と入力して Enter キーを押すことで追加することも できます。”/” は必ず半角にしてください。　　 [[ スラッシュコマンドを使った画像の追加 [[ 画像の追加 _ブロック追加の詳しい方法は[こちら](https://ja.wordpress.org/support/article/adding-a-new-block/) をご覧ください。_ ## 画像の追加 画像ブロックを追加するとメディアオプションパネルが表示され、「アップロード」「メディア ライブラリ」「URL から挿入」の3つのオプションが表示されます。 ![](https://ja.wordpress.org/support/files/2021/06/投稿を編集_‹_WordPress_Demo_— _WordPress-1024x455.png) 「アップロード」「メディアライブラリ」「URL から挿入」の3種類の画像選択方法 「アップロード」は画像を直接メディアライブラリに追加して使用します。 「メディアライブラリ」をクリックするとメディアライブラリの画面が開き、すでにアップ ロード済みの画像を選択してページに埋め込むことができます。また、希望の画像が見つ からなければ、タブを切り替えてアップロードすることもできます。 「URL から挿入」は、画像への直リンクを使って画像を表示させるときに使います。 ![](https://ja.wordpress.org/support/files/2021/06/投稿を編集_‹_WordPress_Demo_— _WordPress-1-1024x768.png) メディアライブラリから画像をアップロードまたは選択し、画像情報を追加して、「選択」 をクリックします。 ## ブロックツールバー 各ブロックには、そのブロック特有のコントロールがあり、エディター上でブロックを操作 することができます。 ![](https://ja.wordpress.org/support/files/2021/06/投稿を編集_‹_WordPress_Demo_— _WordPress_🔊-1024x488.png) 画像ブロックに特化した「幅広」と「全幅」設定を含むオプション (一部のテーマでは使用 できません)。 ## 画像のリサイズ エディターに画像が追加された後には、周囲のコンテンツに合わせて画像のサイズや位置 を変更することができます。 ![Resize an image by dragging its handles.](https://wordpress.org/support/files/ 2021/01/resize-image.gif) ハンドルをドラッグして画像のサイズを変更します。 画像のサイズを変更するには、画像をクリックするとドラッグできるリサイズハンドルが 表示されますので、それをクリックして、画像を希望のサイズにドラッグしてください。 代わりに、右側のブロック設定を使って幅と高さの寸法を調整することで、画像サイズを 微調整すること、ｐできます。また、ブロック設定には、画像を元のサイズの100、75、50、 25%に設定する便利なオプションもあります。 ## 画像配置の変更 ![Align an image within a paragraph block.](https://wordpress.org/support/files/ 2021/01/align-images.gif) 段落ブロック内の画像の配置を変更します。 画像を段落内に配置したい場合は、まず対象となる段落ブロックのすぐ上に画像を挿入する 必要があります。 ![Alignment buttons with Align Right highlighted](https://wordpress.org/support/ files/2021/01/Screen-Shot-2020-12-31-at-3.43.28-PM.png) そこから、画像をクリックして左揃えまたは右揃えを選択すると、画像が段落ブロックに 統合されます。 最後に、画像を希望の幅と高さにリサイズします。 ### 「幅広」と「全幅」画像 新しいエディターのサポートがテーマに追加されると、「幅広」と「全幅」の画像のアイコ ンが表示されるようになります。この2つの画像サイズを使って、テーマの通常のコンテンツ 幅を超えて画像を拡大することができます。 ![A 'Wide' image in the editor.](https://wordpress.org/support/files/2021/01/widefullwidth. gif) A ‘Wide’ image in the editor. ### キャプション 画像にキャプションを付けたい場合は、エディターで画像の下にあるキャプションスペース にキャプションを入力するだけです。 ### リンク設定 リンク設定では、画像にハイパーリンクを設定することができます。画像をクリックすると、 添付ファイルのページを開くか、元のメディアファイルが開くか、または任意のカスタム URL を開くかを選択できます。 ![Your image can link to an Attachment Page, Media File, or Custom URL.](https:// wordpress.org/support/files/2021/01/Screen-Shot-2020-12-31-at-3.50.37-PM.png) Your image can link to an Attachment Page, Media File, or Custom URL. ### 画像編集 新機能では、エディターから移動することなく素早く切り抜きが可能です。ツールバーの「 切り抜き」ボタンを押すだけです。 ![](https://wordpress.org/support/files/2021/01/cropsettings.gif) 拡張ツールバーが表示されます。これで画像の拡大ができます。 ![](https://wordpress.org/support/files/2021/01/Screen-Shot-2021-01-04-at-12.26.37- PM.png) また、画像を正方形に切り抜くなど、アスペクト比を設定するオプションもあります。 ![](https://wordpress.org/support/files/2021/01/Screen-Shot-2021-01-04-at-12.26.24- PM-300x262.png) また、縦横の方向を変える事もできます。 変更したら、「適用」をクリックします。 ### 外部画像アップロード Google Docs のようなツールを使って記事を書いたり、共同作業をしたりすることもあり ます。そのコンテンツをサイトに掲載する際には、エディターにコピー & ペーストすること ができます。 ![](https://wordpress.org/support/files/2019/03/upload-external-image.gif) ひとつの問題点としては、これらの画像は Google など他の場所でホスティングされている 可能性が高く、変更すると簡単に壊れてしまう可能性があります。 そのため、Google Docs などのリソースから画像をコピー & ペーストすると、ツールバー にメディアライブラリにアップロードするためのボタンが表示されます。このボタンをクリック すると、画像は投稿内に残りますが、メディアライブラリにもアップロードされます。 ### 追加設定 [[ 3点ドットで表されるこのオプションでは、画像ブロックにいくつかの追加オプションを設定 することができます。 **追加設定を表示** 「追加設定を表示」オプションは、エディターのサイドバーにある「ブロック設定」パネル を表示 (または非表示) します。 **コピー** 「コピー」を使えば、選択したブロックをコピーして、エディター内の好きな場所に貼り 付けることができます。 **複製** 「複製」で選択したブロックを複製することができます。 **前に挿入** 選択したブロックの前に新しいブロックを挿入します。 **後に挿入** 選択したブロックの後に新しいブロックを挿入します。 **移動** 「移動」を選択すると、コンテンツの中に青い線が表示されますので、その線を矢印で上下 に動かして、選択したコンテンツを移動させたい場所に移動させられます。 **HTML として編集** 「HTML として編集」オプションでは、ブロックの HTML コードを変更することができます。 **再利用ブロックに追加** 「再利用ブロックに追加」オプションを使って、選択したブロックを再利用ブロックのリスト に追加することができ、他の投稿やページでも使用することができます。 **グループ化** ブロックのグループを作成して1つのユニットとして扱いたい場合は、「グループ化」オプション を選択します。例えば、共通の背景色や他のブロックをグループに追加することができます。 **ブロックを削除** 「ブロックを削除」で、選択したブロックをコンテンツから削除することができます。 ## ブロック設定 すべてのブロックには、ブロックツールバーにあるオプションに加えて、エディターのサイド バーにも特定のオプションがあります。サイドバーが表示されていない場合は、「公開」 ボタンの隣にある歯車アイコンをクリックしてください。 ### スタイル 使用中のテーマによっては、画像のスタイルがいくつかあるかもしれません。Twenty Twenty- One では、画像を丸くしたり、枠線やフレームをつけたりすることができます。 ### 画像設定 画像設定では、アクセシビリティや SEO に重要な Alt テキストの説明を追加するための テキストフィールドが用意されています。 また、画像の幅と高さの寸法を25％刻みで変更したり、正確なピクセルサイズで変更する こともできます。 ### 高度な設定 ![](https://wordpress.org/support/files/2021/01/2021-01-04-12.56.40.gif) タイトル属性フィールドは、[ページ内での画像の役割](https://www.w3.org/TR/html52/dom.html#the-title-attribute) を記述するためのものです。多くの端末やブラウザーはこのテキストを表示しません。 HTML アンカーを使うと、その特定の画像に対して「[ページジャンプ](https://ja.wordpress.org/support/article/page-jumps/?output_format=md)」 を行うことができます。ページジャンプは、アンカーリンクとも呼ばれることがあります が、リンクをクリックすると、長いページのさらに上か下のどこかに素早く移動できること です。 これを有効化するには、画像の中に HTML アンカーを入れ、そのアンカーにジャンプする リンクを作ります。 「詳細」タブでは、ブロックに CSS クラスを追加することもでき、カスタム CSS を記述 してブロックを自由にスタイリングすることができます。 #### **Changelog ** * Updated 2021-01-04 - Updated all screenshots to WordPress 5.6 * - Added section on image title attribute (Gutenberg 6.9/WP 5.4) - Added section about easy upload for external images (Gutenberg 8.5/WP 5.5) - Added section about block editor image editing (Gutenberg 8.4/WP 5.5) - Added details on HTML Anchor and Image Styles to Advanced * - Removed pencil (edit) icon and added more option menu - Removed some out-of-date content - Re-ordered to match the current block toolbar layout * Updated 2020-06-18 - Added ‘Link back to blocks’ to the top of the page - Added the ‘Changelog’ * Created 2019-03-07 [原文](https://wordpress.org/documentation/article/image-block/) ## この記事は役に立ちましたか ? どうすればさらに改善できますか ? フィードバックを送信するには[ログイン](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fja.wordpress.org%2Fsupport%2Farticle%2Fimage-block%2F&locale=ja) する必要があります。