WordPress ブロックエディタ(Gutenberg)画像挿入方法です。
画像ブロックとは
画像ブロックを利用すると、投稿や固定ページに画像を挿入することができます。
ブロックエディターでは画像ブロックの設定により画像の表現の幅が広がりました。
画像挿入
エクスプローラーなど画像の保存場所からポイッと投稿や固定ページなどにドラッグ&ドロップすれば画像を挿入できます。
挿入した画像はメディアライブラリに保存されます。
![WordPress 画像をドラッグ&ドロップで追加](https://tohaz.com/wp-content/uploads/2023/02/wordpress-image-insert-32.jpg)
[+]ブロックを追加を押します。
![WordPress ブロックを追加](https://tohaz.com/wp-content/uploads/2023/01/wordpress-image-insert-01.jpg)
選択
エディタメニューの検索窓の下にあれば[画像]を押します。
![WordPress 画像ブロックを選択](https://tohaz.com/wp-content/uploads/2023/01/wordpress-image-insert-02.jpg)
すべて表示
エディタメニューが開くので[すべて表示]を押します。
![WordPress メニューを全て表示](https://tohaz.com/wp-content/uploads/2023/01/wordpress-image-insert-09.jpg)
左カラムにエディタがすべて表示されます。[ブロック]タブから[メディア]内[画像]を押します。
![WordPress メニューから画像を選択](https://tohaz.com/wp-content/uploads/2023/01/wordpress-image-insert-03.jpg)
検索窓から 画像 を検索
検索窓に[画像]を記入すると、検索結果に続きブロックが表示されるので[続き]を押して確定します。
![WordPress 「画像」で画像ブロックを検索](https://tohaz.com/wp-content/uploads/2023/01/wordpress-image-insert-04.jpg)
検索窓から image を検索
検索窓に[image]を記入すると、検索結果に続きブロックが表示されるので[画像]を押して確定します。
![WordPress 「image」で画像ブロックを検索](https://tohaz.com/wp-content/uploads/2023/01/wordpress-image-insert-05.jpg)
新しい段落ブロックで /image を記入
段落ブロックで[/image]を記入します。
![WordPress 段落ブロックに「/」を記入](https://tohaz.com/wp-content/uploads/2023/01/wordpress-image-insert-10.jpg)
予測メニューが表示されるので[画像]を選択すると反映されます。
![WordPress 段落ブロックに「/image」を記入](https://tohaz.com/wp-content/uploads/2023/01/wordpress-image-insert-11.jpg)
画像の選択
画像ブロックを挿入すると、画像選択メニューが開きます。
- アップロード:パソコンなどのデバイスに保存している画像から選択します。
- 画像を選択:メディアライブラリなどから画像を選択します。
- URL から挿入:ウェブ上にある画像アドレスを選択します。
![WordPress 画像の追加方法を選択](https://tohaz.com/wp-content/uploads/2023/01/wordpress-image-insert-07.jpg)
アップロード
[アップロード]を押します。
![WordPress 画像をアップロード](https://tohaz.com/wp-content/uploads/2023/01/wordpress-image-insert-12.jpg)
エクスプローラーが開くのでアップロードする画像を選択して[開く]を押します。
![WordPress アップロードする画像ファイル](https://tohaz.com/wp-content/uploads/2023/01/wordpress-image-insert-13.jpg)
画像ブロックが挿入できました。
![WordPress](https://tohaz.com/wp-content/uploads/2023/01/wordpress-image-insert-14.jpg)
画像を選択
下記の画像保存庫から画像を選択できます。
- メディアライブラリ
- Google フォト
- Pexels の無料の写真
- Openverse
[画像を選択]を押します。
選択メニューが開くので[メディアライブラリ]を押します。
![WordPress メディアライブラリを選択](https://tohaz.com/wp-content/uploads/2023/01/wordpress-image-insert-08.jpg)
メディアの選択またはアップロード画面が開きます。
[ファイルをアップロード]タブを選択します。
![WordPress ファイルをアップロード](https://tohaz.com/wp-content/uploads/2023/01/wordpress-image-insert-23.jpg)
ファイルをドロップしてアップロード
エクスプローラーなどから画像ファイルをポイッと[ドラッグ&ドロップ]できます。
![WordPress ファイルをドロップしてアップロード](https://tohaz.com/wp-content/uploads/2023/01/wordpress-image-insert-16.jpg)
ファイルを選択
[ファイルを選択]を押します。
![WordPress アップロードファイルの選択](https://tohaz.com/wp-content/uploads/2023/01/wordpress-image-insert-17.jpg)
エクスプローラーが開いたらアップロードするファイル(複数可)を選択して[開く]を押します。
![WordPress 複数ファイルのアップロード](https://tohaz.com/wp-content/uploads/2023/01/wordpress-image-insert-18.jpg)
ファイルがアップロードされます。
![WordPress アップロード中](https://tohaz.com/wp-content/uploads/2023/01/wordpress-image-insert-19.jpg)
アップロードしたファイルから挿入する画像を押して[チェック]を入れて[選択]を押します。
![WordPress 挿入するファイルの選択](https://tohaz.com/wp-content/uploads/2023/01/wordpress-image-insert-20.jpg)
画像が挿入できました。
![WordPress](https://tohaz.com/wp-content/uploads/2023/01/wordpress-image-insert-21.jpg)
URL から挿入
[URL から挿入]を押します。
[URL を入力または貼り付け]欄が表示されるので、ウェブ上にある挿入したい画像アドレスを入力または貼り付けして[適用]か Enter キーを押します。
![WordPress](https://tohaz.com/wp-content/uploads/2023/01/wordpress-image-insert-22.jpg)
ウェブ上の画像が挿入できます。
画像ブロックツールバー
画像ブロックを選択すると表示されるメニューです。
- ブロックタイプ変更
- ブロックのドラッグ
- 上下に移動
- デュオトーンフィルターを画像に追加(画像の色を変更できるフィルター)
- 配置を変更する (テーマに依存。左 ・ 中央 ・ 右、幅広、全幅のオプション)
- 画像にリンクを設定(添付ファイルページ、元のメディアファイル、カスタム URL を開くように選択できます)
- 画像編集ツール(切り抜きなど)
- 画像上にテキストを追加(画像ブロックがカバーブロックになります)
- 別の画像に変更する
- 追加オプション
![WordPress 画像ブロックツールバー](https://tohaz.com/wp-content/uploads/2023/01/wordpress-image-insert-24.jpg)
画像ブロックの設定
ブロックの追加設定方法です。
メインカラムで追加設定するブロックを選択して、右上の[歯車]マークを押します。
右カラムにメニューが表示されるので[ブロック]タブを選択すると追加設定が表示されます。
追加設定の内容はテーマに依存する可能性があります。
![WordPress 画像ブロックの設定](https://tohaz.com/wp-content/uploads/2023/02/wordpress-image-insert-26.jpg)
スタイル
画像のスタイルを変更できます。
各スタイルをポイントするとプレビューが表示されます。
- デフォルト:挿入した元画像が表示されます
- 角丸:画像の角が円形
- Clarendon
- Gingham
- Moon
- Lark
- Reyes
- Juno
- Slumber
- Crema
- Ludwig
- Aden
- Perpetua
- Mono
![WordPress 画像スタイル](https://tohaz.com/wp-content/uploads/2023/02/wordpress-image-insert-27.jpg)
設定
Alt テキスト
Alt テキスト(代替テキスト)欄には画像の説明を追加することができます。特に意味の無い画像なら空欄でも問題有りません。
画像サイズ
- サムネイル
- 中
- フルサイズ
から選択できます。
サイズの基準は[ダッシュボード]左メニュー[設定]内[メディア]を押します。
メディア設定から画像サイズの元となるサイズを入力できます。
![WordPress メディア設定の画像サイズ](https://tohaz.com/wp-content/uploads/2023/02/wordpress-image-insert-29.jpg)
画像の寸法
画像の寸法が変更できます。
- 幅と高さ:サイズ入力
- 割合:25% , 50% , 75% , 100% の割合入力
- リセット:変更したサイズを元のサイズに戻します。
![WordPress 画像設定](https://tohaz.com/wp-content/uploads/2023/02/wordpress-image-insert-28.jpg)
枠線
画像に枠線を追加できます。
- 色と太さの変更
- 上下左右を個別指定
角丸
画像の角を丸くできます。
- 丸みのサイズ変更
- 角ごとの丸みの個別指定
![WordPress 画像の枠線と角丸](https://tohaz.com/wp-content/uploads/2023/02/wordpress-image-insert-30.jpg)
高度な設定
ブロックに下記要素を追加できます。
- タイトル属性
- HTML アンカー
- 追加 CSS クラス
まとめ
WordPress に画像を挿入する方法でした。
画像ブロックは挿入してから、スキンをかけて視覚的に変化をあたえたり、枠や角丸表示にしたりと高度なオプションがついています。
作業量が軽減できる可能性があるので、一度確認してください。
コメント