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

---

---

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

見たいメニューをクリックしてください。

＼AFFINGER でオシャレサイトを作る方法は こちら をクリックしてください／

「広告」表示のサンプル

本記事では、AFFINGER の標準機能で実現した場合と、CSS または、JavaScript で自作したケースの３通りの方法を紹介します。

AFFINGER 標準機能を使う場合

AFFINGER 標準機能での実現方法です。CSS や JavaScript を使わないので、簡単で安心です。

■ AFFINGER の標準ウィジェット（タイトル下）を使う

AFFINGER の標準ウィジェットを使うケースです。表示する文言を変更できることと、タイトルの下に表示できることがメリットです。

WordPress の管理画面から「外観」→「ウィジェット」を選択します。

テキストウィジェット、またはカスタムHTMLウィジェットを用いて表記します。カスタムHTMLウィジェットの場合、文字列の下にタグ <hr> を入れると図のように横線を引けるので、ワンポイントにもなります。

■ 「広告」表示（AFFINGER 標準）

AFFINGER 標準機能で「広告」文字を表示します。

WordPress の管理画面から「AFFINGER管理」→「Google・広告 / AMP」を選択します。

CSS を使う

CSS を使って簡単に表示することも可能です。ある程度狙いたい場所に表示できるメリットがあります。

■ 更新日時（登録日時）の右側に表示する場合

WordPress の管理画面から「外観」→「カスタマイズ」→「追加CSS」を選択します。

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

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

■ タイトル（H1）の下に表示する場合

WordPress の管理画面から「外観」→「カスタマイズ」→「追加CSS」を選択します。

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

body:not(.home) h1::after {
    content: "（ ページ内にてアフィリエイト広告を利用しています ）";
    display: block;
    font-size: 14px;
    margin-top: 5px;
    font-weight: normal;
}

ポイントを解説します。

JavaScript で自作する

JavaScript で自作するケースです。表示する文言を変更できることと、タイトルの下に表示できることがメリットです。

代わりに JavaScript を使いますので実装が面倒であるのがデメリットです。

■ 更新日時（登録日時）の右側に表示する場合

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

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

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

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

                if (targetTag) {
                    // 新しい広告要素を作成
                    var adElement = document.createElement('span');
                    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');

ポイントを解説します。

表示しているもの（一番右側）が更新日ではなく、登録日の場合も同じコードで動きます。

■ タイトル（H1）の下に表示する場合

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

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

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

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

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

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

ポイントを解説します。

AFFINGER のお役立ちテクニックはこちら

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

AFFINGERで記事上部に「広告」と文字表示する方法です。

表示するべきことは表示していきましょう。

AFFINGER の利用方法などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

WordPress のテーマ「AFFINGER」の情報、テクニック一覧はこちらをクリック！

Presented By Boon Boon Blog .Com

電気通信事業法改正に伴う表記