input[type=tel]{direction:ltr}.wpcf7-reflection>output{display:list-item;list-style:none}.wpcf7-reflection>output[hidden]{display:none}トップページブログの始め方ブログの収益化お問い合わせホームブログの収益化Googleアドセンス「関連コンテンツユニット」設置方法とデザインをカスタマイズする方法ブログの収益化TwitterFacebookはてブPocketLINEコピー2021.03.20Googleアドセンスの「関連コンテンツユニット」はご存じでしょうか。Googleが定めたアクセス数等の一定の条件をクリアしないと自分のサイトでは使うことができない、ちょっぴりレベル高めな広告ユニットです。この関連コンテンツユニットが使える方に向けて、使い方をご紹介いたします。「広告の設定」の「コンテンツ」メニューから「広告ユニット」を選んで「新しい広告ユニット」を選択します。新しい広告ユニットから「関連コンテンツ」を選択します。次にサイズ選択で「レスポンシブ」を選択し、「保存してコードを取得」を選択します。すると、以下のような広告用のソースコードが発行されます。[]).push({});</script>※ソースコード内の「xxxxxxxxxx」部分は、実際にはアカウントやソースコード毎に異なる数字が挿入されています。このソースコードを自身のサイトに埋め込むと以下のように表示されます。広告と自分のサイトのコンテンツがランダムに表示されるようになりました。広告サイズをレスポンシブで設定しているため、サイトの大きさによっては表示される広告や記事の数が異なることがありますが、画像のように表示されていれば正常に「関連コンテンツユニット」を埋め込むことが出来ています。ソースコードを発行したばかりで時間が経過していない場合は、ページに広告が表示されないことがあります。広告が表示されない場合は、20~30分程度時間をおいてから再度ページにアクセスしてください。\ヤッタネー/関連コンテンツのデザインを変更する方法さて、初めて関連コンテンツユニットを設置できると、設置できたことに満足してしまうかもしれません。ここで満足してしまうとせっかく掴んだチャンスを無駄にしてしまうかも。一つひと手間加えて、コンテンツのクリック率を一段階アップさせましょう。そのひと手間とはデザインを変更する作業です。次にご紹介する、追加のコードをそのままコピー&ペーストするだけでOK!早速試してみましょう。カードタイプ(影をつける)に変更する上記の画像のように、個々のリンクに枠と影をつけたカード形式のタイプに変更します。以下の3行のコードがカード形式に変更するためのコードになります。このコードをそのままコピーして、次に示す位置にペーストしてください。data-matched-content-columns-num="3"これを先ほど取得したソースコードに以下の位置に追記します。[]).push({});</script>これでカード形式に変更することができました。続いて、追記したコードについて解説いたします。data-matched-content-ui-type="image_card_stacked"上記のコードは「カード形式」のスタイルを指定するコードです。”image_card_stacked”の部分を変えると、後ほど記載する別のスタイルに変更することができます。次に、実際にコードを挿入したページを見ると“3行3列”のカード形式に変わっていると思います。部分を変更してください。data-matched-content-columns-num="3"「data-matched-content-rows-num」を変更すると行数が変えられます。「data-matched-content-columns-num」を変更すると列数が変えられます。パソコンとモバイルで表示する行列を分けることが可能です。あとに「,(カンマ)」を挟んで好みの数字を入れると、その数字がモバイルでの表示数となります。カンマで区切ると、カンマの前に入れた数字がパソコン、カンマの後に入れた数字がモバイルの指定となります。上記の例は「パソコンは3行3列、モバイルは2行2列で表示せよ」という意味のコードです。すると、テキストのみの表示に変更することができます。すると、テキストのみのカードタイプの表示に変更することができます。すると、画像とテキストを横並びにした表示に変更することができます。すると、画像とテキストを横並びにしつつ、カードタイプの表示に変更することができます。まとめ:関連コンテンツユニット今回ご紹介したコードを追記するだけで、簡単に自分のサイトにあったデザインに変更することが可能になります。サイトのデザインにうまく組み込むことができればクリック率も上昇するので、試行錯誤して上手に利用してみてください。今回ご紹介した方法はGoogleAdSenseの公式サイトでも紹介されている正規の変更方法です。AdSenseの広告コードは非正規の方法で変更するとポリシー違反となる場合がありますが、今回の変更方法はポリシー違反にはなりませんので、ご安心ください。【厳選】アフィリエイトASPまとめ!広告を貼って収益化をしよう!ブログを書いて収益が得られたら嬉しいですよね。ブログを運営して収益を得るためには、自分のブログに広告を貼り付けて、その対価として広告主から報酬を頂くのが一般的な方法です。@hauyashiブロガー2005年(高校1年生)からウェブサイト運営を楽しんでいる30歳です。サイトやブログの運営を独学で勉強すること15年。今はサイトよりブログの方が簡単に作れる時代なので、皆さんにブログ運営の楽しさを紹介できればと思い、このブログを立ち上げました。お役に立てたら嬉しいです。@hauyashiブロガー2005年(高校1年生)からウェブサイト運営を楽しんでいる30歳です。サイトやブログの運営を独学で勉強すること15年。今はサイトよりブログの方が簡単に作れる時代なので、皆さんにブログ運営の楽しさを紹介できればと思い、このブログを立ち上げました。お役に立てたら嬉しいです。t("").html(tocplus.visibility_show).text():default:t(this).html(tocplus.visibility_hide),t.cookie&&(o?t.cookie("tocplus_hidetoc","1",{expires:30,path:"/"}):t.cookie("tocplus_hidetoc",null,{path:"/"})),t("#toc_container").css("width",tocplus.width).removeClass("contracted"),t("ul.toc_list").show("fast")}})}}});タイトルとURLをコピーしました。