Cocoonで引用部品に画像を入れる方法を図説

Googleアドセンスの審査に何度か落ちていた時期、

と怒られた時がありました。

確かに下記の記事で、画像を引用してました。

ですが当時は、引用部分に画像を挿入する方法がわからず、苦戦した記憶があります。

なぜかドラッグ&ドロップでも、挿入できないんですよね〜。
(2022/12/14追記)昔はできませんでしたが、現在はできるようになってます！

苦肉の策として、白抜きボックスに画像を詰め込んでました。

今ではちゃんとした方法で、引用部品に画像を挿入できるようになりました！

同じく挿入方法がわからなくて困っているCocoonユーザーのために、少しでも参考になればと思い、書き残しておきます。

引用部品へ画像を挿入する方法

方法は大きく2種類あります。

最初に紹介する「ビジュアル編集のまま画像挿入」の方が、はるかに簡単なのでオススメです。

昔は「ビジュアル編集のまま画像挿入」ができなかったのですが、いつの間にかできるようになってました。

[簡単]ビジュアル編集のまま画像挿入

1. 追加した引用部品の「ブロックを選択するには「/」を入力」と書いてある場所に「/画像」と入力し、出てきたメニューから「画像」を選択します。

2. 「アップロード」「メディアライブラリ」「URLから挿入」のどれかを選び、挿入したい画像を選択もしくは入力します。

3. 問題なく画像が表示されていればOKです。

[少し難しい]HTML編集で画像挿入

1）引用部品をHTML編集に変更

1. 引用を載せたい場所に、Cocoonの引用部品を追加します。
   例として、「段落：引用の前の文章」と「段落：引用の後の文章」の間に、「引用」部品を追加します。

↓

2. 引用部品を選択し、上の編集メニュー右端にある3つ点の並んだアイコンを押して、「HTMLとして編集」を選択します。

↓

2）引用したい画像をHTML編集に変更

1. 引用部品に挿入したい画像を、引用部品の近くに追加します。

↓

2. 追加した画像を選択し、上の編集メニュー右端にある3つ点の並んだアイコンを押して、「HTMLとして編集」を選択します。

↓

3）画像のHTMLソースを引用部分に追加

1. 画像のHTMLソースから、「<img src=”」〜「”/>」をコピーします。

2. 引用部品のHTMLソースの「<p>」と「</p>」の間に、さっきコピーした「<img src=”」〜「”/>」を貼り付けます。

↓

4）ビジュアル編集に変更

1. 引用部品を選択し、上の編集メニューにある3つ点の並んだアイコンを押して、「ビジュアル編集」を選択します。

↓

Cocoonの引用部品へ画像を挿入する方法を、2パターン紹介しました。

先に紹介した「ビジュアル編集のまま〜」の方が、簡単でわかりやすいですよね。

「HTML編集で〜」はHTMLでのプログラミング経験がないと、何をやっているかイマイチ理解できないと思います。

なので「とりあえずこの方法でもできるんだ〜」ぐらいの軽いかんじで、頭の片隅に置いておくだけで充分です。

これで画像の引用方法もバッチリ！

Googleアドセンスから怒られる要素が1つ減りましたね。