TOMOIKU*ブログ
4.52016
賢威カスタマイズサイトの横幅・サイドバー・メインコンテンツ幅を変更しアドセンス設置
ブログを運営していると、個々の用途によって変更したいところがあります。
デザイン関係の記事が多く画像を大きく表現したい…とか…
この記事は、賢威で全体の横幅を広げ、ブログのサイドバーとメインコンテンツのそれぞれの横幅の設定とサイドバーにアドセンス広告(幅300~)を設定することを前提に解説します。
※cssやphpを変更する場合、変更する指定位置を探すのが大変なので、右上の検索窓を出して探してください。
マックの場合 command+F
Windowsの場合 ctrl+F
横幅をカスタマイズ
賢威では1カラム・2カラム3カラムのレイアウトができますが、基本的な変更方法は同じなので、今回は多くの方が利用している2カラムのレイアウトでの横幅を変更をします。
ワードプレスのダッシュボード→外観→エディター(テーマの編集)→layout.css
【layout.css 画面での作業】
右上の検索窓を出し、そこに2カラムの場合 .col2r .copyright{ と入力し、画像赤枠の部分を探して下さい。
1カラムの場合は .col1 .copyright{
2カラムの場合は .col2r .copyright{
3カラムの場合は .col3r .copyright p{
上記のように検索して変更指定位置を探してください。
例)2カラムの場合
サイトの横幅 :950pxと表示されていて、その950pxがサイトの端から端まで100%となっています。 サイドバーとメインコンテンツの比率 |
サイドバーとメインコンテンツも横幅を変更したい時は、それぞれの比率(%)の変更をするのですが、数字の合計が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%
アドセンス広告の定番設置位置のように扱われているサイドバー上部よりも、記事に埋め込んだ方がクリック率が上がるということがあります。
クリック率に関してはサイトのデザインや誘導によって人それぞれですので、いろいろ試してみるといいですね。
<健康を意識した目的別レシピ>
生活を彩る 関連記事
* TOMOIKUの姉妹サイト紹介 *