今回は、はてなブログで設置した「Googleアドセンス」を中央寄せで表示する方法を紹介します。
この方法を使えば、左右のバランスが取れたデザインになるのでぜひ試してみてください。
はじめに
皆さんはアドセンス広告設置していますか？私はPCページ・スマホページ共にアドセンスを設置しているのですが、スマホページのアドセンスだけ「中央寄せ」で表示しています。
簡単なコードを追加するだけで実装できるのでチェックしてみてください。
実際の動作
では実際に中央寄せにしたアドセンスを確認しましょう。
まずは、通常の左側に寄ったアドセンスをみてください。
表示自体に問題はないのですが、左側によってしまっていて左右のバランスがおかしいですよね。
サイトによっては「このレイアウトでいいよ！」って方もいると思いますが、私のブログでは中央寄せでアドセンスを表示させています。
こんな感じになりました。
いかがでしょうか。
左右の余白が均等になってバランスの取れたレイアウトになっていませんか？
実はこのようなカスタマイズは、すでに設定してあるアドセンスコードを維持しつつ簡単に実装できてしまうんです。
早速みていきましょう。
中央寄せにするコード
アドセンスを中央寄せにするコードはこちらだけです。
<center></center>
このようなタグを追加するだけでアドセンスの配置を中央寄せにできます。
すでにアドセンスを設置している場合、以下のように編集してみてください。
<center>
ここがアドセンスのコード
</center>
こんな感じで、アドセンスのコードを「<center>」で囲むだけで中央寄せにできてしまいます。
他にも「スポンサーリンク」のようなテキストも合わせて中央寄せにしたい場合は、同様の方法でcenter内に記述しておきましょう。
<center>
<p>スポンサーリンク</p>
アドセンスコード
</center>
こんな感じでどうでしょうか。
まとめ
今回紹介した「center」タグを使えば、はてなブログ内に表示させたアドセンスを、簡単に中央寄せで表示させることができました。
私はスマホ版のアドセンスだけを中央寄せにしていますが、PC版のアドセンスでも同様のコードを使うだけで中央寄せにできます。
サイトに合わせて調整してみてください。
ではまた。
