◆画像の貼り方&Lightbox適用手順(WordPress5.x 新エディタGutenberg対応版) 

Lightboxって?そもそも画像の貼り方は?

早い話が画像をクリックすると、大きい画面がでてくるアレ。
試しに下の画像をクリックしてみてくだされ。

画像つきブログを作る際にあると見栄えが良くなるかも?
てなわけで、画像の貼り付け方とLightbox適用手順を記載しました。



なお、このサイトでは「Responsive Lightbox & Gallery」というプラグインを使用しています。

A. 画像にLightboxを適用させたいときの設定方法(新エディタを使用する場合)

1.画面左上の+ボタンから画像をクリックします

2.ブログに載せたい画像が予めある場合は「メディアライブラリ」を、これから画像をアップされる場合は「アップロード」を選択します。

2-a.「アップロード」を選択した場合

(1)画像を選択します。

(2)指定した画像がアップロードされ、ブログ記事内に挿入されます。
 この時、画像の右端と画像の下に青い丸が表示されます。この青い丸をドラッグすると画像のサイズが変更できます。

2-b.「メディアライブラリ」を選択した場合

(1)ファイルを選択します。
 画像選択後、画面右下から「選択」をクリックします。

(2)指定したファイルがブログ記事に挿入されます。
アップロードを選んだときと同様に画像の右端と下端にある青い丸をドラッグすることで画像サイズを変更できます。


3.画像ファイルを一度クリックすると、画像の左上にメニューバーが表示されます。
この時に鎖のマーク(リンク挿入ボタン)をクリックします。


4.「メディアファイル」を選択します。

5.投稿のプレビュー、もしくは記事を公開したらLightboxの設定した画像をクリックして動作を確認してみてください。

B. 画像にLightboxを適用させたいときの設定方法(旧エディタを使用する場合)

1.「メディアの追加」を選びます。

 

2.「メディアライブラリ」タブにてブログの記事の載せたい画像をクリックして選びます。
※まだメディアライブラリに画像ファイルをアップロードしてなかった場合は隣りにある「ファイルをアップロード」タブを選んで画像をアップロードしてください。

 

3.メディアライブラリから画像を選択したら右下のメニューから「リンク先 メディアファイル」を指定して「挿入」ボタンを押してください。

 

 

 

4.投稿のプレビュー、もしくは記事を公開したらLightboxの設定した画像をクリックして動作を確認してみてください。

 

画像挿入の設定は以上です。

公開された記事、ないし投稿プレビュー画面にて画像をクリックするとメディアライブラリに保存された元画像が表示されるはずなので確認してください。
元画像がでかすぎると表示が遅くなったりするので、画像サイズはほとほどに★

あと、リンク先を「なし」にすると、画像をクリックしても元画像は表示されません。
用途に応じて使い分けてみてください。