初心者アフィリエイト記事の上部に「広告」の表記を出したい…
特定のカテゴリーのみ自動的に表示させる方法ってないの?
そんな疑問に答えます。
2023年10月1日から景品表示法におけるステルスマーケティング規制（以後、ステマ規制と省略します）が施行されます。ブログ記事やSNSでアフィリエイト商品を紹介するさいには、「PR」「広告」などといった表記を読者に分かりやすく表示させることが必要になるケースがあります。
法令違反の対象者は広告主でありアフィリエイトブログ運営者ではありません。ですが、アフィリエイトサービスプロバイダー（以後ASPと省略します）側でも法律の施行にあわせてASPの利用規約を改定しています。
ASPの利用規約を守らないと最悪ASPから強制退会となってしまうリスクがあります。
ちなみに今回のステマ規制の対象となる記事やSNS投稿は公開している全ての記事・投稿です。法律が施行される2023年10月1日以前に公開されている記事やSNS投稿も全て対象になります。
ブログに限った話ですが1記事づつ「広告」を設定するのは大変すぎます。
本記事ではWordPressテーマ「SWELL」のユーザー向けにステマ規制対応のメッセージを表示する方法を紹介します。
こんなことが出来る！
- 全記事に「広告」の表記をする
- 広告のある記事だけに「広告」の表記をする
- 特定のカテゴリー・タグに属する記事だけに「広告」の表記をする
【概要】ステマ規制って何？
初心者ステマ規制って何？
まずは基本のおさらいです。
消費者庁のHPの引用です↓
令和5年10月1日からステルスマーケティングは景品表示法違反となります。
引用元：消費者庁公式HP
広告であるにもかかわらず、広告であることを隠すことがいわゆる「ステルスマーケティング」です。景品表示法は、うそや大げさな表示など消費者をだますような表示を規制し、消費者がより良い商品・サービスを自主的かつ合理的に選べる環境を守ります。
一般消費者を装い、商品の広告をする行為のことをステルスマーケティングと呼びます。
かんた具体的な例を紹介しますね↓
ステルスマーケティングの具体例
まずはYouTubeを例にします。YouTuberが企業からお金をもらって企業の商品やサービスを紹介する行為って、広告ですよね？事前に広告であることをYouTubeの視聴者に表示していない場合、この行動はステルスマーケティングという扱いになります。
ステマ規制法の施工後は、動画が広告であることを明示する必要があります。
「PR」「広告」「プロモーション」などの文言をしっかり表示しなくてはいけません。
アフィリエイトブログもステマ規制法が適用されるの？
YouTube動画だけでなく、ブロガーの書いたアフィリエイト記事もステマ規制法が適用されます。
ステマ規制法の対象となる一例
- ASPのアフィエイトリンクをブログに貼っている
- 企業から金銭や商品を受け取りレビュー記事を書いた
企業から直接お金をもらっているインフルエンサーが「PR」と表示するのはスンナリ理解できます。ですが、一般ユーザーが商品を購入してレビュー記事を公開するのにPRって表現は、ちょと変…な印象。
とはいえ、一般ブロガーのアフィリエイト記事もステマ規制対策の対象になります。法律が施行されるとステマ規制法だけでなく各ASPの利用規約に従わなくてはいけません。
かんたやるしかないのです！
【ステマ規制対応】ブログ記事に「PR・広告」の表記を出す方法
ここからは具体的なステマ規制の対応についてです。
国内大手ASPが、アフィリエイト記事に「広告」「PR」「プロモーション」といった表記を付けるよう利用規約を変更しています。
本記事ではASPの規約違反とならないよう、ブログ記事の上部に「広告」や任意のテキストを表示させる手順を紹介します。
初心者の人でも迷わず操作できる簡単な方法を含めて紹介します。
かんたご自身のPCスキル、デザインに合うものをお試しください。
ステマ規制対策カスタマイズ
- 記事上ウィジェットを使う
- フックを使う
- フックでブログパーツを呼び出す
- テンプレートを編集する
かんたそれぞれのカスタマイズ方法を紹介します。
【ステマ規制対策①】記事上ウィジェットを使う
PHPやHTＭLコードを一切編集しないもっとも簡単な方法です。
PRと表示する位置は、上記サンプル画像の通りアイキャッチと本文エリアの間です。
カスタマイズの概要
| 難易度 | デメリット |
|---|---|
| （1/5） | 位置が特定の位置で変更できない |
コードを編集せず全記事に任意の表記を出すことができます。色んなやり方がありますが、圧倒的に初心者の人向きの簡単なカスタマイズです。
かんた設定の仕方を解説します！
【手順①】ウィジェットページを開く
「外観」→「ウィジェット」とクリックします。
【手順②】テキストウィジェットを記事上部に配置する
「テキスト」ウィジェットを選択し、→「記事上部」をクリックします。
【手順③】表示内容を入力する
「テキスト」ウィジェットを選択し、記事に表示する内容を入力します。
※上記サンプルでは「PR」とだけ入力しました。
「完了」をクリックし設定を保存します。
以上で作業完了です。記事上部に設定した文字列「PR」が表示されている確認しましょう！
かんたお疲れさまでした。
テキストウィジェット以外にも、ブログパーツを呼び出すこともできます。
折りたたみ式のアコーディオン形式で表示させるは、HTＭLウィジェットにブログパーツの呼び出しコードを設置しましょう。
尚、中級者向けにアフィリエイトリンクがある記事限定で記事上ウィジェットを表示する方法を記事の後半で解説しています。
【ステマ規制対策②】SWELLの独自フックを使う
記事ぺージのタイトル、アイキャッチ画像付近にはSWELL独自のアクションフックが用意されています。本記事のメインテーマ「ステマ規制対策の表記」に使えるフックと具体的なコードを紹介します。
カスタマイズの概要
| 難易度 | デメリット |
|---|---|
| （3/5） | 作業ミスにより画面が真っ白になるリスクがあります。 |
子テーマのfunctions.phpやCode Snippetsなどのプラグインにコードを書く作業があります。
トラブルが発生した場合に、復旧できるスキルがある人限定のカスタマイズです。
かんたまずは表示する場所と対応するフックについて紹介します↓
【フック①】タイトルの上用のフック
タイトルの上に文字列を表示したい人向けです。SWELLには独自フックとしてswell_before_post_headフックがあります。上記画像の通り、記事タイトルの上にあるアクションフックです。
【基本編】swell_before_post_headの使い方
子テーマのfunctions.php、もしくはCode Snippetsに次のようにコードを追加します。
swell_before_post_thumbフックの実用例
function show_pr_atnank() {
if (is_single()) {
echo '表示したい文字列';
}
}
add_filter('swell_before_post_head', 'show_pr_atnank');例えば「PR」とだけ表示したい場合は次のように書きます。
function show_pr_atnank() {
if (is_single()) {
echo 'PR';
}
}
add_filter('swell_before_post_head', 'show_pr_atnank');CSSでの装飾用に、文字列だけでなくクラス名を付けたHTMLコードも含めて出力するケースの書き方です↓
function show_pr_atnank() {
if (is_single()) {
echo '<div class="swell_before_post_thumb_atnak">PR</div>';
}
}
add_filter('swell_before_post_head', 'show_pr_atnank');アフィリエイトリンクがある記事だけに表示する方法は記事の後半で紹介しています。
【フック②】タイトルパーツとアイキャッチの間用
上記画像の通り、記事のタイトルパーツとアイキャッチの間に「PR」など任意の文字を表示させる方法です。
SWELL独自のswell_before_post_thumbフックを使います。
【基本編】swell_before_post_thumbの使い方
子テーマのfunctions.php、もしくはCode Snippetsに次のようにコードを追加します。
swell_before_post_thumbフックの実用例
function show_pr_atnank() {
if (is_single()) {
echo '表示したい文字列';
}
}
add_filter('swell_before_post_thumb', 'show_pr_atnank');例えば「PR」とだけ表示したい場合は次のように書きます。
function show_pr_atnank() {
if (is_single()) {
echo 'PR';
}
}
add_filter('swell_before_post_thumb', 'show_pr_atnank');CSSでの装飾用に、文字列だけでなくクラス名を付けたHTMLコードも含めて出力するケースの書き方です↓
function show_pr_atnank() {
if (is_single()) {
echo '<div class="swell_before_post_thumb_atnak">PR</div>';
}
}
add_filter('swell_before_post_thumb', 'show_pr_atnank');本記事執筆時のSWELL最新バージョンの（2.7.8.3）だと、両フックともに記事ページ限定のアクションフックです。is_single()関数がなくても、固定ページなどその他のページには影響がありません。
かんたアフィリエイトリンクがある記事だけに表示する方法は記事の後半で紹介しています。
【フック③】アイキャッチ画像上用のフック
アイキャッチ画像上に「PR」表示をする場合は、swell_parts_post_thumbnailフィルターフックを使います。
上記画像ではアイキャッチ画像の左下にPRと表示していますが、PRの表示位置はCSSで調整できます。ちなみにPR以外の文言にも変更できます。
かんたアイキャッチ画像の「右上」、「左上」など好きな場所に調整しましょう！
【基本編】swell_before_post_headの使い方
子テーマのfunctions.php、もしくはCode Snippetsに次のようにコードを追加します。
swell_before_post_thumbフックの実用例
「PR」とだけ表示したい場合は次のように書きます。
function show_pr_atnakthumbnail($return, $post_id) {
$thumb = \SWELL_Theme::get_thumbnail( [
'post_id' => $post_id,
'class' => 'p-articleThumb__img',
'lazy_type' => apply_filters( 'swell_post_thumbnail_lazy_off', true ) ? 'none' : \SWELL_Theme::$lazy_type,
'use_noimg' => is_single() && \SWELL_Theme::get_setting('show_noimg_thumb'),
'sizes' => '(min-width: 960px) 960px, 100vw',
] );
$caption = get_post_meta( $post_id, 'swell_meta_thumb_caption', true ) ?: '';
if ( $caption ) {
$caption = '<figcaption class="p-articleThumb__caption">' . wp_kses( $caption, \SWELL_Theme::$allowed_text_html ) . '</figcaption>';
}
if ( $thumb ) {
$return = '<figure class="p-articleThumb"><div class="kanta-show-pr-label">PR</div>' . $thumb . $caption . '</figure>';
}
return $return;
}
add_filter('swell_parts_post_thumbnail', 'show_pr_atnakthumbnail', 10, 2);
上記コードの14行目で表示する文字列をPRに指定しています。お好みで変更してください。
続いてPRの表示位置の調整です。
カスタマイザーの「追加CSS」にCSSコードを追加します。
かんた位置ごとのCSSコードを紹介します↓
PRを「左下」に表示するパターン
.single article figure.p-articleThumb {
position: relative;
}
.kanta-show-pr-label {
position: absolute;
left: 10px;
bottom: 10px;
color: white;
border: 1px solid white;
background: black;
text-align: center;
padding: 2px 8px;
font-size: 0.8em;
}PRを「右下」に表示するパターン
.single article figure.p-articleThumb {
position: relative;
}
.kanta-show-pr-label {
position: absolute;
right: 10px;
bottom: 10px;
color: white;
border: 1px solid white;
background: black;
text-align: center;
padding: 2px 8px;
font-size: 0.8em;
}PRを「左上」に表示するパターン
.single article figure.p-articleThumb {
position: relative;
}
.kanta-show-pr-label {
position: absolute;
left: 10px;
top: 10px;
color: white;
border: 1px solid white;
background: black;
text-align: center;
padding: 2px 8px;
font-size: 0.8em;
}PRを「右上」に表示するパターン
.single article figure.p-articleThumb {
position: relative;
}
.kanta-show-pr-label {
position: absolute;
right: 10px;
top: 10px;
color: white;
border: 1px solid white;
background: black;
text-align: center;
padding: 2px 8px;
font-size: 0.8em;
}アフィリエイトリンクがある記事だけに表示する方法は記事の後半で紹介しています。
【ステマ規制対策③】フックでブログパーツを呼び出す
SWELLには複数のページで共通のパーツを呼び出す。「ブログパーツ機能」があります。
ブログパーツでステマ対策として表示するパーツを作り、そのパーツをフックで表示するという使い方ができます。
カスタマイズの概要
| 難易度 | デメリット |
|---|---|
| （3/5） | 作業ミスにより画面が真っ白になるリスクがあります。 |
全体のながれ
- ブログパーツ機能で表示するパーツを作る
- フックでパーツを表示する
かんた各ステップを紹介します。
【手順①】ブログパーツ機能で表示するパーツを作る
ブログ記事上部に表示させる「パーツ」を作るステップです。
かんた「PR」や「広告」など、ステマ規制対策として表示させる文字列のことです！
「ブログパーツ」→「新規追加」をクリックします。
「広告」と伝わるようパーツを自由に作りましょう。
【手順②】フックで広告を表示させる
作成したブログパーツをフックで表示させるステップです。
swell_before_post_thumbフックを例に、ブログパーツを呼び出す方法を紹介します。
コード
function kanta_show_ad(){
if ( is_single() ) {
echo do_shortcode('ブログの呼び出しコード);
}
}
add_filter( 'swell_before_post_thumb', 'kanta_show_ad' );コード内の「ブログパーツの呼び出しコード」に、作成したブログパーツの呼び出しコードを書き込みます↓
以上で作業終了です。
ブログパーツはおすすめしない。
ブログパーツの使い方を解説しましたが、ブログパーツを使ったステマ規制対策はおすすめしません。理由ですが「広告」や「PR」など、たかだか数文字を表示するだけで十分な作業です。
ブログパーツを使うと、当然ながらブログパーツのアウターHTMLが出力されます。隣接要素との調整、ブログパーツ内の余白の調整など余計な仕事が増えます。
クライアントワークで「PHP周りをふれさせたくない」といったケース以外、あまりおすすめしません。
【ステマ規制対策④】テンプレートを編集する
これまで紹介したステマ規制対策①～③以外の場所に、任意の文字列やブログパーツを表示するケースについてです。表示したい場所にフックがない場合はテンプレートを編集するといった作業を行います。
パンくずとコンテンツ間
マークアップでいうと、#breadcrumbと#contentの間に広告を表示するケースです。SEO的な観点から「広告の表記を記事内に含めたくないな～」という人向けです。
編集前
対象はheader.php。56行目付近のコードです↓
// ぱんくず
if ( 'top' === $SETTING['pos_breadcrumb'] ) SWELL_Theme::get_parts( 'parts/breadcrumb' );
?>
<div id="content" class="l-content l-container" <?php SWELL_Theme::content_attrs(); ?>>
<?php
// ピックアップバナー
if ( SWELL_Theme::is_show_pickup_banner() ) {
$cache_key = $SETTING['cache_top'] ? 'pickup_banner' : '';
SWELL_Theme::get_parts( 'parts/top/pickup_banner', null, $cache_key );
}
編集後
// ぱんくず
if ( 'top' === $SETTING['pos_breadcrumb'] ) SWELL_Theme::get_parts( 'parts/breadcrumb' );
?>
<div class="kanta-ad-notice">ここに表示する文字列を入力します</div>
<div id="content" class="l-content l-container" <?php SWELL_Theme::content_attrs(); ?>>
<?php
// ピックアップバナー
if ( SWELL_Theme::is_show_pickup_banner() ) {
$cache_key = $SETTING['cache_top'] ? 'pickup_banner' : '';
SWELL_Theme::get_parts( 'parts/top/pickup_banner', null, $cache_key );
}
表示されますが、画面の左側によってしまいますのでサイトデザインに合わせてCSSでの修正が必要です。
以下のコードは一例です↓
.kanta-ad-notice{
font-size:0.9em;
color:gray;
text-align:center;
margin-top:10px;:
}ちなみに上記のコードは全ページに指定した文字列が表示されます。表示させるページを記事テンプレートだけに限定するにはis_single()関数を使い次のようにコードを仕上げます↓
// ぱんくず
if ( 'top' === $SETTING['pos_breadcrumb'] ) SWELL_Theme::get_parts( 'parts/breadcrumb' );
?>
<?php if ( is_single() ) : // 記事ページの場合のみ実行 ?>
<div class="kanta-ad-notice">この記事にはアフィリエイトリンクを含んでいます。</div>
<?php endif; ?>
<div id="content" class="l-content l-container" <?php SWELL_Theme::content_attrs(); ?>>
<?php
// ピックアップバナー
if ( SWELL_Theme::is_show_pickup_banner() ) {
$cache_key = $SETTING['cache_top'] ? 'pickup_banner' : '';
SWELL_Theme::get_parts( 'parts/top/pickup_banner', null, $cache_key );
}
記事ページ限定で文字列ではなく、ブログパーツを呼び出すには次のようにコードを書きます。
// ぱんくず
if ( 'top' === $SETTING['pos_breadcrumb'] ) SWELL_Theme::get_parts( 'parts/breadcrumb' );
?>
<?php if ( is_single() ) : // 記事ページの場合のみ実行 ?>
<?php echo do_shortcode('[ブログパーツの呼び出しコード]'); ?>
<?php endif; ?>
<div id="content" class="l-content l-container" <?php SWELL_Theme::content_attrs(); ?>>
<?php
// ピックアップバナー
if ( SWELL_Theme::is_show_pickup_banner() ) {
$cache_key = $SETTING['cache_top'] ? 'pickup_banner' : '';
SWELL_Theme::get_parts( 'parts/top/pickup_banner', null, $cache_key );
}
ヘッダーとパンくず間
対象は先ほど同様にheader.phpです。
修正後
// MV下通知バー
// if ( 1 ) {
// $cache_key = $SETTING['cache_top'] ? 'mv_info' : '';
// SWELL_Theme::get_parts( 'parts/top/mv_info', null, $cache_key );
// }
echo '<div class="kanta-ad-notice">ここに表示する文字列を入力します</div>';
// 記事スライダー
if ( SWELL_Theme::is_use( 'post_slider' ) ) {
$cache_key = $SETTING['cache_top'] ? 'post_slider' : '';
SWELL_Theme::get_parts( 'parts/top/post_slider', null, $cache_key );
}
記事スライダーの上にコードを追加します。
このコードは全ページに表示されます。記事ページに表示をを限定する場合はis_single()関数を追加し次のようにコードを書き換えます↓
// MV下通知バー
// if ( 1 ) {
// $cache_key = $SETTING['cache_top'] ? 'mv_info' : '';
// SWELL_Theme::get_parts( 'parts/top/mv_info', null, $cache_key );
// }
if (is_single()){
echo '<div class="kanta-ad-notice">ここに表示する文字列を入力します</div>';
}
// 記事スライダー
if ( SWELL_Theme::is_use( 'post_slider' ) ) {
$cache_key = $SETTING['cache_top'] ? 'post_slider' : '';
SWELL_Theme::get_parts( 'parts/top/post_slider', null, $cache_key );
}
さらに、記事ページ限定でブログパーツを表示するには次のようにコードを書き換えます↓
// MV下通知バー
// if ( 1 ) {
// $cache_key = $SETTING['cache_top'] ? 'mv_info' : '';
// SWELL_Theme::get_parts( 'parts/top/mv_info', null, $cache_key );
// }
if (is_single()){
echo do_shortcode('[ブログの呼び出しコード]');
}
// 記事スライダー
if ( SWELL_Theme::is_use( 'post_slider' ) ) {
$cache_key = $SETTING['cache_top'] ? 'post_slider' : '';
SWELL_Theme::get_parts( 'parts/top/post_slider', null, $cache_key );
}
さらにマークアップを付けて、表示場所をコンテンツ幅に合わせる場合は次のように書き換えます。
// MV下通知バー
// if ( 1 ) {
// $cache_key = $SETTING['cache_top'] ? 'mv_info' : '';
// SWELL_Theme::get_parts( 'parts/top/mv_info', null, $cache_key );
// }
if (is_single()) {
echo '<div class="l-container kanta-policy">';
echo do_shortcode(ブログパーツ呼び出しコード]');
echo '</div>';
}
// 記事スライダー
if ( SWELL_Theme::is_use( 'post_slider' ) ) {
$cache_key = $SETTING['cache_top'] ? 'post_slider' : '';
SWELL_Theme::get_parts( 'parts/top/post_slider', null, $cache_key );
}
ヘッダー直下にブログパーツでアコーディオンを付けたい
こんな感じのやつです↓
今回紹介した方法で実装できます↓
// MV下通知バー
// if ( 1 ) {
// $cache_key = $SETTING['cache_top'] ? 'mv_info' : '';
// SWELL_Theme::get_parts( 'parts/top/mv_info', null, $cache_key );
// }
if (is_single()) {
echo '<div class="l-container kanta-policy">';
echo do_shortcode(ブログパーツ呼び出しコード]');
echo '</div>';
}
// 記事スライダー
if ( SWELL_Theme::is_use( 'post_slider' ) ) {
$cache_key = $SETTING['cache_top'] ? 'post_slider' : '';
SWELL_Theme::get_parts( 'parts/top/post_slider', null, $cache_key );
}
サンプルのように背景にも自然に馴染ませる場合は次のCSSコードをカスタマイザー内の「追加CSS」に追加します。
.kanta-policy .swell-block-accordion__title{
background:var(--color_bg);
}【アレンジ】特定の記事だけに「広告」を表示させるカスタマイズ
本記事で紹介したステマ規制対応を使うと、全記事に設定した文字列が表示されます。
「アフィリエイト広告のないブログ記事にも表示されるのはちょっと嫌だ…..」
かんたそんな人向けに、ウィジェットとフックの適用範囲を限定するカスタマイズを紹介します。
①ウィジェットの表示を限定する方法
「記事上部ウィジェット」を利用するケースについてです。
記事上部ウィジェットはそのままだと全記事に表示されます。記事内にアフィリエイトリンクがあるかを自動判定して、アフィリエイトリンクがある場合限定でウィジェットを表示する方法についてす。
サンプルコード
このコードはサンプル用のコードです。
このまま貼り付けても効果はありません。環境に合わせて書き換えてくだささい。
function remove_widget_from_sidebar( $sidebars_widgets ) {
// 記事ページでのみ実行する条件を追加
if ( is_single() ) {
// コンテンツ内に特定の文字列が含まれているか確認
$patterns = array( 'msn.co.jp', 'yahoo.com', 'google.com' );
$found = false;
foreach ( $patterns as $pattern ) {
if ( strpos( get_the_content(), $pattern ) !== false ) {
$found = true;
break; // 1つでも見つかればループを終了
}
}
// 特定の文字列が見つからなかった場合、指定のウィジェットを削除
if ( ! $found ) {
foreach ( $sidebars_widgets as $widget_area => &$widget_list ) {
if ( is_array( $widget_list ) ) {
$new_widget_list = array();
foreach ( $widget_list as $widget_id ) {
// 'text-1' ウィジェットを削除
if ( $widget_id !== 'text-1' ) {
$new_widget_list[] = $widget_id;
}
}
$widget_list = $new_widget_list;
}
}
}
}
return $sidebars_widgets;
}
add_filter( 'sidebars_widgets', 'remove_widget_from_sidebar' );
single()関数で対象を記事テンプレートに限定しています。対象は記事ページのコンテンツエリアです。特定の文字列パターンが一つでも含まれている場合に、text-1ウィジェットを削除するというコードです。
サンプルコードでは、msn.co.jp、yahoo.com、google.comをパターンとして設定しています。記事内にmsn.co.jpがあればパターンにマッチするので、text-1は出力されないという仕組みです。
パターンはASPごとに異なります。各ASPのアフィリエイトリンクを正規表現を使いパターンに登録します。
ウィジェットは一意のid属性を持っています。属性はブラウザのデベロップメントツールで特定できます。例えば次の画像だとHTMLウィジェットを使用しており、custom_html_3が対象のウィジェットです。
custom_html_3をサンプルコードのtext-1と置き換えます。
以上の作業でアフィリエイトリンクがある記事にだけ、対象のウィジェットを表示させる作業は完了です。
かんたお疲れさまでした。
②SWELLの独自フックの表示を限定する方法
記事内で紹介したswell_before_post_thumb、swell_before_post_headを条件付きで表示させる方法についてです。
かんたいくつかのパターンを紹介します。
「特定のカテゴリーの記事だけ」に広告を表示する方法
「レビュー」カテゴリーに属する記事だけに、広告を表示するといった場合のカスタマイズです。
カテゴリー構成
| カテゴリー名 | レビュー |
| スラッグ | review |
コード
function kanta_show_ad(){
if ( in_category('カテゴリースラッグ') ) {
// 処理内容 //
}
}
add_filter( 'swell_before_post_head', 'kanta_show_ad' );コードのカテゴリースラッグ部分を置き換えて使います。カテゴリースラッグがreviewの場合は次のとおりです↓
コード
function kanta_show_ad(){
if ( in_category('review') ) {
// 処理内容 //
}
}
add_filter( 'swell_before_post_head', 'kanta_show_ad' );「特定のタグに属する記事だけ」に広告を表示する方法
「PR」タグの記事だけに、広告を表示するといった場合のカスタマイズです。
タグ構成
| タグ名 | PR |
| スラッグ | pr |
コード
function kanta_show_ad(){
if ( has_tag('スラッグ') ) {
// 処理内容 //
}
}
add_filter( 'swell_before_post_head', 'kanta_show_ad' );コードのスラッグ部分を置き換えて使います。スラッグがprの場合は次のとおりです↓
コード
function kanta_show_ad(){
if ( has_tag('pr') ) {
// 処理内容 //
}
}
add_filter( 'swell_before_post_head', 'kanta_show_ad' );「アフィリエイトリンクがある記事だけ」に広告を表示する方法
アフィリエイトリンクはASPごとに一定の文字列が含まれています。
例えばpx.a9.net/svt/ejp?的なフォーマットですよね？
自分が登録しているASPの文字列を登録しておき、記事内にアフィリエイトリンクがあるか判定し、リンクがあった場合のみフックを実行するというアプローチです。
サンプルコード
このコードはサンプル用のコードです。
このまま貼り付けても効果はありません。環境に合わせて書き換えてください。
①swell_before_post_thumで「PR」を表示するケース
function show_only_atnak_pr_exit() {
// 記事ページでのみ実行
if ( is_single() ) {
// コンテンツ内に特定の文字列が含まれているか確認
$patterns = array( 'msn.co.jp', 'yahoo.co.jp', 'google.com' );
$found = false;
foreach ( $patterns as $pattern ) {
if ( strpos( get_the_content(), $pattern ) !== false ) {
$found = true;
break;
}
}
// 特定の文字列が見つかった場合
if ( $found ) {
// ここで実行したい処理
echo '<div class="show-ad">表示したい内容。例PRや広告など</div>';
}
}
}
add_filter( 'swell_before_post_thumb', 'show_only_atnak_pr_exit', 10, 1 );対象はコンテンツエリアです。ヘッダーやフッター、サイドバーなどに設置したバナー等は含みません。
コード内$patternsでASPのリンクを登録。コンテンツ内にマッチする文字列が１つでもあれば、フックを実行するコードです。
②swell_before_post_headで「PR」を表示するケース
swell_before_post_thumフックと仕組みは同じです。
function show_only_atnak_pr_exit() {
// 記事ページでのみ実行
if ( is_single() ) {
// コンテンツ内に特定の文字列が含まれているか確認
$patterns = array( 'msn.co.jp', 'yahoo.co.jp', 'google.com' );
$found = false;
foreach ( $patterns as $pattern ) {
if ( strpos( get_the_content(), $pattern ) !== false ) {
$found = true;
break;
}
}
// 特定の文字列が見つかった場合
if ( $found ) {
// ここで実行したい処理
echo '<div class="show-ad">表示したい内容。例PRや広告など</div>';
}
}
}
add_filter( 'swell_before_post_head', 'show_only_atnak_pr_exit', 10, 1 );③swell_parts_post_thumbnailで「PR」を表示するケース
swell_before_post_thum、swell_before_post_thumフックと仕組みは同じです。
function show_pr_atnakthumbnail($return, $post_id) {
// 記事ページでのみ実行
if ( is_single() ) {
// コンテンツ内に特定の文字列が含まれているか確認
$patterns = array( 'msn.co.jp', 'yahoo.co.jp', 'google.com' );
$found = false;
foreach ( $patterns as $pattern ) {
if ( strpos( get_the_content(), $pattern ) !== false ) {
$found = true;
break;
}
}
// 特定の文字列が見つかった場合
if ( $found ) {
$thumb = \SWELL_Theme::get_thumbnail( [
'post_id' => $post_id,
'class' => 'p-articleThumb__img',
'lazy_type' => apply_filters( 'swell_post_thumbnail_lazy_off', true ) ? 'none' : \SWELL_Theme::$lazy_type,
'use_noimg' => is_single() && \SWELL_Theme::get_setting('show_noimg_thumb'),
'sizes' => '(min-width: 960px) 960px, 100vw',
]);
$caption = get_post_meta( $post_id, 'swell_meta_thumb_caption', true ) ?: '';
if ( $caption ) {
$caption = '<figcaption class="p-articleThumb__caption">' . wp_kses( $caption, \SWELL_Theme::$allowed_text_html ) . '</figcaption>';
}
if ( $thumb ) {
$return = '<figure class="p-articleThumb"><div class="kanta-show-pr-label">PR</div>' . $thumb . $caption . '</figure>';
}
}
}
return $return;
}
add_filter('swell_parts_post_thumbnail', 'show_pr_atnakthumbnail', 10, 2);
【その他】JavaScriptを使ったカスタマイズ
SWELLのカスタマイズで有名なブロガーさん、クロード鰥夫さんをご存じでしょうか？名前を聞いたことがない人でも、ポイビューを目にしたことがある人は多いかと思います。
オシャレかつ素晴らしく実用的なカスタマイズを紹介している記事です↓
ステマ規制対策をしないとどうなるの？
ステマ規制の違反についてです。消費者庁や都道府県による措置命令や行政処分の対象となるのは広告主です。アフィリエイト記事を公開した広告主とは異なる外部のメディアは、この法律の対象者ではありません。
消費者庁販売目的のため、外部の人にステマ記事を書かせましたね！
是正しなさい！
広告主えー、私はASPに頼んだだけなのに！
ブロガー記事を公開したボクはセーフなのかな？
ブロガーはASPから「強制退会」となるリスクがある
PRなど必要な表記をしなかった場合に、ブロガーは「ノーダメージ」で済むのか？ステマ規制が施工される2023年10月1日以降に、「PR・広告」などをアフィリエイト記事に記載しなかった場合に何が起きるかを想定します。
ASPからの強制退場
すばりこれです。ASPからすると広告主は大事なお客様です。ステマ規制違反で広告主に迷惑をかける悪質なブロガーを放置はしません。ASPの信用、もっと分かりやすく言えばASPの収益に影響が出ますからね。
事実、ASPの一部はステマ規制の施行される2023年10月1日に合わせてブロガー向けに利用規約を改定しています。例えばASPの大手A8.netでは次の規約が追加されています↓
新設:メディア向け利用規約
引用元：A8.netメディア会員利用規約改定のお知らせ
1.1.6 義務⑥：PR表記等（原則）広告配信に際するメディアサイト内への「PR」等の表記の実施。
※ユーザーをして広告であることが認識できるよう、分かりやすい位置でなければならない。
共通規約には次の規約があります↓
メディア向け利用規約（強制退会）
引用元：A8.net メディア会員利用規約
9.2.2 法令違反行為が認められる場合。
メディア向け利用規約（強制退会）
引用元：A8.net メディア会員利用規約
9.2.3 強制退会事由：禁止行為違反。
新たに導入された1.1.6の規定に従わない場合、ASPの判断によって強制的な退会措置が適用される条項となっています。
特に、ステマ規制対策をしないメディア運営者が原因で広告主に指導が入るような場合は、ASPから強制退会となるリスクがものすごく高くなると容易に想像できます。
消費者庁この記事はステマですね。
〇〇会社さん、違反していますよ！
広告主え、ユーザーが勝手に書いただけなのに…
ASPの担当者さん、どうなってるの？この記事のせいで消費者庁から指導が入ったんだけど（怒）
ASP申し訳ありません。この記事を書いたユーザーに指導します。
（この記事書いたユーザーは強制退会だ!）
ブロガーえ、強制退会？
収益も没収されるの（涙）？
FAQ
ステマ規制法に関するFAQです。
ステマ法が施工されるのはいつですか？
2023年10月1日です。
ステマ規制法に関する公式な資料を公開しているサイトは？
消費者庁のHPにステマ規制法に関する公式資料が掲載されています。
アフィリエイトブログはステマ規制の対象ですか？
規制の対象です。
規制の対象となるアフィリエイト記事はステマ規制法の施工後に公開されたものだけでしょうか？
いいえ。
ステマ規制法施工前に公開されたアフィリエイト記事も全て対象になります。
アフィリエイトブログの運営者はステマ規制の罰則対象でしょうか？
ブログ運営者が商品やサービスの販売を行っている企業でなければステマ規制法罰則の対象ではありません。
ステマ規制法違反の対象となるのは、商品・サービスを供給する事業者(広告主)です。アフィリエイトブログ運営者ではありません。
以下、消費者庁HPの抜粋です。
規制の対象となるのは、商品・サービスを供給する事業者(広告主)です。
企業から広告・宣伝の依頼を受けたインフルエンサー等の第三者は規制の対象とはなりません。
引用元：消費者庁「令和5年10月1日からステルスマーケティングは景品表示法違反となります。」
ステマ規制法に対応していないアフィリエイトブログを運営していると、どうなりますか？
アフィリエイトブログ運営者はASPから強制退会となる可能性があります。
各ASPごとに規約があり、強制退会、報酬の没収などがステマ規制法に合わせて追加されています。詳細は参加しているASP各社の利用規約・ステマ規制法対応といった情報をチェックしましょう。
articleやmainなど、コンテンツ要素内に文字を入れると、検索スニペットに使われてCTRが落ちませんか？
対策として「広告・PR」の出力コードにdata-nosnippet属性を付けましょう。data-nosnippet属性は指定した箇所をスニペットの対象から外す役割があります。
以下、Googleの公式情報の引用です↓
data-nosnippet HTML 属性の使用
引用元：Google検索セントラル
HTML ページのテキスト部分をスニペットとして使用しないように指定できます。
CSSの疑似要素で文章を表示したらどうですか？
適切な表記、表示位置である限りステマ規制法違反にはなりませんが、検索エンジンのポリシーを確認しましょう。
Google ウェブ検索のスパムに関するポリシー
引用元：Google検索セントラル
クローキングとは、検索ランキングを操作したりユーザーに誤解を与えたりすることを目的に、ユーザーと検索エンジンに異なるコンテンツを表示することです。
まとめ
2023年10月1日に施工されるステマ規制とその対策について紹介しました。
本記事ではWordPressテーマ「SWELL」のブログ記事に「広告・PR」など任意の文字を表記する方法をいくつか紹介しました。SWELL以外のWordPressテーマ利用者でも同様の対策が期日までに必要になります。
ステマ規制対応として、各ASPともに利用規約を変更しています。最新のものに確認し、ASP固有のものがあれば、必要な対応を行いましょう。
最後になりますが、必要な対応を行わないと自分だけでなく広告主に迷惑がかかるという点を忘れないでください。
大好きな商品で皆に知ってもらいたいという気持ちがあるなら、必ず期日までにステマ規制法に対する対応を行いましょう。
本記事は記事執筆時に利用可能な最新バージョンのWordPress（6.3.1）とSWELL（2.7.8.3）の情報です。異なるバージョンでは記事上で紹介している画像とは異なる場合があります。またコードが正常に動作しない場合がありますのでご注意ください。