サイドバーに枠をつける方法

 

PPW_hansyashitasora

背景に色を付けてみたら、サイドバーも同じ色になってしまいました。
サイドバーに色の指定が無く透明の状態だからです。
色だけ付けるのもなんだか中途半端なので、枠も付けてみます。

今回は、枠をつける方法のご紹介です。
背景色はまた今度。

編集前はこんな感じです。

sidewaku1

スタイルシートを編集する

テンプレートGushで説明します。
他のテンプレートでも同じ手順で実装できます。
ただし、idなどの名前の違い、数値の違いがあると思いますのでそこらへんはいい感じにお願いします。

枠をつける

サイドバー全体のタグはこれです。

#sub {
	font-size: 100%;
	margin-bottom: 24px;
	overflow: hidden;
}

枠の指定が無いので追加します。
枠のタグはborderです。

#sub {
	font-size: 100%;
	margin-bottom: 24px;
	overflow: hidden;
	border: 1px solid #ddd;
	border-radius: 8px;
}

赤文字の部分を追加し、保存して更新します。
1pxは線の太さ、solidは線の種類、#dddは線の色です。

左のメイン部分と同じように角を丸くしたい場合、青文字の部分も追加します。
するとこうなります。

sidewaku2

サイドバーが無くなった!?

実は、borderの右1px左1pxの計2pxサイドバーが広くなったことでサイドバーの幅に入りきらなくなり、メインコンテンツの下に落ちてしまったのです。

sidewaku3

解決するには、サイドバーの幅を狭くするか、メインコンテンツの幅を狭くするか、全体の幅を広げるか。

Gushはサイドバーの上にきっちりアドセンスが入るように計算されており、ここをいじるとまた面倒なことになりそうなのでサイドバーの幅は触りたくありません。メインコンテンツの部分も同様です。

なので、全体を2pxだけ大きくします。支障は無い・・・はず。

もともとスマートフォンやタブレットではサイドバーは下に表示されるようになっているので、1024px以上の所を修正します。

1024px以上の全体の幅を広げる

ここです。

/*--------------------------------------
  1024px コンテンツ
--------------------------------------*/

#contents {
	overflow: hidden;
	width: 1040px;
	margin: 0 auto 24px auto;
}

赤文字の所が全体の幅です。
2px大きくします。

/*--------------------------------------
  1024px コンテンツ
--------------------------------------*/

#contents {
	overflow: hidden;
	width: 1042px;
	margin: 0 auto 24px auto;
}

保存して更新します。

これで、サイドバーがちゃんと隙間に収まりました。

sidewaku4

サイドバーの左右の余白を微調整する

このままだと文字が端まできているので詰まった感じがします。

sidewaku5

見難いので調整します。

アドセンスに影響の無い#sub .side_contentsに赤文字の部分を付け加えます。

#sub .side_contents {
	margin-bottom: 24px;
	padding: 0px 10px;
}

paddingは枠の内側の余白のタグです。
この書き方だと、padding: 上下の余白 左右の余白; となります。

保存して更新するとこうなります。

sidewaku6

少しの違いですが、見やすくなります。
数値はお好みで変更してください。

アドセンスの上に余白を入れる

これで良いかと思ったら、もうひとつありました。
アドセンスの上がぴったりくっついていて窮屈です。

sidewaku7

サイドバー上のアドセンス用の#sub .side_adを編集します。

#sub .side_ad {
	text-align: center;
	margin-bottom: 24px;
}

今度はmarginの数値をいじります。
marginは、そのコンテンツの外側の余白を指定するものです。

すでにbottomが指定してあるので、上のtopも指定します。

#sub .side_ad {
	text-align: center;
	margin: 15px 0px 24px 0px;
}

-bottomを削除して、数値を入力。
margin: 上 右 下 左;です。

こうなります。

sidewaku8

これで完成です。
バランスも良くなったと思います。

ひとつひとつ書いたので長かったですね(^^;)
おつかれさまでした。

  • このエントリーをはてなブックマークに追加
  • Pocket

コメント一覧

  1. 飯田 より:

    先日Gushをダウンロードして調整しており、アレコレ検索してこちらにたどり着きました。

    枠を付ける方法とても助かりました。
    無事枠を付ける事が出来ました。ありがとうございました。

    できましたらもう一点教えていただきたくコメントさせていただきました。
    個別記事のタイトル文字のサイズだけがどうしても変更できませんでした。

    トップページに表示される個別記事のタイトル文字サイズは変更できましたが、個別記事の方のタイトル文字が小さくならない状況で彷徨っています。。

    ↓この部分ではないのでしょうか。お手数おかけして恐縮です。よろしくお願いします。

    /*————————————–
    記事見出し
    ————————————–*/

    #contents #main #single_title {
    font-size: 20px;
    margin-bottom: 24px;
    }

    • ゆのん より:

      *飯田様
      返事が大変遅れてしまい申し訳ありません。
      子供の夏休み中でPCを触る暇もなく嵐のような日々を過ごしておりました。。。

      この記事がお役に立てたようで嬉しいです。
      ありがとうございます。

      ご質問の個別記事タイトルの文字の大きさは、おそらくPCから見た場合ですよね。
      修正するタグはそれで合っているのですが、ちょっとややこしく、コメント欄で説明するには長くなってしまうので記事にしました。

      時間が経っている為もう解決されているかもしれませんが、よろしければご覧ください。
      個別記事ページのタイトル文字の大きさを変更する方法

飯田 にコメントする コメントをキャンセル

メールアドレスは公開されませんのでご安心ください。
また、* が付いている欄は必須項目となりますので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメント送信」ボタンを押してください。