アドセンスの設置方法は前に紹介した記事で紹介しました。
今回はアフィンガー５でアドセンスを横並びにする方法について紹介していきます。
アドセンスを横並びにする方法
アドセンスを横並びに設置するには
- サイトの幅を変更
- レイアウトを左右に分割
この２つの作業を行うだけで誰でも簡単にできます。
それでは実際にやってみましょう。
ポイント
【準備中】まだアドセンスのコードを設定していない場合は別記事でやり方を紹介していますので、先にそちらをご覧になってください。
サイトの幅を変更
まずはじめにサイトの幅を変更する必要があります。
アフィンガー５の初期設定ではサイトの幅が1060pxに設定されているんですが、このままアドセンスを横並びにしてしまうと広告のデザインが崩れ、表示がおかしくなってしまうので、先にサイトの幅を広げましょう。
AFFINGER5 管理の『デザイン』タブから『サイト全体のレイアウト一括設定』で『PC閲覧時のサイトの幅』を1114pxと入力します。
この1114pxがアドセンスを横並びにするために必要な幅になりますので、忘れずに設定しておきましょう。
(1114px以上のサイズであれば問題ありません)
レイアウトを左右に分割
次に記事のレイアウトを左右に二分割します。
記事を分割するといってもアドセンスを設置する箇所だけで、記事全体を分割するわけではないのでご安心を。
投稿編集画面の『タグ』から『レイアウト』を選び、『PCとTab左右50％』か『全サイズ左右50％』どちらかを選択します。
そうすると左右に色分けされたボックスが表示されますので、両方のボックスにアドセンスのショートコードを貼り付けましょう。
アドセンスのショートコードは『タグ』から『その他パーツ』を選び、『adsense』を選択するだけで簡単に設置することができます。
（adsenseと直接入力でも同様に設置ができます）
記事下に自動でアドセンスを横並び
アドセンスを横並びにする方法は先ほど紹介したとおりですが、記事に毎回アドセンスを設置するのも手間になってきます。
そこで記事下にアドセンスを横並びにする方法も同時にご紹介していきましょう。
AFFINGER5管理で設定
AFFINGER5 管理を開き投稿・固定記事タブをクリック。
投稿・固定記事設定にある『PC閲覧時に記事下のアドセンス広告を横並びにする』にチェックを入れるだけです。
※「PC閲覧時のサイトの幅」を1114px以上に設定して下さいと表示されていますが、さきほどサイトの幅を設定しましたので、改めて設定する必要はありません。
チェックを入れたら『SAVE』をするのを忘れないでください。
ウィジェットの『Googleアドセンス用336px(B)』にもアドセンスコードを設置
記事下に自動でアドセンスを表示させるには『Googleアドセンス用336px(A)』と『Googleアドセンス用336px(B)』の両方にアドセンスコードを設置する必要があります。
片方だけだと横並びにすることができません。
設定はこれだけです。
それでは実際に記事下にアドセンスが横並びになっているか確かめてみましょう。
新しく記事を更新するたびにこのように横並びで表示されるようになっているので、手間が省けるというものです。
アフィンガー５でアドセンスを横並びにするメリット
ウインドウを最大まで広げアドセンスを１つだけ設置したとき右側に空白ができてしまいます。
せっかく記事を作成しアドセンスを設置したのに空白のスペースがあると気になりますよね。
さきほど紹介した方法を使用することでアドセンスを２つ横並びにできます。
複数の広告を横並びに表示させることができる上に、多くの広告を訪問者に見せることができるので収益アップも間違いなし！？
このようにアドセンスを横並びにすることによって右側の空白がきれいに埋まり、見た目が良くなります。
アドセンスの横並びは必須ではないけれど見た目がキレイ
誤解のないように申し上げると、アドセンスを左右に設置したからといって収益が上がる保証はありません。
アドセンスは必ずしも左右に設置する必要性はなく、片方だけ表示させても収益は発生します。
広告を左右同時に表示させることによって、均等に広告が表示され見た目も良くなりますので、今までやり方が分からなかったという方はこの機会に試してみてはいかがでしょうか。