Googleアドセンスの審査に何度か落ちていた時期、
![](https://nan8kan8.com/wp-content/uploads/2019/10/-e1570611267657.png)
引用部分を明確にしてね
と怒られた時がありました。
確かに下記の記事で、画像を引用してました。
ですが当時は、引用部分に画像を挿入する方法がわからず、苦戦した記憶があります。
なぜかドラッグ&ドロップでも、挿入できないんですよね〜。
(2022/12/14追記)昔はできませんでしたが、現在はできるようになってます!
苦肉の策として、白抜きボックスに画像を詰め込んでました。
今ではちゃんとした方法で、引用部品に画像を挿入できるようになりました!
同じく挿入方法がわからなくて困っているCocoonユーザーのために、少しでも参考になればと思い、書き残しておきます。
引用部品へ画像を挿入する方法
方法は大きく2種類あります。
最初に紹介する「ビジュアル編集のまま画像挿入」の方が、はるかに簡単なのでオススメです。
昔は「ビジュアル編集のまま画像挿入」ができなかったのですが、いつの間にかできるようになってました。
[簡単]ビジュアル編集のまま画像挿入
- 追加した引用部品の「ブロックを選択するには「/」を入力」と書いてある場所に「/画像」と入力し、出てきたメニューから「画像」を選択します。
![引用挿入画像13](https://nan8kan8.com/wp-content/uploads/2022/12/引用挿入画像13.jpg)
- 「アップロード」「メディアライブラリ」「URLから挿入」のどれかを選び、挿入したい画像を選択もしくは入力します。
![引用挿入画像14](https://nan8kan8.com/wp-content/uploads/2022/12/引用挿入画像14.jpg)
- 問題なく画像が表示されていればOKです。
![引用挿入画像15](https://nan8kan8.com/wp-content/uploads/2022/12/引用挿入画像15.jpg)
[少し難しい]HTML編集で画像挿入
1)引用部品をHTML編集に変更
- 引用を載せたい場所に、Cocoonの引用部品を追加します。
例として、「段落:引用の前の文章」と「段落:引用の後の文章」の間に、「引用」部品を追加します。
![引用挿入画像1](https://nan8kan8.com/wp-content/uploads/2020/05/引用挿入画像1.jpg)
↓
![引用挿入画像2](https://nan8kan8.com/wp-content/uploads/2020/05/引用挿入画像2.jpg)
- 引用部品を選択し、上の編集メニュー右端にある3つ点の並んだアイコンを押して、「HTMLとして編集」を選択します。
![引用挿入画像3](https://nan8kan8.com/wp-content/uploads/2020/05/引用挿入画像3.jpg)
↓
![引用挿入画像4](https://nan8kan8.com/wp-content/uploads/2020/05/引用挿入画像4.jpg)
2)引用したい画像をHTML編集に変更
- 引用部品に挿入したい画像を、引用部品の近くに追加します。
![引用挿入画像5](https://nan8kan8.com/wp-content/uploads/2020/05/引用挿入画像5.jpg)
↓
![引用挿入画像6](https://nan8kan8.com/wp-content/uploads/2020/05/引用挿入画像6.jpg)
- 追加した画像を選択し、上の編集メニュー右端にある3つ点の並んだアイコンを押して、「HTMLとして編集」を選択します。
![引用挿入画像7](https://nan8kan8.com/wp-content/uploads/2020/05/引用挿入画像7.jpg)
↓
![引用挿入画像8](https://nan8kan8.com/wp-content/uploads/2020/05/引用挿入画像8.jpg)
3)画像のHTMLソースを引用部分に追加
- 画像のHTMLソースから、「<img src=”」〜「”/>」をコピーします。
青色がコピーする部分
![引用挿入画像8](https://nan8kan8.com/wp-content/uploads/2020/05/引用挿入画像8.jpg)
- 引用部品のHTMLソースの「<p>」と「</p>」の間に、さっきコピーした「<img src=”」〜「”/>」を貼り付けます。
![引用挿入画像9](https://nan8kan8.com/wp-content/uploads/2020/05/引用挿入画像9.jpg)
↓
青色が貼り付けた部分
![引用挿入画像10](https://nan8kan8.com/wp-content/uploads/2020/05/引用挿入画像10.jpg)
4)ビジュアル編集に変更
- 引用部品を選択し、上の編集メニューにある3つ点の並んだアイコンを押して、「ビジュアル編集」を選択します。
![引用挿入画像11](https://nan8kan8.com/wp-content/uploads/2020/05/引用挿入画像11.jpg)
↓
![引用挿入画像12](https://nan8kan8.com/wp-content/uploads/2020/05/引用挿入画像12.jpg)
まとめ
![ポイントとメモ](https://nan8kan8.com/wp-content/uploads/2019/09/ポイントとメモ.jpg)
Cocoonの引用部品へ画像を挿入する方法を、2パターン紹介しました。
Cocoonの引用部品に、画像を挿入するには
- ビジュアル編集のまま挿入する方法
- 引用部品内で「/画像」と入力
- 挿入したい画像を選択もしくは入力
- HTML編集で挿入する方法
- 引用部品を「HTMLとして編集」
- 画像を「HTMLとして編集」
- 画像のHTMLソースを、引用部品のHTMLソースへ貼り付け
- 引用部品を「ビジュアルとして編集」
先に紹介した「ビジュアル編集のまま〜」の方が、簡単でわかりやすいですよね。
「HTML編集で〜」はHTMLでのプログラミング経験がないと、何をやっているかイマイチ理解できないと思います。
なので「とりあえずこの方法でもできるんだ〜」ぐらいの軽いかんじで、頭の片隅に置いておくだけで充分です。
これで画像の引用方法もバッチリ!
Googleアドセンスから怒られる要素が1つ減りましたね。
引用部品への画像挿入に苦労した記事
コメント