目次
目次

2023年10月からの景品表示法対応ガイド！新規制に備えた完全マニュアル

Cocoonカスタマイズ集
この記事は約5分で読めます。
記事内に広告が含まれています。

Cocoon 2.6.6でサポート

ステマ規制に対応するためのPR表記設定について
2023年10月施行の通称ステマ規制において、「不当表示」とならないように対応が必要となりました。詳細はこちらなどをご参照ください。参考 2023年10月施行の景品表示法の指定告示（通称ステマ規制）に関するお知らせ - A8スタッフブログ参...
wp-cocoon.com

はじめに

2023年10月1日から、景品表示法の適用が予定されています。
これに伴い、アフィリエイト広告を表示している場合、以下の文言を明示する必要があります。

  • アフィリエイト広告を利用しています。
  • 本ページはプロモーションが含まれています。
  • Ａ社から商品の提供を受けて投稿しています。

この記事では、2023年10月1日から適用される景品表示法の変更点について、アフィリエイト広告を表示している場合に必要な文言の明示について説明します。

景品表示法とは何か

景品表示法、正式には「不当景品類及び不当表示防止法」と呼ばれます。
この法律は、消費者がより良い商品やサービスを求める中で、実際よりも良く見せかける表示や過大な景品付き販売が行われると、消費者が質の低い商品やサービスを購入してしまうリスクがあることに対処するために制定されました。
景品表示法の目的は、商品やサービスの品質、内容、価格などに関して虚偽の表示を厳しく規制することです。

表示についての注意点

以下に示すA8.netの表示例を参照ください。

2023年10月施行の景品表示法の指定告示（通称ステマ規制）に関するお知らせ
いつもA8.netをご利用いただきありがとうございます。 2023年10月1日施行予定の景表法に関する指定告示について、 A8.netの方針とメディア会員様へのお願い事項についてお知らせいたします...
a8pr.jp

A8.netの例にあるような「広告」と小さい表示は、政府告示「推奨されている表示方針」を見ると、要件を満たしているか疑問です。
そのため、しっかり「〇〇〇を利用しています」と一文を掲載することをおすすめします。

アフェリエイト広告利用の表示案

過去の投稿も含め、人手で対応となると、一苦労です。
そのため、自動で全ページに表示する方法として、以下が考えられます。

  1. 通知機能を使用
  2. ウィジェットを使用
  3. テンプレートを使用
  4. JavaScriptを使用
表示方法
方法コーディング表示位置表示対象
通知機能不要通知エリア全ページ
ウィジェット必要ウィジェットエリア全ページ
テンプレート必要ヘッダー上全ページ
JavaScript必要任意広告利用ページのみ

【SWELL】ステマ規制対策｜「広告・PR」を記事に表示方法する方法｜アフィリエイトリンクがある記事だけにプロモーションなどを表示するカスタマイズ | SWELLマニア
【プロ監修】ステマ規制対策として「PR」「広告」を記事に表示する方法を解説。 ウィジェット・フックを活用し全記事にプロモーション等の表示する方法他、アフィリエイトリンクがある記事のみに表示するカスタマイズテクニックを紹介します。
webrent.xsrv.jp
ステマ規制対策！アフィリエイト広告表記を自動で表示（CocoonもOK） | POINT OF VIEW　略して、ポイビュー。
2023.09.05　インラインポチップに対応しました。2023.09.04　「広告」リボンのカスタマイズを追記しました。 こんなSWELLユーザーに読んでほしい！ やばい、まだステマ規制対策してないや・・・ アフィリエイト記事が多くて対応
point-of-view.blog

通知機能で実装する場合

改善前

Cocoon設定→通知→通知メッセージに、所定の文言を入力します。

固定ページに景品表示法に関する方針や詳細を掲載したい場合、「通知URL」にその固定ページのURLを入力する必要があります。
しかし、図2に示すように、通知エリアにはメッセージしか表示されず、ボタンがないため、リンクが有無がわからないことがあります。
そこで、リンクをボタン風に表示します。

完成イメージ

実装手順

以下のコードをstyle.cssに追加します。

.notice-area::after {
  background-color: rgb(255 255 255 / 20%);
  border-radius: 100px;
  content: '景品表示法における表記はこちら';
  display: inline-block;
  margin-left: 10px;
  padding: 3px 10px;
}

ウィジェットで実装する場合

外観→ウィジェット→「カスタムHTML」を使用して、所定の文言を入力し、例えばウィジェットエリア「投稿タイトル上」に配置します。

テンプレートファイルで実装する場合

子テーマのテンプレートbody-top-insert.phpに追加します。

Cocoon設定→モバイル→モバイルメニュー「ヘッダーモバイルボタン」を設定したとき、注意が必要です。
図3に示すように、PCと表示位置が異なります。

ヘッダーモバイルボタンは、フッター位置にあり、それを画面上に重ねています。
画面上には、ヘッダーや通知エリアなどがあるため、隠れないように<body>タグ全体を下げています。
そのため、図4に示すよう、<body>タグ内の先頭に追加しても、ヘッダー下に表示されます。

完成イメージ

PC表示
モバイル表示

実装手順

テーマ編集

以下の手順で入力します。必ず子テーマを使用してください。

  1. 外観→テーマファイルエディターを選択します。
  2. 「body-top-insert.php」を選択します。
  3. 以下のコードを最後の行に追加し、ファイルを更新をクリックします。
    通知エリアのデザイン（CSSクラスnotice-area）を流用するため、CSSは不要です。
<div class="notice-area">アフェリエイト広告を利用しています</div>

JavaScriptで実装する場合

本文にアフィリエイト広告用CSSクラスが含まれている場合、CSSクラスbodyにad-markを追加します。
フィリエイト広告用のCSSクラスが複数ある場合は、カンマで区切って複数指定します。

完成イメージ

実装手順

以下の手順で実装します。

  • ラベル
    JavaScriptを追加

    以下のコードを javascript.js に追加します。

    jQuery(function ($) {
  // 検出対象とするアフィリエイト広告のCSSセレクター一覧
  const adClass = [
    '.pochipp-box',
    '.xxxx',
  ];

  for (let i = 0; i < adClass.length; i++) {
    // 記事本文内に該当するアフィリエイト広告が含まれている場合
    if ($('.entry-content').find(adClass[i]).length > 0) {
      // 広告が存在する場合はbody要素にPR表記用のクラスを付与
      $('body').addClass('ad-mark');
      break;
    }
  }
});
  • ラベル
    CSSを追加

    以下のコードをstyle.cssに追加します。
    例は、本文の前に表示します。

    .ad-mark .entry-content::before {
  background-color: #ffcc80;      /* 背景カラー */
  color: #333;                    /* テキストカラー */
  content: 'アフェリエイト広告を利用しています';
  display: block;
  font-size: 14px;
  margin-bottom: 10px;
  text-align: center;
}

さいごに

どれが正解というわけではありません。
HTML・CSSの知識レベルに応じて使い分けるのが望ましいです。
全体のデザインに影響を与えないことを考えると、通知エリアを使うのが最も番簡単です。

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