« [HYBRID W-ZERO3] 地図を見る~モバイルGoogleマップ | トップページ | [Linux] UbuntuにGoogle Earth をインストール »

2010年5月27日 (木)

ココログの記事欄の横幅を広げる方法

当ブログのデザインは、ココログオリジナル・テーマ「木目」を使っているのですが、いつも記事欄の横幅が狭いなあ…もうちょっと広げられないのかなあ…と思っていました。

横幅を測ってみたら、左サイド、記事、右サイドの順に、200ピクセル、400ピクセル、200ピクセルでした。
これでは記事欄に横長のアフィリエイト・バナー広告を貼ると、右端が切れてしまいます。
そこで、記事欄の横幅を500ピクセルまで広げたいと思います。

いつものことながら、Google先生に教えてもらって、参考にさせていただいたのがこちらブログの記事です。

 ココログのカスタムCSSの編集~ブログの横幅を変更する~[調べものブログ]


「木目」のCSSファイル:

 http://theme.cocolog-nifty.com/themes/material/theme-wood.css

を見ながら、上記記事の内容から類推して…

当ブログは、「両サイドバー付レイアウト」を採用しているので
.layout-three-columnを探しててみると…

 

/* three-column tweaks */

.layout-three-column #container
{
width: 802px;
}


.layout-three-column #alpha
{
width: 200px;
}


.layout-three-column #alpha-inner
{
border: 0;
padding: 15px 15px 15px 15px;
background: #996633;
}

.layout-three-column #beta
{
width: 400px;
}


.layout-three-column #beta-inner
{
border: 1px solid #663333;
padding: 14px 14px 14px 14px;
background: #FFCC99;
}

.layout-three-column #gamma
{
width: 200px;
}


.layout-three-column #gamma-inner
{
border: 0;
padding: 15px 15px 15px 15px;
background: #996633;
}

となっていた。

#containerが全体、#alphaが左サイドバー、 #betaが記事、 #gammaが右サイドバーの幅を表しているのでしょう。(2pxはきっとサイドバーと記事の間に1pxずつマージンを取ってあるのでしょう…)

なので管理ページの「デザイン」→「カスタムCSSの編集」から、次のようなCSSを追加しました。
(上の設定に下の設定値が上書きされる)

	.layout-three-column #container
{
width: 902px;
}

.layout-three-column #alpha
{
width: 200px;
}


.layout-three-column #beta
{
width: 500px;
}


.layout-three-column #gamma
{
width: 200px;
}

めでたく記事の幅が500pxに拡張されました。

« [HYBRID W-ZERO3] 地図を見る~モバイルGoogleマップ | トップページ | [Linux] UbuntuにGoogle Earth をインストール »

コメント

コメントを書く

コメントは記事投稿者が公開するまで表示されません。

(ウェブ上には掲載しません)

トラックバック


この記事へのトラックバック一覧です: ココログの記事欄の横幅を広げる方法:

« [HYBRID W-ZERO3] 地図を見る~モバイルGoogleマップ | トップページ | [Linux] UbuntuにGoogle Earth をインストール »

2019年12月
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        

最近のトラックバック