Simplicityは非常に使いやすいワードプレス無料テンプレートですので、私も多くのブログで使わせていただいています。ただ、アドセンスなどの広告(特にヘッダー)で横幅728pxや320pxのものは、Simplicityでは、端が切れてしまってきれいに全表示できないんです。
そこで、私のような初心者にも簡単にできるちょこっとカスタマイズの方法を考えてみました。
Simplicityデフォルトはメインカラムの幅が狭い
Simplicityのメインカラム(本文部分)の表示幅は、パソコンだと680px、スマホだと300pxとなっています。ですので、それ以下の幅サイズの広告はすんなりきれいにおさまりますが、それを超える幅のものは画面からはみ出してしまうか、広告の端っこが切れた状態で表示されてしまうんです。
アドセンスなどでは幅300pxのものやレスポンシブタイプを使用することができるので、あまり問題にはなりません。
Simplicityのメインカラム幅を広げるという方法もあるが
まず、Simplicityのメインカラムの幅を広げることを検討しましたが、いろいろ検索してみたところ、やや高度な技が必要なようです。PC表示板のメインカラム幅を広げるのはCSSの編集でできそうですが、そうするとスマホ版の表示がくずれてしまうみたいです。つまり、スマホ表示を別途指定しなくてはいけなくなります。
この時点で「私にはちょっと難しいかな」という雰囲気だったので、この方法は却下。
広告のマージンをHTMLで編集
そこで、広告のマージンをHTMLで広げることにしました。これなら、広告ウィジェットのテキスト部分に広告タグを挿入するとき、div styleを指定するだけでできることを確認しました。
広告のサイズと広げたい幅に合わせてマージンの値を変える必要がありますが、基本的には下の画像のような感じになります。
PC表示の場合
パソコン用広告ウィジェットを使い広告タグを挿入します。広告タグの前後に次のコードを加えると、728px幅の広告がきれいに表示されるはずです。
<div style=”margin-left : -24px; margin-right : -24px”>広告タグ</div>
スマホ表示の場合
モバイル用広告ウィジェットを使い広告タグを挿入します。広告タグの前後に下のコードを加えます。
<div style=”margin-left : -10px; margin-right : -10px”>広告タグ</div>
左マージンのピクセル指定も可能
ちなみにSimplicityの広告ウィジェットは、左マージンだけのピクセル指定ならウィジェットの下側に数字を書き込むだけで可能です。
左側の余白を小さくするには－の数字を記入すればOKです。ただし、ここをいじると「スポンサーリンク」というタイトルも連動して動きます。上に書いた方法だと広告本体だけを移動させることができます。
コメント