賢威のサイドバーやメインコンテンツ幅の変更とアドセンスを設置する方法


賢威でブログを運営していると、サイドバーの横幅や、メインコンテンツの横幅を狭くしたい、または広くしたいと思うことがあります。

この記事では、賢威6.2や賢威7でつくったブログのサイドバー、メインコンテンツ、それぞれの横幅の設定方法について解説します。

賢威7では、base.cssで横幅を変更する

賢威7でサイドバーやメインコンテンツの横幅を変更するには、

ワードプレスのダッシュボード→外観→テーマの編集→base.css

の順にクリックし、base.cssの編集画面(以下の画像)を開きます。

賢威7 サイト全体の幅

base.cssの編集画面を開いて、下の方にスクロールしていくと、テンプレートレイアウト(青でマークした部分)と書かれた項目を見つけることができます。

この「テンプレートレイアウト」の項目に書かれたcssの編集や調整をおこなうことで、賢威7のサイトの横幅を変えたりすることができます。

上記画像の赤でマークした部分(1200px)がサイト全体の横幅になります。

なので、赤でマークした部分(1200px)の数値を調整することで、サイト全体の横幅調整することができます。

次に、画面に表示されるサイドバーやメインコンテンツの横幅を変更する方法について解説します。

サイドーやメインコンテンツの横幅を変更するには、上記の編集画面を2カラムレイアウトと書かれている部分(以下の画像)まで、下の方向にスクロールします。

賢威7 カラムレイアウト 調整

上記画面までスクロールしましたら、現在使っているカラムのレイアウトに合わせて調整します。

2カラムのレイアウトを使っている場合は、上の赤枠を調整、2カラムリバースのレイアウトを使っている場合は、下の赤枠の内容を調整します。

メインコンテンツとサイドバーの横幅を調整する際は、青でそれぞれマーカーした部分のパーセンテージを変更します。

黄色でマーカーしたほうが、メインコンテンツの横幅です。

反対に、緑でマーカーしたほうが、サイドバーの横幅です。

一例として、今回は2カラムのサイドバーとメインコンテンツの横幅を調整した時のイメージを以下の貼り付けます。

<賢威7の初期状態>賢威7 カラムレイアウト 初期

 

<メインコンテンツ:50%、サイドバー:30%の状態>賢威7 カラムレイアウト メインコンテンツ 幅変更

<メインコンテンツ:65%、サイドバー:20%の状態>賢威7 カラムレイアウト サイドバー 幅変更

このように、賢威7ではbase.cssの編集をすることで、メインコンテンツやサイバーの横幅を変更することができます。

賢威6.2では、layout.cssで横幅を変更する

次に、賢威6.2でサイドバーやメインコンテンツの横幅を変更する方法について解説します。

賢威6.2の場合、まずワードプレスのダッシュボード→外観→エディター(テーマの編集)→layout.cssに行きます。

1

ここは賢威のカラムに応じたレイアウトについて記述されたCSSファイルです。

1カラムのレイアウト、2カラムのレイアウト、3カラムのレイアウトそれぞれについて横幅などを指定しています。

この部分の数字を変更すれば、コンテンツの横幅を広くしたり、狭くしたりできます。

基本的な変更方法はどのカラムでも同じなので、今回は2カラムのレイアウトでの横幅を変更したいと思います。

横幅を変更する場所

2

command+F(マック)またはctrl+F(Windows)で右上に検索窓を出し、そこに「.col2 #main-and-sub」と入力し、画像赤枠の部分を探して下さい。

この「%」になっている部分が、横幅のサイズになります。この「%」の数字を増減させることによって、横幅を変更出来ます。

尚、画像の赤字でサイドバーと書かれた部分がサイドバーの横幅、赤字でメインコンテンツと書かれた部分がメインコンテンツの横幅を指定した数字です。

また、その下の「コンテンツの配置」のところには、文字どおり、サイドバーやメインコンテンツの配置について指定されています。「col2」が2カラムレイアウト、「col2r」が2カラムリバースのレイアウトのことです。

2カラムのレイアウトの場合、メインコンテンツは左端(left)を配置の基準、サイドバーは右端(right)を配置の基準にしています。%の数字を変更したときの幅の広がりというのは、サイトの端から端までを100%としたとき、どこまで広がるかを指定しているということになります。

つまり2カラムレイアウトのサイドバーの場合は、右端から29.5%の位置まで横幅を広げますよ、という指示なのです。

反対に2カラムレイアウトのメインコンテンツは、左端から66.8%の位置まで横幅を広げますよ、という指示になります。

なので、この数字をそれぞれ変更するということは、「〇%の位置まで横幅を広げますよ」という指示をするための設定なのです。

では、早速それぞれ変更してみます。

サイドバー

サイドバーと書かれた赤枠内の%の数字を変更します。

現時点では29.5%という数字になっていますが、今回は例として19.5%にしてみたいと思います。変更できたら、「ファイルを更新」をクリックして保存し、トップページに戻ってみます。

3

このサイドバーが、

4

このようになりますね。広げすぎると、メインコンテンツと重なるのを防ぐために、サイドバーがメインコンテンツの下に移動します。

メインコンテンツ

続いてメインコンテンツと書かれた赤枠内の%の数字を変更します。メインコンテンツは66.8%となっていますから、例として46.8%にしてみます。

5

このメインコンテンツが

6

こうなります。こちらもサイドバー同様に幅が狭くなりましたね。メインコンテンツも横幅を広げすぎると、それ以上はサイドバーがメインコンテンツの下に移動します。

もうお分かりかと思いますが、サイドバーとメインコンテンツの数字を足しあわせた時、100%を超えるとサイドバーがメインコンテンツの下に強制的に移動になります。

なので、サイドバーもメインコンテンツも横幅を変更したい時は、数字の合計が100%を超えないように調整して横幅を変更する必要があります。

サイドバーにアドセンスを設置する方法

賢威のサイドバーにアドセンスを設置するとき、そのまま設置するとはみ出してしまいます。

賢威サイドバー幅アドセンス画像1

これはPCで表示された場合です。

ご覧の通り、上がレクタングル中(300×250)、下がレクタングル大(336×280)のアドセンス広告ですが、両方とも普通に設置しただけでははみ出してしまいます。

スマホではちゃんと枠内に収まるのですが、PCでは枠外にはみ出してしまいます。

これでは見栄えも悪くなりますし、何よりアドセンスの規約違反ですから、サイドバーの幅を適切なサイズにまで広げないといけません。

レクタングル中(300×250)であれば、サイドバーの幅を変更するだけで、枠内に収めることができます。

賢威サイドバー幅アドセンス画像2

サイドバーの幅を32.5%にまで広げてみました。

しかし、レクタングル中は収まりましたが、結局レクタングル大ははみ出したままです。

しかもサイドバーがメインコンテンツに近づきすぎてしまうので、いずれにしても見た目が悪くなります。

このように、賢威のサイドバーにアドセンスを設置しようと思っても、幅を変えるだけでは上手くアドセンス広告を設置できず、諦めてしまっている方が多いと思います。

なので、今度はこのレクタングル大をサイドバーの中に設置する方法を解説します。

まず、先ほどサイドバーの幅を変更したところのすぐ上に、このようなところがあると思います。

賢威サイドバー幅アドセンス画像3

すぐ真上ですね。ここの「width: 950px;」となっているところの数字を、「1170px;」に変えてください。

賢威サイドバー幅アドセンス画像4

こうですね。

これで保存して、トップページに戻ってみてください。

賢威サイドバー幅アドセンス画像5

これでレクタングル大も収まりました。

何をしたのかというと、メインコンテンツとサイドバーを配置している、「下地」の横幅の大きさを変えたのです。

この下地がデフォルトで950pxとなっていて、サイドバーはその下地の右端から950px×29.5%の位置、すなわち280.25の位置まで広げられていたのです。

だから、横幅が300pxのレクタングル中を設置しても、約20pxオーバーではみ出してしまったのです。

そして下地の横幅が1170pxになると、サイドバーは右から1170px×29.5%の位置、すなわち345.15の位置まで広げられることになります。

よって横幅が336pxのレクタングル大でもサイドバーの中に収まったのです。

このようにすれば、サイドバーにもアドセンス広告が設置できます。

ただし、サイドバーに設置されたアドセンス広告は、あまりクリック率が高くありません。

理由は、賢威テンプレートはレスポンシブデザインになっており、スマホで表示された場合、サイドバーはメインコンテンツの下に表示される事になります。

なので、サイドバーに貼られた広告は、ブログ訪問者の目に止まる機会が極端に少ないのです。

では、どこにアドセンス広告を貼ればクリックされやすいかというと、記事の本文中になります。

参考記事→トレンドアフィリエイトのグーグルアドセンス広告のクリック率を上げるレイアウト

記事の本文中であれば、パソコンからであってもスマホからであっても、ブログ訪問者の目に広告が止まりますのでクリック率が上がるのです。

今回の記事はお役にたてましたでしょうか?

もし、今回の記事を読んで感想や分からない事などありましたら、下のフォームよりお伝え下さい。

些細な事でも構いません。

おそらく、あなたが抱いた疑問は、これからこの記事を読む方も抱く疑問です。

そういった疑問を1つ1つ解決していきます。

コメントして頂ければ気づき次第、すぐに回答いたします。



総合案内

著者情報
著者情報
年収1000万円まで守る2つの事
読者さまの声
読者さまの声
もくじ
もくじ
超初心者講座
超初心者講座
ブログ基礎講座
ブログ基礎講座
トレンドブログ講座
トレンドブログ講座
パワーブログ講座
パワーブログ講座
マインドセット
マインドセット
コピーライティング
コピーライティング
ブログアフィリエイト
ブログアフィリエイト
トレンドアフィリエイト
トレンドアフィリエイト
ネットビジネス
ネットビジネス
SEO
SEO
コラム
Googleアドセンス
Googleアドセンス
与える事に徹する
与える事に徹する
先生の選び方
先生の選び方
Googleアドセンスの始め方
Googleアドセンスの始め方
賢威カスタマイズ
賢威カスタマイズ
このブログについて
このブログについて
女性のブログアフィリエイト
女性のブログアフィリエイト
そもそものステップが違う
そもそものステップが違う
中高年の方はシンプルな方法がお勧め
中高年の方はシンプルな方法がお勧め

このページの先頭へ