【賢威8カスタマイズ】きれいにインフィード広告を表示する!|超初心者向け完全版!

賢威8できれいにGoogleアドセンスのインフィード広告を貼る方法を、超初心者向けに解説します。

CSSファイルやPHPファイルを直接いじる必要はありません!

小難しい解説サイトを見て、頭を痛める必要もありません!笑

HTMLの知識がほぼゼロの私が成功したやり方です。

こんな感じになります!

【デスクトップ画面】

 

【スマホ画面(ちなみにi-Phoneです)】

プログラムの知識ゼロでも、そこそこ違和感無くまぎれ込ませることができました。

それでは順番に説明していきます!

青葉

他にもやり方はあると思いますが・・・
このやり方で誰でも確実にできます!
それだけは間違いないです笑

Googleアドセンスで広告ユニットを作る

まず、広告ユニットを作成します。

Googleアドセンスにログインして、『広告』→『サマリー』→『広告ユニットごと』から、『インフィード広告』の作成を始めましょう。

気を付けることは、デスクトップ用とスマホ用にそれぞれ作成する必要がある、ということです。

 

『手動で広告スタイルを作成する』を選択

次の画面です。

『手動で広告スタイルを作成する』を選びます。

次に、スタイルを選択するのですが、スマホ用は『上部の画像』、デスクトップ用は『横の画像』を選びます。

あなたの賢威の画面設定によって、どれを選ぶかは変わってきますが、私と同じような画面設定であれば、これで大丈夫です。

とりあえず、デスクトップの方で話を進めます。(デスクトップの方は若干画像調整が必要なので)

広告ユニットに名前をつける

次の画面です。

とりあえず適当に広告ユニットに名前をつけましょう。

それからグローバルオプションに進みます。

 

『グローバルオプション』の設定

こちらがグローバルオプションの画面です。

ここでは、『パディング』(余白の調整)を画像の通り入力してください。左から、20-10-20-22です。

この数値通りにしておけば、元々の画面の余白サイズとぴったり合って、見栄えがよくなります。

青葉

私が試行錯誤繰り返して、やっと見つけた貴重な数値です笑

もしこの通りにやってみて、あなたのサイトで違和感があるようでしたら、数字を変えて調整すればOKです。

パディング以外のところは、変更しなくても大丈夫です。私の場合は、あんまり広告だらけになるのもイヤなので、ディスプレイ広告の許可を切ってます。そこはあなたの好みですね。

『イメージ』の調整

次に『イメージ』を調整します。

これはインフィード広告に表示される画像の調整です。

私がいろいろ試して、ちょうどよかったのが下記画像の数値になります。

この通り入力してみてください。

もしあなたの賢威画面とズレているようであれば、ここでいろいろ試して調整してみてください。

『見出し』の調整

次は『見出し』の調整です。

これはインフィード広告の見出しタイトルです。

フォントサイズなんかは、人それぞれの調整になるのですが、誰しも共通で設定すべきなのは「フォントをボールドにすること」くらいです。パディングもデフォルト値の0-0-10-0で問題ありませんでした。

他の部分は、とりあえず私と同じ設定してみて、後であなた自身のサイトの画面を見ながら調整すればOKです。

『説明』の調整

次に『説明』です。

私はフォントサイズを14に変えただけで、他はデフォルトのままです。

『ボタン』の色調整

『URL』は放置して、最後に『ボタン』の色調整です。これはお好みによりけりです。

私の場合は、ボタンのフォント色と枠線色を変更しました。

その理由は、記事一覧のボタンと色を合わせたかったからです。気持ちカモフラージュです笑

 

以上で、デスクトップ用の広告ユニットの作成は完了です。

後は『保存してコードを取得』ボタンを押せば、広告コードが現れます。

一度広告ユニットを作成して保存しておけば、コードはいつでも表示できます。

 

スマホ用の広告ユニットは、画像位置の選択が違うだけで、他はデスクトップと同じです。

同様に名前を付けて、必要に応じてフォントサイズ等を調整して(調整は後でもいいです)、広告コードを作ってください。

ここまでの作業で、あなたは「デスクトップ用広告コード」と「スマホ用広告コード」の2つを手にしたことになります。

では次の作業に移ります。

プラグイン『Ad Inserter』を導入する

まずは広告配置専用プラグイン『Ad Inserter』を入れてください。

私もまだ使い始めたばかりですが、かなりの優れもののようです。その辺はネットで調べてください笑

 

はい、導入終わりましたか?

ではいきなり設定画面に移動します。

青葉

Ad Inserterの説明は省きます!
やるべきことだけ説明しますね

デスクトップ用広告の設定

まずはデスクトップ用の設定から。

この図の手順通りに設定を進めてください。これでわかるはず笑

「⑦インフィード広告をはさみたい記事の順番を入力」は、ズラッと並んだ記事のどこにインフィード広告を挟み込むかを設定する場所です。

私は1番目、4番目、7番目にしたので、「1,4,7」と半角入力しています。

これで広告が「1番目の記事の下、4番目の記事の下、7番目の記事の下」に表示されるようになります。

上の方がクリック率高めなので、上の方を厚めに置いてます。

 

「⑩サイズ調整」については、プレビュー画面で、下記画像と同じ数字を入力してください。

スマホ用広告の設定

では次、スマホ用です!

上記のデスクトップ用手順との違いだけ説明します。

デスクトップ用手順と違うところ

①2のタブを選ぶ
③スマホ用広告コードをここにコピペ
Phoneにチェック
⑩サイズ調整(下記プレビュー画面参照)

他の手順はデスクトップと同じです!

ここまでで、あなたのサイトにインフィード広告が表示されているはずです。

では最後の一仕事行きましょう!

賢威アイキャッチ画像のサイズ変更

アイキャッチ画像の縦横比率を、インフィード広告の画像と合わせることによって、さらに見栄えがよくなります。

インフィード広告の画像縦横比率は「横1.91 : 1.00です。

(正確に言えば、「横1.91:縦1.00」か「縦横1:1」が選べるようになっています。)

アイキャッチ画像をこの比率で作成して使用してください。

青葉

過去のアイキャッチ画像・・・
作り直すのめんどくさい・・・笑

Before

After

青葉

よーーーく見ると、微妙にサイズが違う気もしますが・・・
まあよかろう笑

これですべて完了です!!

スマホのサイズは、私の場合何もしなくても違和感ありませんでした。

さすが賢威!?笑

青葉

私の賢威設定では、このやり方できれいに表示できるようになりましたが、
もしうまくいかない場合はサイズ調整を自力でやってみてください!簡単簡単!
次はコンテナの高さも合わせたいなぁ