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

パソコン画像 Wordpress

こんにちは。管理人の berry です。「berry105」のブログに訪れてくださいまして、ありがとうございます。

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


Gutenberg ブロックエディターを使い始めました。

一般的なブロックエディターの使い方、cocoonのブロックエディター使用方法について、機能や設定についてご紹介します。


スポンサーリンク

一般ブロック内の「画像」って?


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

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


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

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

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

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


画像アイコン


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


機能アイコン。画像アイコンは赤枠のアイコンです。


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


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


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



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


エディタ―内に画像挿入するときに表示されるイメージ画像


URLから挿入するで、画像挿入を説明します。


画像挿入する方法は、3つあります。「アップロード」「メディアライブラリー」「URLから挿入」です。

今回は、「URLから挿入」で説明したいと思います。

画像URLは、通常著作権の問題がありますので、使用する場合注意が必要になります。
フリー画像サイト「pixabay.com」 は、Wordpressプラグインも存在していて、実際、画像挿入はサイトの画像URLを挿入する方法を選択しています。

ということで、今回フリー画像サイト 「pixabay.com」 の画像つURLを使って、挿入したいと思います。


画像URLを取得する


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


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


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


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


挿入した画像の位置を変更するツールバーイメージ画像


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


画像詳細設定のイメージ画像


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


https://cdn.pixabay.com/photo/2015/07/17/22/43/student-849819__340.jpg


こんな感じです。ラクチンですね(*’ω’*)


まとめ


画像設定は、クラシックエディターと基本的に変わりませんが、詳細設定が画面変更されることなく、設定できる点は、なんとなく楽な印象を覚えました。

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


スポンサーリンク



   にほんブログ村 ブログブログ ブログノウハウへ

Wordpress
この記事を書いた人
berry

2019年、現在アラフィフで外でパートを再開した主婦です。ブログ執筆歴は長く、Wordpressは4年ほどになります。

最近、海外ドラマをAmazonプライムで観まくっています。主人にそそのかされてモンストも少々。アニメは名探偵コナンが好きで、漫画はのだめカンタービレがお気に入り。

ブログの副収入10万円夢見るようになりました。

berryをフォローする
berry105

コメント