ブロックエディター「画像」 の使い方を説明します

WordpressWordpress
スポンサーリンク

ブロックエディター「画像」 ブロックメニューの一般ブロック内の「画像」は、Wordpressダッシュボードメニューにあるメディアを記事に挿入したり、デバイスに保存している画像を記事に直接挿入できる機能です。

従来のクラシックエディターと使用方法は同じになります。

ブロックエディター「画像」

 

ブロックエディター「画像」

 

当サイトにお越しいただきまして、ありがとうございます。とてもうれしく思います☆不思議な話系から、ハウツーまでいろいろサイトで語りたいhukuです。

今回は、 Gutenbergブロック機能内にある一般ブロックの「画像」の紹介です。

ブロックメニューの一般ブロック内の「画像」は、Wordpressダッシュボードメニューにあるメディアを記事に挿入したり、デバイスに保存している画像を記事に直接挿入できる機能です。

従来のクラシックエディターと使用方法は同じになります。違う点は、クラシックエディターの場合は、ツールバーに「メディア」が表示されていましたが、ブロックエディターの場合、ツールバーに設置されていない点です。

 

この「画像」機能も、前回紹介した「段落」「見出し」と同様に、ツールバー以外の3ケ所「一般ブロック・よく使うもの・ テキスト・ブロックナビゲーション・ブロックの右端」に、表示されることがあります。

基本的に「画像」は、ブロックメニュー内にある、一般ブロック テキスト の中に設定されている機能です。他の2点の位置に表示される場合は、頻繁に使用する人に限ります※。

※おそらく「画像」も「段落」や「見出し」機能同様に、頻繁に使用する機能になるかと思うので、2点の場所に表示されるかと思います。

3カ所の配置場所に関しては、一般ブロックの見出し説明 を 参考にしてください。

画像アイコン

 

画像アイコンはこちらになります。※赤枠のアイコンです。

 


ブロックエディター「画像」 画像機能

画像を記事内に挿入する方法

 

それでは 画像を 実際に 記事内 (ブロックエディタでも表示されます。) に、設定する方法を 説明したいと 思います。

一般ブロック テキスト 内に ある 画像を 選択して クリックします。
(初期では 「 よく使うもの ブロックナビゲーション 」や「 ブロック右端 」に表示されていたか 忘れてしまいましたので この説明に なります (;’∀’)… )

② 次の画像が 表示されるので デバイスから「 アップロード 」するか、「 メディアライブラリー 」から 画像を選択するか 直接URLから 挿入するかを 選択し、クリックすると エディター内に 次のように 表示 されます。

 

画像機能⓶

URLから挿入する という やり方で 画像挿入を 説明します 

 

画像挿入する方法 は 3つ あります。アップロード ・ メディアライブラリー ・ URLから挿入 です。今回は URLから挿入 で説明したいと思います。

画像URLは 通常著作権の問題 が ありますので、使用する場合 注意が 必要になります。

フリー画像サイト「pixabay.com」 は、Wordpressプラグインも 存在しています。イメージ画像を 使用するときは こちらの サイトを 頻度高めに 使っています。今回紹介する 画像挿入に サイトの 画像URLを 挿入する方法は、この「pixabay.com」で紹介させてもらいたいと思います。

ということで 今回、フリー画像サイト 「 pixabay.com 」 の 画像の 画像URLを 使って 挿入しながら、流れを説明しますね。

画像URLを取得する

 

① まず  pixabay.com から、挿入したい画像を 選択します。選んだ画像を 右クリックして 画像URLを コピー をクリック します。

② 画像機能内にある 「URLを挿入する」を 選択クリックすると URL記入欄が 表示されるので そこに コピーしたURLを 貼りつけ クリックすると 画像が 表示 されます。

 

パソコン女性
https://cdn.pixabay.com/photo/2015/07/17/22/43/student-849819__340.jpg

 

挿入した画像の 位置を 変更したい場合は  表示された画像を 選択クリックすると ツールバーに 画像の位置変更設定が 表示 されます。

画像位置変更するための ツールバーと 同時に 画像の 詳細設定するために 記入する 項目が、右サイドバーに 表示されるのですが 代替テキストの設定や 画像のサイズ変更などが このサイドバーから 行えます。

 

先ほど 紹介した画像を 位置変更して 表示させてみました。画像を 中央寄せ です。

 

 

こんな感じに 「 画像位置 」を 変更したり また「 画像サイズ 」を サイドバーから 変更することが できます。クラッシックエディター と 比べてみると かなり ラクに 変更できますね… (*’ω’*)

まとめ

 

画像設定は クラシックエディターと 基本的に 変わりませんが 詳細設定が 画面を切り替え されることなく 変更 設定できる点は、本当に 楽だと思います。

画像設定は クラシックエディターよりも ブロックエディターの方が 簡単ではないか と思いました (‘ω’)ノ

 

 


参考になった…と思っていただけた方、
よかったらポチっとお願いしますm(__)m


備忘録・雑記ランキング


 

profile
huku

主婦をしつつ、少しパートをしつつ、そして好きなジャンルのコンテンツを作ることを趣味としている現在(2020年)48歳です。
コンテンツ作りは、2010年アメブロからスタートし、2015年Wordpressを使い始めました。昨年から試験的にYouTube配信もスタートしました。

hukuをフォローする
Wordpress
hukuをフォローする
Huku

コメント

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