【Volar2】の動作検証でキャプチャした画像は、基本的には【Volar2】の開発ベースになってる「ベーステンプレート」のレイアウトデザインが元になってます。
そのため他のテンプレート利用時には当サイトでご紹介しているキャプチャ画像とは若干異なる場合もあります。
また他のテンプレート利用時には場合によっては動作に多少の違いが生じる可能性もありますこと予めご了承ください。
バージョン1.12のアップデートで、2023年10月1日から施行されたステマ規制法案対策用の<PR表記>機能が追加されました。
有効化するだけでページのアタマに「PR」という文字列が表示されます。
ステマ(ステルスマーケティング)とは消費者に広告・宣伝と気付かれないように行われる広告や宣伝のことで、アフィリエイトサイトなどのアフィリエイトタグが付いた広告先へのリンクなども対象の一つです。
このステマ規制に違反しないためには(早い話がアフィリエイト広告を貼ってるページには)「広告」や「PR」や「プロモーション」など広告であることがわかる表示をはっきりと表示することが義務付けられるようになりました。
バージョン1.12で追加されたPR表記機能はこれを半自動で表記させる機能となっており、広告リンクを貼ってるページにはすみやかに有効化することをおススメします。
サイト内での「PR」の表示・非表示を制御しているのが【サイトオプション】→『全体設定』タブ→『PR表記』内の設定です。
①PR表記
まずはここの『PR表記』をONにします。
ここがOFFのままだとこのあとの個別設定で『PR表記』設定をONにしても表示はされません。
②トップページ
『PR表記』がONの状態で表示可能なのはトップページ以外のカテゴリーページやエントリーページ・独立ページのみ。
もしもトップページにも「PR」を表記させたい場合は『トップページ』もONにします。
③表示位置
「PR」表記は左端か右端かが選択可能。
(実際の表示は後ほどご紹介)
前述の全体設定で[PR表記]設定をONにしたら、(SIRIUS2編集画面左側の)サイト構成画面内の「PR」を表示させたい記事上で右クリック→「ページの設定」をクリックします。
[エントリーページ(個別ページ)の設定]画面が開くので『AMP・PR表示』タブをクリック→『PR表示』をクリックしてONにします。
これでフリースペース(メインカラム上段)の上に「PR」というテキストが表示されます。
(※この位置の変更は不可)
ご覧になってわかるようにページのアタマの方に小さく「PR」と表記するだけの機能で”ひっそりと表示”という印象が否めません。
場合によっては広告主やASP側から”表記不十分”との理由で提携解除を言い渡される可能性も少なからずあります。
そこでこの「PR」という表記を別のテキストに変更する方法をのちほどご紹介します。
「PR」を表示させたいページが大量にある場合は一括設定が便利です。
サイト構成画面内で右クリック→「PR表示の一括設定」をクリックします。
一括設定画面になるので「PR」を表記させたい記事にチェックを入れていきます。
ここでチェックしたページだけが「PR」と表記されます。
Shiftキーで連続選択、Ctrlキーで個別選択もできます。
「PR」表記ページが”大量”にある場合は一括設定で全ページにチェックを入れてから表記の必要のないページを除外するやり方の方が手間が省けます。
先ほどの一括設定画面上で右クリック→「全て選択」をクリックします。
ページ全体が選択状態になったら画面左上の「チェックを入れる」をクリックするか、一括設定画面上で右クリック→「チェックを入れる」をクリックします。
これでページ全体にチェックが入ります。
あとは「PR」表記対象外のページからチェックを外していけば短時間で設定できます。
そもそも「PR」という表記はどこで設定されてるのかと言えば、実はCSS内のスタイルなんですね。
(ステマ規制に間に合わせるよう取り急ぎ付けてみました感が…)
というわけで「PR」という文字を別の文章に変えるために以下のスタイルを【テンプレート】→【スタイルシート編集】→【ユーザー指定スタイル】にコピー&ペーストします。
/* PRテキスト */
div.Prtext_l::after,
div.Prtext_r::after{
content:"PR";
}
あとは赤文字の「PR」という文字を変えるだけです。
サンプルとして「当ブログはアフィリエイト広告を利用しています」に書き換えてみます。
/* PRテキスト */
div.Prtext_l::after,
div.Prtext_r::after{
content:"当ブログはアフィリエイト広告を利用しています";
}
その結果がこちら。
文字サイズを変更したい場合は文字サイズ用のスタイル(太字部分)を足して赤文字部分を変更します。
/* PRテキスト */
div.Prtext_l::after,
div.Prtext_r::after{
content:"当ブログはアフィリエイト広告を利用しています";
font-size:13px;
}