【SWELL】ステマ規制対策・記事上部のタイトル（H1）下に「広告（あり）」文字などを表示する方法

ブログ・アフィリエイトでは記事に「広告」と表記するよう求められる時代になってきました。

「広告」表示のサンプル

本記事では、SWELLの利用をターゲットとして、SWELL標準機能を利用したケース、CSS または、JavaScript で自作したケースを紹介します。

SWELL標準機能を利用する

SWELLでは、ver. 2.7.9 以降、広告表記に対する機能が標準で実装されました。

WordPress の管理画面から「外観」→「カスタマイズ」→「投稿・固定ページ」→「PR表記」を選択します。

超簡単ですね。

また、カテゴリーページやタグページにも設定することが可能です。

カテゴリーやタグの編集ページ（WordPress の管理画面から「投稿」→「カテゴリー」または「タグ」）を選択します。

「PR表記をページに表示するかどうか」をONにすると、「PR表記（大）」で設定した文言を表示します。

CSS で自作する

CSS で自作するケースです。簡単なのがメリットです。

■ 登録日（日時）の右に表示するケース

CSS で実現します。WordPress の管理画面から「外観」→「テーマファイルエディター」を選択します。

設置するコードは以下です。

.p-articleMetas::after {
    content: "（ ページ内にてアフィリエイト広告を利用しています ）";
}

JavaScript で自作する

JavaScript で自作するケースです。表示する文言を変更できることと、タイトルの下に表示できることがメリットです。代わりに JavaScript を使いますので実装が面倒であるのがデメリットです。

■ 登録日（日時）の下に表示するケース

JavaScript で実現します。JavaScript は functions.php にてサイト記事に自動追記するように用意します。

WordPress の管理画面から「外観」→「テーマファイルエディター」を選択します。

設置するコードは以下です。

//------------------------------------------------------
// 広告明記
//------------------------------------------------------
function insert_custom_ad_below_h1() {
    if (is_single()) {
        ?>
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                var h1Tag = document.querySelector('.p-articleMetas');

                if (h1Tag) {
                    // 新しい広告要素を作成
                    var adElement = document.createElement('div');
                    adElement.textContent = '（記事内に広告を表示しています）';

                    // スタイルを適用
                    adElement.style.fontSize = 'smaller';
                    // adElement.style.color = 'red';

                    // 直後に広告要素を挿入
                    h1Tag.insertAdjacentElement('afterend', adElement);
                }
            });
        </script>
        <?php
    }
}
add_action('wp_footer', 'insert_custom_ad_below_h1');

ポイントを解説します。

■ 登録日（日時）の右に表示するケース

同じくWordPress の管理画面から「外観」→「テーマファイルエディター」の「functions.php」に設定します。

設置するコードは以下です。

//------------------------------------------------------
// 広告明記
//------------------------------------------------------
function insert_custom_ad_below_targettag() {
    if (is_single()) {
        ?>
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                var targetTag = document.querySelector('.p-articleMetas__times');

                if (targetTag) {
                    // 新しい広告要素を作成
                    var adElement = document.createElement('div');
                    adElement.textContent = '（記事内広告あり）';

                    // スタイルを適用
                    // adElement.style.fontSize = 'smaller';
                    // adElement.style.color = 'red';

                    // 直後に広告要素を挿入
                    targetTag.insertAdjacentElement('afterend', adElement);
                }
            });
        </script>
        <?php
    }
}
add_action('wp_footer', 'insert_custom_ad_below_targettag');

ポイントを解説します。

■ タイトル直下に表示するケース

同じくWordPress の管理画面から「外観」→「テーマファイルエディター」の「functions.php」に設定します。

設置するコードは以下です。

//------------------------------------------------------
// 広告明記
//------------------------------------------------------
function insert_custom_ad_below_targettag() {
    if (is_single()) {
        ?>
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                var targetTag = document.querySelector('h1');

                if (targetTag) {
                    // H1タグの親要素を取得
                    var parentElement = targetTag.parentNode;

                    // 新しい広告要素を作成
                    var adElement = document.createElement('div');
                    adElement.textContent = '（記事内に広告を表示しています）';

                    // スタイルを適用
                    adElement.style.fontSize = 'smaller';
                    // adElement.style.color = 'red';

                    // 直後に広告要素を挿入
                    parentElement.insertAdjacentElement('afterend', adElement);
                }
            });
        </script>
        <?php
    }
}
add_action('wp_footer', 'insert_custom_ad_below_targettag');

 

ポイントを解説します。

まとめ：「広告（あり）」文字などを表示する方法

本記事では、タイトルタグ付近に「広告」などの文字を SWELL標準機能、CSS、JavaScript を用いて表示する方法を解説しました。主に表示する方法（場所）は３か所程度候補があります。

ぜひ、すてきなサイトを作ってくださいね。