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

引用挿入画像12

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

引用部分を明確にしてね

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

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

引用に画像を挿入している記事

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

なぜかドラッグ&ドロップでも、挿入できないんですよね〜。

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

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

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

スポンサーリンク

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

1)引用部品を準備

引用を載せたい場所に、Cocoonの引用部品を追加します。

引用挿入画像1

引用挿入画像2

2)引用部品を「HTMLとして編集」

引用部品を「HTMLとして編集」にします。

引用挿入画像3

引用挿入画像4

3)挿入したい画像を準備

引用部品に挿入したい画像を、引用の中以外に追加します。

引用の近くに追加しておくと、後々の作業が楽です。

引用挿入画像5

引用挿入画像6

4)画像を「HTMLとして編集」

追加した画像も「HTMLとして編集」にします。

引用挿入画像7

引用挿入画像8

5)画像ソースをコピー

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

青がコピー部分
引用挿入画像8

6)引用部品に画像ソースを挿入

引用の「<p>」と「</p>」の間に、コピーした画像のHTMLソースをペーストします。

引用挿入画像9

青がペースト部分
引用挿入画像10

7)引用部品を「ビジュアル編集」

引用部品を「ビジュアル編集」にします。

引用挿入画像11

引用挿入画像12
スポンサーリンク

さいごに

ポイントとメモ

Cocoonの引用部品に、画像を挿入する方法

  1. 引用部品を「HTMLとして編集」
  2. 画像を「HTMLとして編集」
  3. 画像のHTMLソースを、引用部品のソースへコピペ
  4. 引用部品を「ビジュアルとして編集」
  5. (2の画像は削除)

これで画像の引用も、バッチリですね!

 


にほんブログ村 IT技術ブログ IT技術メモへにほんブログ村

コメント

タイトルとURLをコピーしました