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

広告:ページ内にてアフィリエイト広告を利用しています。

タイトル下に広告文字を表示

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

ポイント

本記事では、

SWELLで記事上部に「広告」と文字表示する方法解説します。

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

本記事の内容が、景品表示法(ステマ規制)に対する対策を保証するものではありません。

ご自身の判断においてご利用ください。

SWELL おすすめサンプルページ
おしゃれサイト

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

目次
PR

「広告」表示のサンプル

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

ポイント

SWELL 標準機能を利用したケース

SWELL 標準機能で表示したケースです。

※表示文字は変更できます。

ポイント

CSS または、JavaScript で自作したケース

広告文字を表示したサンプル

JavaScript で自作したケースです。

登録日(日時)の下に「(記事内に広告を表示しています)」を表示しています。

※表示文字は変更できます。

SWELL標準機能を利用する

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

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

広告表記の設定
  • PR表記の自動挿入(投稿)を設定する
  • 表示タイプを設定する
  • PR表記の自動挿入(固定ページ)を設定する
  • 表示するテキストを設定する

超簡単ですね。

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

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

カテゴリーページやタグページへのPR表記の設定
  • 「PR表記をページに表示するかどうか」をONにします

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

CSS で自作する

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

■ 登録日(日時)の右に表示するケース

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

  • コードを設置する

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

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

JavaScript で自作する

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

■ 登録日(日時)の下に表示するケース

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

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

「テーマファイルエディター」画面
  • 「functions.php」を選択する
  • コードを設置する

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

//------------------------------------------------------
// 広告明記
//------------------------------------------------------
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');

ポイントを解説します。

  • 「is_single()」で投稿記事のみに限定しています
  • 「document.querySelector(‘.p-articleMetas‘);」でタイトル部分のメタ要素を取得します
  • p-articleMetas」がメタ要素のクラスです
  • 「adElement.textContent = ‘(記事内に広告を表示しています)’;」で表示する文言を指定します
  • 「targetTag.insertAdjacentElement」で <div>タグで文言を追加します
  • 「adElement.style.fontSize = ‘smaller’;」で文字を一回り小さくしています
  • 「add_action(‘wp_footer’」で JavaScript を記事に追加しています
ポイント

文字を赤く表示する場合は「adElement.style.color = ‘red’;」のコメントを外してください。

■ 登録日(日時)の右に表示するケース

ポイント

JavaScript で自作したケース

登録日右に広告文字を表示したサンプル

JavaScript で自作したケースです。

登録日(日時)の右に「(記事内広告あり)」を表示しています。

※表示文字は変更できます。

同じく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');

ポイントを解説します。

  • p-articleMetas__times」が「登録日」のクラス名です
  • adElement.style.fontSize = ‘smaller’;」をコメント化しているので文字が小さくなりません

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

ポイント

JavaScript で自作したケース

タイトル直下に広告文字を表示したサンプル

JavaScript で自作したケースです。

登録日(日時)の右に「(記事内に広告を表示しています)」を表示しています。

※表示文字は変更できます。

同じく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');

 

ポイントを解説します。

  • h1」タグをターゲットにしています
  • targetTag.parentNode;」で h1 タグ要素の親要素をターゲットにしています

PR

まとめ:「広告(あり)」文字などを表示する方法

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

ポイント
  • 登録日(日時)の下に表示する
  • 登録日(日時)の右に表示する
  • タイトル直下に表示する

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

SWELL おしゃれサイト作り方

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

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

PR

PR

一番上に戻る(Back to the initial position on click.)

トップページ(Home.)

PR
Amazon でお買い物
楽天市場でお買い物
広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

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

この記事が気に入ったら
フォローしてね!

目次