ザ・ボディショップは、人権擁護・環境保護・動物実験反対の先駆けエシカルトレードを行っています。




賢威カスタマイズサイトの横幅・サイドバー・メインコンテンツ幅を変更しアドセンス設置

賢威横幅カスタマイズ

ブログを運営していると、個々の用途によって変更したいところがあります。
デザイン関係の記事が多く画像を大きく表現したい…とか…

この記事は、賢威で全体の横幅を広げ、ブログのサイドバーとメインコンテンツのそれぞれの横幅の設定とサイドバーにアドセンス広告(幅300~)を設定することを前提に解説します。

cssやphpを変更する場合、変更する指定位置を探すのが大変なので、右上の検索窓を出して探してください。
マックの場合 command+F
Windowsの場合 ctrl+F

横幅をカスタマイズ

賢威では1カラム・2カラム3カラムのレイアウトができますが、基本的な変更方法は同じなので、今回は多くの方が利用している2カラムのレイアウトでの横幅を変更をします。

ワードプレスのダッシュボード→外観→エディター(テーマの編集)→layout.css
pr161
【layout.css 画面での作業】

右上の検索窓を出し、そこに2カラムの場合 .col2r .copyright{ と入力し、画像赤枠の部分を探して下さい。

1カラムの場合は .col1 .copyright{
2カラムの場合は .col2r .copyright{
3カラムの場合は .col3r .copyright p{

上記のように検索して変更指定位置を探してください。

例)2カラムの場合

横幅カスタマイズ 賢威カスタマイズサイトの横幅 :950pxと表示されていて、その950pxがサイトの端から端まで100%となっています。

サイドバーとメインコンテンツの比率
サイドバー : 29.5%
メインコンテンツ :66.8%

サイドバーとメインコンテンツも横幅を変更したい時は、それぞれの比率(%)の変更をするのですが、数字の合計が100%を超えないように調整して横幅を変更します。

100%を超えてしまうと、サイドバーとメインコンテンツ部分が重なってしまいます。

アドセンスが設置できるように横幅変更

賢威のサイドバーにアドセンス(幅300)を設置するとき、横幅を変更しないとはみ出してしまいます。

サイト全体は変更しないでサイドバーとメインコンテンツを変更する場合

サイト幅950pxのサイドバー(29.5%)は280.25pxになるので、アドセンス広告レクタングル中(300×250)は設置できません。

設置するとはみ出してしまい見栄えが悪いですし、アドセンスの規約違反ですから、サイドバーとメインコンテンツの比率を変更しなければなりません。

お気づきかもしれませんが、サイドバー(29.5%)メインコンテンツ(66.8%)を加算しても100%になりません。

画面の出来上がりでサイドバーとメインコンテンツの接する部分に若干隙間があります。

その方が見栄えがいいからで、合計96.3%になっています。(差:100%から96.3%を引き3.7%)

その余白を考えると、サイドバー 31.6(300.20px)はアドセンスを設置するにあたって必ず必要な幅なので、100%から31.6%を差し引いた68.4%より小さい値にしなければなりません。

サイドバー:32% に見栄えを考えてメインコンテンツ:60%ぐらいになるのではないでしょうか。

サイト全体の横幅を変更する場合

私はサイト全体の横幅を変更したのですが、アドセンス広告のレクタングル中(300×250)、下がレクタングル大(336×280)を設置する場合、サイドバーを340pxにできる比率にしたいですね。

横幅の変更例
1000pxにした場合 サイドバー295px  レクタングル中 ☓ ・ レクタングル大 ☓
1100pxにした場合 サイドバー324px  レクタングル中 ◯ ・ レクタングル大 ☓
1200pxにした場合 サイドバー354px  レクタングル中 ◯ ・ レクタングル大 ◯

私は横幅1170pxにしました。 サイドバー:345.15px

上記画像の「サイトの横幅」という数字を 1170 と変更して終了!

横幅が336pxのレクタングル大でもサイドバーのアドセンス広告がきれいに設置されました。

※デザイン上、のちに再度変更 レクタングル中(300×250)
横幅1170px・サイドバー26%・メインコンテンツ71.5%

アドセンス広告の定番設置位置のように扱われているサイドバー上部よりも、記事に埋め込んだ方がクリック率が上がるということがあります。

クリック率に関してはサイトのデザインや誘導によって人それぞれですので、いろいろ試してみるといいですね。



SPONSORED LINK


サブコンテンツ