【WordPress】Cocoonで記事内にHTMLタグを貼る方法

WordPressの無料テーマ「Cocoon」で記事内に広告などのHTMLタグを貼りたいときに、どうやって貼ればいいかわからずに困ったことはありませんか？

また、HTMLタグを貼ることはできたけれど、自分のイメージしていたものとは違うなと感じたことがある人もいるのではないでしょうか。

せっかく広告や外部リンクを貼るのであれば、画像も表示されたリンクを貼りたいですよね。
その方法を、紹介します。

この記事を読み終わるころには、
HTMLタグの貼り付けを自信を持ってできるようになるでしょう。

応援クリックしていただけると励みになります！

お名前.com

ブログ環境について

あろうのブログ環境は、以下の通りです。

• WordPress（ワードプレス）を使用
• cocoon（コクーン）テーマを使用

HTMLタグの貼り方は2種類あります。

たとえば、こういう広告を貼りたいとします。

【方法1】「HTMLとして編集」から貼り付け

HTMLタグを貼り付ける方法は2種類あります。
まずは、「HTMLとして編集」から貼り付ける方法をご紹介します。

編集画面の「オプション」から「HTMLとして編集」をクリック

WordPressの編集画面で、薄文字で表示されている「文章を入力、または/でブロックを選択」をクリックしてキーボードの「スペース」キーを押すと、
画面のような横長の表示が出てきます。

その一番右の「オプション」をクリックすると、ウインドウが表示されますので、
「HTMLとして編集」をクリックします。

「<p>　</p>」を消して、HTMLタグを貼り付ける

表示されたウインドウの「<p>　</p>」を消して、
そこにHTMLタグを貼り付けます。

貼り付け後の編集画面の表示

すると今回の広告の場合、編集画面上では
「このブロックには、想定されていないか無効なコンテンツが含まれています。」
という表示が出てきますが、特に気にせずそのままでOKです。
（心配な場合は、きちんと貼れているかプレビューで確認してみてください。）

これで広告が貼れました！

【方法2】「カスタムHTML」から貼り付け

次に、「HTMLタグ」から貼り付ける方法をご紹介します。

WordPressの編集画面で「ブロックの追加」をクリック

WordPressの編集画面で、薄文字で表示されている「文章を入力、または/でブロックを選択」をクリックすると「＋」（ブロックを追加）という表示が出てきますので、「＋」をクリックします。

「カスタムHTML」をクリック

検索窓に「カスタム」と入力すると表示される「カスタムHTML」をクリックします。

表示されたウインドウにHTMLを貼り付ける

ウインドウが表示されて「HTMLを入力…」と表示されていますので、
そこにHTMLを貼り付けます。

HTMLを貼り付けると、HTMLタグがずらーっと表示されますが、それでOKです。

これで、広告が貼れました！

まとめ

【方法1】、【方法2】どちらの方法でもHTMLタグは貼れますが、
あろうは以前、【方法1】で貼ったときに、
リンクは貼れたのですが、画像が表示されないことがありました。

【方法2】では今のところその事象は発生していないので、
あろうとしては【方法2】がおすすめです。

なんにせよ、ブログで収益を得ていくためにはアフィリエイトは欠かせませんので、
こんなに簡単にHTMLタグの貼り付けができるCocoonはとっても便利ですね！