wp.vicunaマルチカラムのメインコンテンツを広げる方法

スポンサーリンク

2009.10.06 追記

うまくいったかのように思えたのですが、Mac Safari4ではレイアウトが崩れるとの報告がありまして、色々いじってみたのですが修正できず。

このサイトはvicunaの昔のskinを使用していたので、この際だから、と新しく構造も大きく変更されたskinを適用。これでMac Safari4でも見られるようになったかと思います。お騒がせしました。

サイトのトップページ画像と、レイアウトを少し変更しました。

sorarium_1254488554518

画像は、フィンランドに行った時、アラビア社から帰る途中で撮影したもの。
中央に見える茶色い建物がアラビア社なのです。

レイアウトは、メインのコンテンツを大きく広げました。
今まで400px程度だったのを、600pxにまで拡大。
これで写真のサムネイル自体を大きく貼ることが出来ます。

色んなサイトを見ていると、やはり画像が大きい方が写真もよく見えるし、綺麗だったので。
別のテンプレートを使おうかなとも思ったんですが、wp.vicunaのテンプレートはシンプルで気に入ってますし。

sorariumはマルチカラムのテンプレートを使っているのですが、
サイドバー部分のサイズはもうこのままでいいので、メインの領域だけ広げる作業になります。

1.mod_multiCol-Type2.cssのwidthを修正

まずは
wp-content\themes\wp.vicuna\style-flat\module\mod_multiCol-Type2.css

の中をいじる。

div#header,
div#content,
div#footer {
width: 1000px; /* Do not edit this line */
min-width: none;
max-width: none;
}

ここのwidthのサイズで、ヘッダー、コンテンツ、フッターの領域を広げる。
私はメインコンテンツのみを広げたいので(サイドバーはそのままのサイズで)

body.multi div#main {
margin-right: 20px;
float: left;
display: inline;
width: 600px;
}

のwidthも、上でサイズを広げた分を増やす。

2.アイキャッチの画像を変更

アイキャッチのlong.pngを使っている人はアイキャッチの画像も大きくするのを忘れずに。
ヘッダーのwidthを1000pxにしたなら、

wp.vicuna\style-flat\images\eyeCatch\long.png

のlong.png画像も、上記のサイズ(sorariumなら、1000px)で作り直しておく。そして、

wp-content\themes\wp.vicuna\style-flat\module\mod_eyeCatch-long.css

body {

}

div#header,
div#content,
div#footer {
width: 1000px; /* Do not edit this line */
}

div#content {
padding-top: 325px;
background-color: #fff;
background-image: url(../images/eyeCatch/long.png);
background-repeat: no-repeat;
}

ヘッダー、コンテンツ、フッターのwidthと、もし画像の高さも変更していたら、padding-top(画像の高さ)を変更しておきましょう。
あとは、変更したファイルをFTPであげれば完成です。

スポンサーリンク
この記事をお届けした
sorariumの最新ニュース情報を、
いいねしてチェックしよう!

シェアする