賢威6.1でサイドバーの横幅を変更する方法

公開日: 2014年06月05日
最終更新日: 2014年06月09日

サイドバー

賢威6.1でサイドバーの横幅を変更する方法です。自分で用意したオリジナルCSSファイルに記述する方法、賢威の元ファイル(layout.css)を編集する方法の2通り。デフォルトでは29.5%になっているため、inosh blogでは30%に変更しました。

もくじ

はじめに

賢威6.1のサイドバーは、デフォルトだと29.5%に設定されています。

そのため、全体の幅を1000pxにすれば295pxに、950pxに設定すれば280pxになります。
全体の幅とは、賢威のテンプレートをダウンロードする際に決めるアレですね。

今まではコンテンツ上とコンテンツ下の2ヵ所にしか広告を貼っていなかったのですが、ごく僅かですがページビューが増えてきたので、サイドバーにもレクタングル中の広告でも貼っておこうかな~と思ったのです。

が、サイドバーの幅が295pxになっておりましたので、300pxに変更しようと思います。

オリジナルのCSSに追記する方法

まずは、自分で用意したCSSファイルに記述して変更する方法です。

デフォルトでは、layout.cssに以下のような記述がされています。

layout.css

.col2 #sidebar, .col2r #sidebar {
width: 29.5%;
}

これを上書きするために、例えば私の場合だとカスタマイズ用のCSSを作成するで作成したように、mystyle.cssというファイルを読み込ませているので、それに追記するような形となります。

mystyle.css

.col2 #sidebar, .col2r #sidebar {
width: 30%;
}

で、これをFFFTPなどでアップロードすると、サイドバーが300px(コンテンツ全体の幅1000pxの30%になるので300px)になります。

元ファイル(layout.css)を編集する方法

また、デフォルトのCSSファイルを直接編集しても良いです。

サイドバーの横幅は上記のとおりlayout.cssで設定されておりますので、layout.cssを開き、検索で「29.5%」とか「sidebar」とかで検索して、以下のように変更します。

layout.css

.col2 #sidebar, .col2r #sidebar {
width: 29.5%;
}

下矢印

layout.css

.col2 #sidebar, .col2r #sidebar {
width: 30%; /*←ここの値を任意のものに変える!*/
}

パーセントじゃなくて、ピクセルで指定しても良いですし、ここはお好みでって感じですね。

注意点

もしもレクタングル大を表示させたい場合など横幅をもっと広げたいとなると、コンテンツ部分の幅も調整する必要が出てくると思います。

その場合は、以下の値を変更して調整しましょう。

layout.css

.col2 #main-and-sub, .col2r #main-and-sub {
width: 66.8%;
}

単純に計算して、例えばサイドバーの横幅を33.2%以上の数値にすると、サイドバーとメインカラムの横幅を合計した際に100%を超えてしまいます。

そうなるとサイドバーが収まりきらなくなり、コンテンツの下の方にぶっ飛んでしまいます。

その場合は、上記の値を変更してメインカラムの幅を変更して調整する必要があります。

\(^o^)/ ぼっけぇシェア \(^o^)/

コメントを残す

サブコンテンツ
ページトップへ戻る ページエンドへ進む