TOMOIKU*ブログ

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

 

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

この記事は、賢威で全体の横幅を広げ、ブログのサイドバーとメインコンテンツのそれぞれの横幅の設定とサイドバーにアドセンス広告(幅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%

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

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


 
TOMOIKU*Recipe by purpose 
<健康を意識した目的別レシピ>
   




当サイトの一部の記事が、専門性を高めるために「TOMOIKU姉妹サイト」に移動している場合があります。 ご不便なことがございましたら、大変申し訳ありません。心よりお詫びいたします。


 
   

* TOMOIKUの姉妹サイト紹介 *
 


サイトマップで情報を探せます!

一般社団法人 日本共育ライフ協会内

(合)共育生活研究所

“漢方養生士・中医薬膳師”として「薬膳・ローフードの食事」と、“LOHASライフスタイリスト”として「ロハスな生活」の講座を各地で行っています。


遊びに来てね♪

最新記事

ベルメゾンネット

Menu according to purpose




ベルメゾンネット

私のお気に入りのお店

 

 

 

 

 


 

 

 

婦人画報のお取り寄せ決定版2019

ページ上部へ戻る