カンタン！新ブロックエディタ版の「画像」にリンク先を貼り付ける方法

こんにちは。

ひとめぼれデザイン集客の清水よふ子です＾＾

先日に引き続き、お客様から「固定ページでは、ブロックエディタ版の編集画面で画像にリンク先を貼り付ける事はできますか？」と質問をいただきました。

回答からお伝えしますね。

固定ページでも、ブログ投稿でも、画像にリンク先を貼り付けることはできます＾＾

ただ、画像に貼り付けるリンク先の設定項目が、どこにあるか分かりづらいですよね。

とくに、新ブロックエディタの使い方に不慣れだと。。。

見つけるのが大変。。。汗

そんなお客様の《悩み解決》にお役立てられるように、新ブロックエディタ版で画像にリンク先を貼り付ける方法をご紹介します！

新ブロックエディタは、以下のような記事編集画面になっていることをいいます。

固定ページもブログ投稿記事も【共通】の編集画面です。

※クラシックエディタご利用中の方は、今回の記事は参考になれないと思います。大変申し訳ありませんがお見送り下さい。

新ブロックエディタに挑戦中の方や、画像にリンク先を貼り付けるやり方を知りたい方はぜひご参考になさってください♪

それでは、どうぞ〜！

※WordPressバージョン「5.3.2」の最新アップデートで、画像のリンク先を貼り付ける設定の場所が変わったようです。

今回紹介するのは、最新WordPress5.3.2バージョン（12月18日現在）でのやり方ですので、前WordPressバージョン５.2版とは異なります。ご注意ください。

ブロックエディタ版で画像にリンク先を貼り付けるには？

新ブロックエディタで記事を書いていて、「画像を貼り付けたのは良いけど、リンク先って…どこ？」と迷子になった事はありませんか？

新ブロックエディタに見慣れていないと、どこにあるかわかりにくいですよね＾＾；

さらに、装着している「テーマ」によっては、画像にリンク先を貼り付ける設定が１つだけでなく２つまであったりします。

今回は全テーマで使える《共通》のやり方になっているはずなので、ご安心ください。

さて、画像にリンク先を入れる設定はどこにあるかというと…

ココなんです！！

「ええ〜！こんなとこにあったの！？」と思われたかもしれません。笑

これから画像を貼り付けて、リンク先を貼り付ける手順をお伝えしていきますので、

見て頂けると「ここだったのか〜！」とようやく理解できるかと思います＾＾

１．画像を貼り付けたい配置を決める

画像を貼り付けたい配置を決めて、一つのブロックを選択して下さい。

選択したブロックの「下」に、画像が表示されるようになっています。

今回は、一番下のブロックを選択します＾＾

２．「画像」のブロックを選択する

「画像」のブロックは「一般ブロック」の中にあるので、「＋」クリックで引き出します。

すると、先ほど配置を決めたブロックの下に、「画像」のブロックが表示されます！

３.画像を表示する

①画像をパソコンかスマホからアップロードする

②メディアライブラリの中から表示したい画像を選択する

③URLから挿入

この中でよく使われるのは①と②パターンだと思いますので、どちらかで画像を表示するようにします。

４.画像の上に表示されるアイコン一覧から「リンク先」を選択

表示した画像ブロックの上に、アイコン一覧が出るようになりました。

その中から、「リンク先」のアイコンをクリック。

５.リンクURLの空欄に「リンク先」を貼り付ける

リンク先のアイコンをクリックすると、下に設定が表示されます。

リンクURL空欄に、クリックしてほしい「リンク先」を貼り付けて下さい。

６.「適用」をクリックして完了！

リンク先を貼り付けたら、「適用」をクリックすると画像へのリンク先貼り付けが完了します。

★リンク先が外部ページのURLを入れる場合

ウィンドウを「新しいタブで開く」ように入れてあげましょう！

「青」になったら設定完了です。

「新しいタブで開く」をクリックすると、その下に、リンクrelの欄に「noreferrer noopener」と自動表示されるようになっていますが、念の為、消さずにそのままにしておいてください。

終わりに

以上で、ブロックエディタ版で画像にリンク先を貼り付ける方法をご紹介しました＾＾

いかがでしたでしょうか？

12月18日にアップデートされた、WordPressバージョン5.3版では、画像のリンク先を貼り付ける設定がどこにあるのか、すごく分かりやすくなったように思います。

それまでのWordPressバージョン5.2版は、どこにあるか分かりづらかったようなので、今回のアップデートで改善されたようですね！

新ブロックエディタ版で「画像にリンク先を貼り付ける」方法の悩み解消にお役に立てたら光栄です＾＾

ひとめぼれデザイン集客

清水よふ子