FC2ブログ

サイトの幅を変える方法 Templ8@FC2blog

FC2ブログテンプレートの無料配布とカスタマイズでSEO対策(検索エンジン最適化)

ホーム > templ8カスタマイズ >サイトの幅を変える方法

サイトの幅を変える方法

サイトの幅を変えてみましょう。

僕のカスタマイズしたtempl8_3シリーズ(3カラムのもの)の
テンプレートの設定>スタイルシート編集の「サイトの幅」の項目では
以下のようになっています。

/******************************************* ▼ サイトの幅 ▼ */
#outline {
width:875px; /* 全体 */
margin:0 auto;
}
#center {
width:435px; /* 中央 */
float:right;
}
#left {
width:210px; /* 左 */
float:left;
}
#right {
width:210px; /* 右 */
float:right;
}
#center-left { /* 計算して設定してください ------ */
width:655px; /* (全体-左-中央-右)/2 + 左 + 中央 */
float:left;
}
/******************************************* ▲ サイトの幅 ▲ */

これを見てわかることはサイト全体の幅が875pxで左カラムと右カラムの幅が各210px、そして中央の記事カラムの幅が435pxで出来ていることがわかります。

しかし左カラム+記事カラム+右カラムが全体の幅になるわけではありません。実際に計算してみると、210+435+210=855pxですので、全体の幅875pxには20px足りません。その20pxは何かと言いますと、左カラムと記事カラムとのすきま、そして記事カラムと右カラムとのすきまなのです。

僕のカスタマイズしたテンプレートではカラムとカラムの間に10pxのすきまを空けています。このすきまがないと窮屈な感じがするので空けています。さっきの計算でいくと、210+10+435+10+210=475pxでちゃんと合っています。この計算が合わないとブログがずれて表示されたりする原因になります。

#center-left { /* 計算して設定してください ------ */
width:655px; /* (全体-左-中央-右)/2 + 左 + 中央 */
float:left;
}
↑この部分は簡単にいうと記事カラム+すきま+左カラムということです。435+10+210=655px。そして655+10+210=875pxということです。

それでサイトの幅を変える方法ですが、結局はこの計算が合えばどんな幅にも適用するのです。
例えば、サイト全体の幅を先に決めたとしましょう。今のディスプレイの幅は1280pxが多いので、全体の幅を1280pxにするなら、
記事840px、左210px、右210px、最後の計算の所1060px

左右プラグインをもっと大きくしたいなら、
記事760px、左250px、右250px、最後の計算の所1020px

左右カラムと記事カラムのすきまを10pxより大きい20pxにしたいなら、
記事820px、左210px、右210px、最後の計算の所1050px
こんな風に変えることができます。

逆にカラムごとの大きさからサイト全体の幅を導いてもよいでしょう。例えば左右カラムの幅はGoogleAdSenseのワイドスカイスクレイパー(160x600)をいれたいから160pxにしよう、記事の下にもGoogleAdSenseのバナー(468x60)を挿入したいから、記事カラムの幅468pxにしようと考えたとします。

そうした場合、まず左右カラムに160が入り、中央に468が入ります。そして一番下の計算のところが160+10+468=638なので638が入ります。そして全体の幅には638+10+160=808なので808が入ります。これできれいに収まりますし、ブログのずれなのも起きないと思います。

このようにして自分のブログに合ったサイトの幅、プラグインの幅、記事の幅を見つけてください。今回は3カラムを例にしてあげましたが、2カラムのテンプレートは「プラグイン+すきま+記事=全体」という式になり、3カラムのように最後の計算もないので、もっと簡単にできます。ぜひカスタマイズしてみてください。

2009/01/16 23:11 templ8カスタマイズ
メールフォーム
僕のカスタマイズしたテンプレート、その他テンプレートについて、何か解からないことがあれば何でも聞いてください。具体的に書いて頂けるとありがたいです。

名前:

メール:

件名:

本文: