お得な入会キャンペーンいろいろ
PR

WordPress 画像挿入方法

ワードプレス 画像挿入 ブロックエディタ
この記事は約5分で読めます。

WordPress ブロックエディタ(Gutenberg)画像挿入方法です。

画像ブロックとは

画像ブロックを利用すると、投稿や固定ページに画像を挿入することができます。

ブロックエディターでは画像ブロックの設定により画像の表現の幅が広がりました。

画像挿入

エクスプローラーなど画像の保存場所からポイッと投稿や固定ページなどにドラッグ&ドロップすれば画像を挿入できます。

挿入した画像はメディアライブラリに保存されます。

WordPress 画像をドラッグ&ドロップで追加

[+]ブロックを追加を押します。

WordPress ブロックを追加

選択

エディタメニューの検索窓の下にあれば[画像]を押します。

WordPress 画像ブロックを選択

すべて表示

エディタメニューが開くので[すべて表示]を押します。

WordPress メニューを全て表示

左カラムにエディタがすべて表示されます。[ブロック]タブから[メディア]内[画像]を押します。

WordPress メニューから画像を選択

検索窓から 画像 を検索

検索窓に[画像]を記入すると、検索結果に続きブロックが表示されるので[続き]を押して確定します。

WordPress 「画像」で画像ブロックを検索

検索窓から image を検索

検索窓に[image]を記入すると、検索結果に続きブロックが表示されるので[画像]を押して確定します。

WordPress 「image」で画像ブロックを検索

新しい段落ブロックで /image を記入

段落ブロックで[/image]を記入します。

WordPress 段落ブロックに「/」を記入

予測メニューが表示されるので[画像]を選択すると反映されます。

WordPress 段落ブロックに「/image」を記入

画像の選択

画像ブロックを挿入すると、画像選択メニューが開きます。

  • アップロード:パソコンなどのデバイスに保存している画像から選択します。
  • 画像を選択:メディアライブラリなどから画像を選択します。
  • URL から挿入:ウェブ上にある画像アドレスを選択します。
WordPress 画像の追加方法を選択

アップロード

[アップロード]を押します。

WordPress 画像をアップロード

エクスプローラーが開くのでアップロードする画像を選択して[開く]を押します。

WordPress アップロードする画像ファイル

画像ブロックが挿入できました。

WordPress

画像を選択

下記の画像保存庫から画像を選択できます。

  • メディアライブラリ
  • Google フォト
  • Pexels の無料の写真
  • Openverse

例としてメディアライブラリから画像を挿入します。

[画像を選択]を押します。

選択メニューが開くので[メディアライブラリ]を押します。

WordPress メディアライブラリを選択

メディアの選択またはアップロード画面が開きます。

[ファイルをアップロード]タブを選択します。

WordPress ファイルをアップロード

ファイルをドロップしてアップロード

エクスプローラーなどから画像ファイルをポイッと[ドラッグ&ドロップ]できます。

WordPress ファイルをドロップしてアップロード

ファイルを選択

[ファイルを選択]を押します。

WordPress アップロードファイルの選択

エクスプローラーが開いたらアップロードするファイル(複数可)を選択して[開く]を押します。

WordPress 複数ファイルのアップロード

ファイルがアップロードされます。

WordPress アップロード中

アップロードしたファイルから挿入する画像を押して[チェック]を入れて[選択]を押します。

WordPress 挿入するファイルの選択

画像が挿入できました。

WordPress

URL から挿入

[URL から挿入]を押します。

[URL を入力または貼り付け]欄が表示されるので、ウェブ上にある挿入したい画像アドレスを入力または貼り付けして[適用]か Enter キーを押します。

WordPress

ウェブ上の画像が挿入できます。

画像ブロックツールバー

画像ブロックを選択すると表示されるメニューです。

  1. ブロックタイプ変更
  2. ブロックのドラッグ
  3. 上下に移動
  4. デュオトーンフィルターを画像に追加(画像の色を変更できるフィルター)
  5. 配置を変更する (テーマに依存。左 ・ 中央 ・ 右、幅広、全幅のオプション)
  6. 画像にリンクを設定(添付ファイルページ、元のメディアファイル、カスタム URL を開くように選択できます)
  7. 画像編集ツール(切り抜きなど)
  8. 画像上にテキストを追加(画像ブロックがカバーブロックになります)
  9. 別の画像に変更する
  10. 追加オプション
WordPress 画像ブロックツールバー

画像ブロックの設定

ブロックの追加設定方法です。

メインカラムで追加設定するブロックを選択して、右上の[歯車]マークを押します。

右カラムにメニューが表示されるので[ブロック]タブを選択すると追加設定が表示されます。

追加設定の内容はテーマに依存する可能性があります。

WordPress 画像ブロックの設定

スタイル

画像のスタイルを変更できます。

各スタイルをポイントするとプレビューが表示されます。

  • デフォルト:挿入した元画像が表示されます
  • 角丸:画像の角が円形
  • Clarendon
  • Gingham
  • Moon
  • Lark
  • Reyes
  • Juno
  • Slumber
  • Crema
  • Ludwig
  • Aden
  • Perpetua
  • Mono
WordPress 画像スタイル

設定

Alt テキスト

Alt テキスト(代替テキスト)欄には画像の説明を追加することができます。特に意味の無い画像なら空欄でも問題有りません。

画像サイズ

  • サムネイル
  • フルサイズ

から選択できます。

サイズの基準は[ダッシュボード]左メニュー[設定]内[メディア]を押します。

メディア設定から画像サイズの元となるサイズを入力できます。

WordPress メディア設定の画像サイズ

画像の寸法

画像の寸法が変更できます。

  • 幅と高さ:サイズ入力
  • 割合:25% , 50% , 75% , 100% の割合入力
  • リセット:変更したサイズを元のサイズに戻します。

画像サイズはメインカラムの画像のハンドルをドラッグして変更することができます。

WordPress 画像設定

枠線

画像に枠線を追加できます。

  • 色と太さの変更
  • 上下左右を個別指定

角丸

画像の角を丸くできます。

  • 丸みのサイズ変更
  • 角ごとの丸みの個別指定
WordPress 画像の枠線と角丸

高度な設定

ブロックに下記要素を追加できます。

  • タイトル属性
  • HTML アンカー
  • 追加 CSS クラス

まとめ

WordPress に画像を挿入する方法でした。

画像ブロックは挿入してから、スキンをかけて視覚的に変化をあたえたり、枠や角丸表示にしたりと高度なオプションがついています。

作業量が軽減できる可能性があるので、一度確認してください。

ブロックエディタ
りゅうをフォローする
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
りゅう

普段の疑問を解決した方法が中心で書きたいことをどんどん書いてます。

りゅうをフォローする
とは

コメント

タイトルとURLをコピーしました