ワードプレスの無料テーマCocoonを使っている人向けに、関連記事の表示制御方法を紹介したい。パソコンとモバイルで、それぞれ表示したい関連記事の数をレスポンシブにコントロールできる。
ついでに関連記事の見た目をアドセンスの関連コンテンツに見せかけるやり方も説明。しかしグーグルの規約を調べると、これはややグレーな方法だとわかった。
広告まわりのCSSを上書きするのは、ルール違反になる可能性がある。ご利用は自己責任でお願いします。
（2020年1月23日更新）
関連コンテンツの挙動が変
アドセンスの関連コンテンツをようやくアンロックできたが、いまいち使い勝手の悪いところがある。
悪名高い「自動広告」ほどではないが、関連記事としてオススメしてくる内容がひどい。
ジャンルやカテゴリーが記事内容にそぐわないだけではない。自分でも忘れていたような、まったくアクセスのないゴミ記事を拾ってきたりする。
「どんな記事を出せばユーザーにウケるか」という、気の長い機械学習が行われているようだ。導入してから1年経っても、学習が進んだりクリック率や売上が増えたりする傾向は一向に見られなかった。
どうも自分でクオリティーに自信のある記事と、グーグルが好む記事は違うらしい。これはこれでおもしろいが、読者に好まれる記事もまた別だから話がややこしい。
とにかく反映に時間がかかる
アドセンスに追加された「関連コンテンツのサイト設定」を手動でいじってみたが、反応されるまで数週間かかる。実際効いているのかどうかも定かでない。
記事をリライトしてタイトルやサムネール画像を変えても、キャッシュが更新されるまでまた何日もかかってしまう。
とにかく設定変更に時間がかかるのが、関連コンテンツの悩みどころだ。
コクーン関連記事の併用案
それでも他の広告ユニットより売り上げに貢献していることは確かなので、関連コンテンツは外せない。
対策としてWordPressのテーマに備わっている関連記事を合わせて出す方法が考えられる。
いまお世話になっている無料テーマCocoonの場合、関連記事の表示タイプや表示数、スニペットや投稿日表示の有無など、わりと細かく見た目を制御できる。
Cocoonの関連記事設定
テーマ側の関連記事はランダムに出るが、カテゴリーとタグで関連性をそろえることができる。
アドセンスの関連コンテンツに出る記事とかぶることもあるが、Cocoonの関連記事を同時に出せば最低限の文脈は保てる。
関連コンテンツは広告込みなうえ、どんな記事が紹介されてくるか予想がつかない。
読者の立場になって考えれば、確実に同一カテゴリー/タグの記事をレコメンドしてくれる関連記事の方が有益なはずだ。
関連コンテンツのカスタム方法
2つの関連記事とコンテンツユニットを並列表示する場合、見た目がちぐはぐなのはちょっと気になってしまう。
最近はアドセンス側の関連コンテンツをデフォルトの”image_sidebyside“から”image_card_stacked“に変更している。
この部分はソースコード内のdata-matched-content-ui-typeというパラメーターをいじれば変更できる。
初期設定のままだとスマホ表示の際、ユニットの一番上に大き目の広告が出てしまうのが気になっていた。
“image_card_stacked”に変えると、いわゆるマテリアルデザイン風の見た目になる。これは別のWordPressテーマ、SANGOのルックスと相性がいいことでも知られている。
このカスタム技はグーグルが公式に認めている方法なので、コードをいじってもまったく問題ない部分だ。
関連記事のカード配置案
アドセンス関連コンテンツの表示をカード風にした場合、Cocoonの関連記事で見た目が似ているのは「縦列カード3列」もしくは「縦列カード4列」。
しかし縦列カードには「推奨表示数」がある。中途半端な値をセットすると歯抜けになって中寄せされたり、マヌケな余白ができたりしてしまう。
ここで悩ましいのは、スマホとパソコン画面で最適な広告タイル数が異なるという点だ。
関連コンテンツ“image_card_stacked”に設定した場合、個人的には以下のレイアウトが最適に思われる。
- スマホ…縦2列×横3～4行（表示記事数6～8）
- パソコン…縦3列×横2～3行（表示記事数6～9）
こうすると各記事カードの表示サイズが自然に見える。表示する総数も6～9個くらいが多すぎない限度だと思う。
レスポンシブ対応のコード記述法
この2パターンのレイアウトをスマートに実装するには、AdSenseヘルプで「レスポンシブ対応サイト」と紹介されているテクニックが役に立つ。
行列数とUIタイプを以下のように記述すれば、上記の関連コンテンツ配置を狙って実現できる。
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxx"
data-ad-slot="1234567890"
data-matched-content-rows-num="3,2"
data-matched-content-columns-num="2,3"
data-matched-content-ui-type="image_card_stacked,image_card_stacked"
data-ad-format="autorelaxed">
</ins>
行列の要素数は「モバイル, パソコン」の順番になる。
上記のようにcolumns-num=”2, 3”、rows-num=”3, 2”と書いた場合、
- スマホ…縦2列×横3行
- パソコン…縦3列×横2行
と解釈される。
これを知るまではパソコン用とスマホ用に2種類のコードを用意して、ウィジェットのテキスト（PC/モバイル用）を使い分けていた。
しかしグーグルの公式マニュアルをもとに両者を1つのコードにまとめられることがわかり、WordPress側のウィジェットは「カスタムHTML」ひとつで間に合うようになった。
Cocoon関連記事の微調整
カード型の関連コンテンツは目標どおりに表示できるようになった。次に難しいのは「Cocoon側の関連記事を何個出すか」という問題だ。
たとえば「縦列カード3列」を選んだ場合、表示数6だと2×3、3×2でスマホにもパソコンにも隙間なくフィットする。
しかしアドセンス側の関連コンテンツと並置する場合、テーマ側の関連記事が6個もあると数が多すぎる。理想的にはPC3個・モバイル2個で、それぞれ1行ぴったりに収まるようにしたい。
しかしCocoonの関連記事設定に、スマホとパソコンで表示数を切り替える機能までは用意されていない。
そこで見た目の統一感を捨てて「ミニカード2個」に設定する手もある。
アドセンスとは異なる横長のカードになってしまうが、とりあえずこれならスマホ・パソコンとも変な余白はできない。
CSSで関連記事の表示数制御
次に思いついたのがCSSで表示数を切り替える方法。
ソースコードを調べて以下のようにスタイルシートを追記したら、スマホ2個・パソコン3個の表示数切り替えを実現できた。
/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/
.related-list a:nth-child(3) {
display: none;
}
}要は単純に「画面幅480以下のスマホに対しては3番目の関連記事カード（aタグ）を非表示にする」というやり方だ。
カードの影、余白調整
さらにアドセンスが生成する関連コンテンツのソースコードを分析してCSSをマネすれば、関連記事カードの見た目を限りなく広告に似せることができる。
.recb-entry-border .related-entry-card-wrap {
border: none;
box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.12),
0px 2px 4px 0px rgba(0,0,0,0.26);
}こんな感じでカードの縁取りとシャドウの設定はOK。
ついでにカード内のフォントサイズや余白を微調整すれば、両者の見分けがつかないくらいに改良できる。
そして上下の余白を詰めれば、テーマ側の関連記事カードをアドセンス関連コンテンツとほぼ合体できる。
上段：アドセンス関連コンテンツ、下段：コクーン関連記事
画像左上のカテゴリー名を非表示にして、カード下側にサイトのURLが出るように編集すれば、見た目はさらになじむ。
理論上は両者の見た目を完全に一致させることも不可能ではないと思う。
広告ユニット自体を加工する
ものすごく細かい点だが、関連コンテンツのブロック下側に余白がないため、カードの影が途中で切れている。
目を凝らして比べると、関連コンテンツ1行目より最終行のカード下側の影が薄い。そのため下側に置いた関連記事との間に、不自然なギャップができてしまう。
これを解消するにはアドセンスの生成するコード自体にCSSで手を加えるしかない。
やることはdivタグ下側のpadding数値を増やすだけ。これで影は下まで正しく表示される。
しかしここで思い出すのが、AdSenseコードの改変はGoogleのポリシー違反に該当するという懸念だ。
公式サイトで「禁止されているコードの改変方法」として、display:noneで広告ユニットを隠すのはNGとされている。さすがにこれはあからさまな違反だが、広告ユニットのCSSを上書きすること自体がリスクともみなせる。
たとえpaddingを増やして余白を広げるような加工でさえ、万が一グーグルからペナルティーを受ければ損害は馬鹿にならない。
広告に似せること自体NG
いろいろ考えると「関連記事を関連コンテンツになじませよう」という発想自体が、そもそもポリシー違反になるおそれがある。
あらためて公式サイトを調べたところ「広告に似せたコンテンツはダメ」と明記されていた。
Google 広告を紛らわしい方法で掲載することは禁止されています。これには、広告付近のコンテンツを広告フォーマットに似せることも含まれます。
（…中略…）
以下の例では、コンテンツのフォーマットが広告とよく似ており、区別することが難しい状態です。このような配置方法は許可されません。
その下に「許可されない配置方法の例」として具体例が挙げられている。これはビジュアル的にもわかりやすい。
関連コンテンツについても微妙
関連コンテンツは普通のディスプレイ広告とは違うが、その下に似たような関連記事を寄せるのはグレーだ。
両者の間に十分な余白を取ったとしても、Googleがどう判断するかはまったく読めない。
さわらぬ神にたたりなし。アドセンスの広告ユニットは下手に「なじませよう」などと考えず、脈絡もなく唐突に「広告です！」と際立たせるくらいでちょうどよい。
デザイン上、統一感が必要なサイトなら、そもそもアドセンス広告など置かなければいい。コンセプトからして、どこか間違っている。
結局アドセンスだけに戻した
関連コンテンツでレコメンドされる記事を見ていると、年月が経ってようやくまともになってきたように感じる。
同じカテゴリーに属する記事、あるいは別カテゴリーでも内容の近い記事を選んで引っ張って来るようになった。2年以上の学習期間を経て、ようやく知恵がついたように思われる。
すると自前の関連記事など追加しなくても、アドセンスの関連コンテンツを置いておけば十分ということになる。
→やはり関連コンテンツは当てにならないので、自前の関連記事も出すようにした。
どうしても出したくない記事があれば、公式の「ブロックリスト」でURLを除外すればいいだけだ。
そもそも読んでほしくない記事など公開しないのが得策。雑記ブログの場合、小手先のテクニックでブランディングすることなど、はなから難しい。
広告コードをいじるのは危険
関連コンテンツ内のタイトル見出しは太字しか選べない。ほかにも微調整したい部分はいくつかある。
しかしCSSで広告の見た目をいじるのはこわい。「ここはCMタイム」と割り切って、そのまま表示するのが安全だ。
とりあえずCocoonの関連記事はいっさい出さない方針にしてみた。
「スタイルシートをいじってアドセンスに似せる」というのは徒労に終わったが、地雷を踏む前に地雷と気づいてよかった。
ネットに情報がない理由
この手のノウハウについてネットに情報がないので不自然に思った。どうやら規約違反が見え見えなので、あえて誰も触れていないようだ。
たまに「CSSでアドセンス広告を編集する」といった内容の記事を見かけるが、自分と同じで規約を正しく理解していないおそれがある。
初心者は安易にマネしないよう気をつけた方がいい。Googleに直接問い合わせて確認したわけではないが、この記事で紹介した小ネタも怪しげなものだ。
CSSを駆使すればAdSense広告ユニットの中身もかなりいじれる。あくまで「そういうやり方もある」くらいに覚えておけば十分だと思う。