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


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

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

layout.cssで横幅を変更する

ワードプレスのダッシュボード→外観→エディター(テーマの編集)→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のレクタングル大でもサイドバーの中に収まったのです。

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

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

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

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

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

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

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

次ページ

12次

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

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

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

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

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

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

このブログは、

・アフィリエイト開始初月から9万円のネット収入が得られた秘密

アフィリエイト開始2ヶ月目で以前勤めていた会社からの給料と
 同額
のネット収入を確保した方法

・5ヶ月目で月収120万円を達成した最先端テクニック

・これから流行り始めるブログマネタイズの新しい思考法

などを書いています。

只今、ブログの内容をより体系的にまとめたビジネス教科書を
無料でプレゼントしています。

以下のフォームに教科書を受け取るメールアドレスと、
あなたの苗字を記入してプレゼントをお受け取り下さい。





記事一覧


著者:ヒデアキ
現在は、毎月100万円の収入を得ているブログアフィリエイトの知識を活かして「新たな収入源を手に入れ大切な人を守りたい」と真剣に考えている方を全力でサポートしています。
更に詳しいプロフィールはこちら


このページの先頭へ