2007年04月03日

FC2ブログ用2カラムテンプレートのカラムサイズ変更方法

以前に、こちらで紹介していますFC2ブログ用テンプレートblogtube_basic3カラムの各カラムサイズの変更方法を説明しましたが、今回はblogtube_extraの2カラムテンプレートの各カラムサイズの変更方法を説明します。
前回は全般的に説明しましたが、今回は必要な箇所だけ説明します。細かく説明すると、逆にややこしいと思いますので。
ということで、FC2ブログ用テンプレート3カラムのサイズ変更は、ブログ全体のサイズをカスタマイズするとブログ全体のサイズをカスタマイズしてみた例をご覧下さい。

(今回は左右のマージン(15px)とカラム間のマージン(10px)は標準のまま変更しないものとします。)

1.右メニューの2カラムテンプレートカラムサイズ変更

.layout-three-column #box,
.layout-two-column-left #box,
.layout-two-column-right #box{
width: 930px;
margin-right: auto;
margin-left: auto;
border: solid 1px #000;
}

まずは全体のサイズを決めます。width: 930px;の930pxを変更して下さい。この数字が基準となります。

左カラム(エントリカラム)

.layout-three-column #box-left,
.layout-two-column-right #box-left{
float: left;
width: 660px;
}

右カラム(メニューカラム)

.layout-three-column #box-right,
.layout-two-column-right #box-right{
float: right;
width: 230px;
}

ここで左右カラムサイズを決定します。左右マージンが計30px+カラム間マージンが10px=40pxが標準ですので、この左右カラムの合計+40px=全体サイズになります。
違う言い方をすれば、全体サイズ-40pxがこの左右カラムの合計サイズです。

全体サイズを830pxにした場合、830px-40px=790pxが左右カラムの合計になります。この合計を、左右好きなサイズに割り当てて下さい。(例えば610px+180px=790px)

.layout-two-column-left #box-main,
.layout-two-column-right #box-main{
float: right;
width: 660px;
}

ここはエントリカラムと同じサイズに変更して下さい。以上で左右カラムの変更は終了です。(フリーエリアを使用する場合、フリーエリアのサイズ変更に進んで下さい。)

2.左メニューの2カラムテンプレートカラムサイズ変更

.layout-three-column #box,
.layout-two-column-left #box,
.layout-two-column-right #box{
width: 930px;
margin-right: auto;
margin-left: auto;
border: solid 1px #000;
}

左メニューの場合も全体サイズはここで決めます。

.layout-two-column-left #box-left{
width: 900px;
}

ここは全体サイズ-30pxとして下さい。-30pxは左右マージンです。(例:830pxなら830px-30px=800px)

右カラム(エントリカラム)

.layout-two-column-left #box-main,
.layout-two-column-right #box-main{
float: right;
width: 660px;
}

左カラム(メニューカラム)

.layout-two-column-left #box-sub{
float: left;
width: 230px;
}

ここで左右カラムサイズを決定します。左右マージンが計30px+カラム間マージンが10px=40pxが標準ですので、この左右カラムの合計+40px=全体サイズになります。
違う言い方をすれば、全体サイズ-40pxがこの左右カラムの合計サイズです。

全体サイズを830pxにした場合、830px-40px=790pxが左右カラムの合計になります。この合計を、左右好きなサイズに割り当てて下さい。(例えば610px+180px=790px)

3.フリーエリアのサイズ変更

#kousin{
width: 900px;
margin: 10px auto 20px;
border: solid 1px #000;
background: #fff;
}

.topadfull{
width: 900px;
margin: 10px auto 20px;
background: #fff;
}

.topbox{
width: 900px;
background: #fff;
margin: 10px auto 20px;
}

#bottombox{
width: 900px;
margin: 10px auto 20px;
border: solid 1px #000;
background: #fff;
}

上記部分は全体サイズ-30pxとして下さい。-30pxは左右マージンです。(例:830pxなら830px-30px=800px)

.topleft{
float: left;
width: 445px;
}

.topright{
float: right;
width: 445px;
}

これは2分割のフリーエリアです。上で設定した、(全体サイズ-30px)-10pxをまず計算し、次にその合計になるように左右サイズを決定して下さい。左右違うサイズでも問題ありません。(例:(全体830px-30)-10px=790px。790px/2=395px。もし左右違うサイズにするなら、400px+390px=790pxなどにする。)

2006年12月23日

テーブル内のフォントサイズと色の指定

「画像の下にいれた文字のサイズが大きくなる」、という質問を頂いたんですが、考えられるのは画像をテーブル内に配置する場合です。
以前にエントリしていますが、テーブルは使い方が単純ではないので、あえて何もスタイルシートで設定していません。
ですので、文字サイズはブラウザの標準サイズになりますので、たいていは大きくなってしまいます。

特に深く考えない場合は、メイン部分で使用するテーブル全てに対してスタイルシートを適用すれば簡単です。

#box-main img{
margin-right: 16px;
margin-bottom: 16px;
}

#box-main ul{
margin: 10px 0 10px 16px;
line-height: 175%;
}

#box-main table{
font-size: 12px;
color: #000;
}

/* メイン部分 */

赤色の部分をできればこの場所に追加してください。これでテーブルを使用しても、他のテキストと同様に12pxサイズのフォントで表示されます。

また、この場合はメイン部分だけの指定になりますので、ブログ全体で同じサイズ(12px)で表示したい、という場合は以下になります。

.section{
}

table{
font-size: 12px;
color: #000;
}

/*　　　　基本的な設定　　　　*/

この場所だけに追加すれば大丈夫です。先ほどの部分の追加は必要ありません。
テーブルを画像組みや、簡単な表でしか使わない場合は、このスタイルシートを追加してしまったほうがよいかもしれません。

これでも画像の下のフォントサイズが治らない場合は、再現していただかないと原因がわかりかねます。

2006年12月02日

ブログ全体のサイズをカスタマイズしてみた例

前回の、ブログ全体のサイズをカスタマイズするの続きです。実際にブログ全体のサイズを変更した例を紹介します

このテンプレートの左右カラムは非対称です。基本的に、左が記事やリンク、コメントなどで、右カラムに画像などの広告やランキングを貼り付けることを想定しています。
ただ、使用目的によって最適なサイズは異なると思いますので、このエントリを参考に最適なサイズで運用してみて下さい。

1.左右カラムが190pxで、エントリ部分が500px

最初は簡単な変更で。左右カラムのサイズを揃えてみましょう。それ以外は標準です。

15 a

190 b

10 c

500 d

10 e

190 f

15 g

構成はこのようになります。計算してみましょう。

15+190+10+500+10+190+15=930px
930-(15+15)=900px(左右マージンを引く)
190+10+500=700px(=左ボックス)
900-700=200px(=右カラム+スペース)
最初に計算してみて、サイズに間違いがないか必ず確認してください。

2.スタイルシートの変更

変更しているのは、左ボックス、左カラム、右カラムですので、その部分のスタイルシートを変更すればいいことになります。

#box-left{
float: left;
width: 700px;
}

#box-sub{
float: left;
width: 190px;
}

#box-right{
float: right;
width: 190px;
}

変更した画面です。ちょっとわかりにくいですが、ちゃんと変更されています。実はサイズの変更なら、こんなに簡単です。ただしサイズを変更した場合、HTML部分に変更したサイズよりも大きいもの(画像など)が無いようにしてください。特にエントリ部分のサイズを変更すると、修正はエントリ本文になりますので注意してください。

3.その他の変更例

ちょっと変なサイズにしてみます。計算さえあっていれば、サイズの変更はどのようにでもなります。

左カラム300px、エントリ部分400px、右カラム180px

スペースは変更無しです。変更箇所はこちら。

#box{
width: 930px;
margin-right: auto;
margin-left: auto;
border: solid 1px #000;
}

#box-margin{
margin: 0 15px;
}

#box-left{
float: left;
width: 710px;
}

#box-right{
float: right;
width: 180px;
}

#box-main{
float: right;
width: 400px;
}

#box-sub{
float: left;
width: 300px;
}

画像はこのようになります。エントリ上部のボックスも変更されますので、フリーエリアはそのままで大丈夫です。変更箇所はこれだけで済みます。

4.変態なカスタマイズ

極端な例であって、止めた方がいいですよw

#box{
width: 930px;
margin-right: auto;
margin-left: auto;
border: solid 1px #000;
}

#box-margin{
margin: 0 15px 0 25px;
}

#box-left{
float: left;
width: 400px;
}

#box-right{
float: right;
width: 450px;
}

#box-main{
float: right;
width: 300px;
}

#box-sub{
float: left;
width: 80px;
}

計算があっていれば、このようなことも可能です。

5.カスタマイズの注意点

• 全体のサイズも変更できますが、上部のフリーエリアのサイズも変更しないと小さくすることは出来ません。
• エントリ部分を小さくした場合、コメントなどのフォームが崩れるかもしれません(未確認)
• エントリ本文やHTML部分に、スタイルシートで変更したサイズ以上のもの(画像など)がある場合には、カラム落ちやサイズの変更不良がおこります。

以上でサイズ変更の解説は終わりです。計算さえ合っていれば、数箇所の変更だけでブログ全体のサイズを好きにカスタマイズできます。好きなサイズに変更してみてください。

2006年12月02日

ブログ全体のサイズをカスタマイズする

今回はブログ全体のサイズをカスタマイズする方法を説明します。ブログ構成は、全体のボックス、左右カラム、エントリ部分はもちろん、忘れてはならないのは、それぞれに隣接するスペース部分です。これらが組み合ってサイズは決まっていますが、計算の仕方と、該当するスタイルシート部分がわかれば、それぞれのサイズ変更は意外と簡単です。
左右カラムやエントリ部分のサイズが変更できれば、更に使いやすくなると思いますので、是非挑戦してみてください。

1.ブログの標準サイズ指定

まずは標準で指定しているサイズを確認します。ここで重要なのは、スペースもサイズ計算に含まれる、という点です。忘れがちなので注意してください。(説明するテーブルは、実サイズと比率が異なります)

標準のブログサイズ

15 a

150 b

10 c

500 d

10 e

230 f

15 g

数字は指定しているピクセルサイズ(px)です。カスタマイズする前のブログを確認してみて下さい。このようなサイズになっているはずです。
下のアルファベットは計算の際に使用します。サイズは自由にできますが、合計が合っていなければなりません。

2.指定しているスタイルシート部分

サイズを指定しているのはスタイルシートです。ですので、スタイルシートの指定部分だけ変更すれば、ブログのサイズは変更できます(変更したサイズよりも大きい画像などをHTML部分で指定していればカラム落ちします)。
それぞれのサイズをしている部分だけ抜粋します。

全体のボックスサイズ(930px = a+b+c+d+e+f+g)
#box{
width: 930px;
margin-right: auto;
margin-left: auto;
border: solid 1px #000;
}

全体のボックスの左右スペース(各15px = a+g)
#box-margin{
margin: 0 15px;
}

左ボックス(左カラムとエントリ部分。計660px = b+c+d )
#box-left{
float: left;
width: 660px;
}

右ボックス(=右カラム。230px(+10px) = f+(e))
#box-right{
float: right;
width: 230px;
}

エントリ部分(500px = d)
#box-main{
float: right;
width: 500px;
}

左カラム(150px = b)
#box-sub{
float: left;
width: 150px;
}

カッコ内が指定しているサイズで、=以降は前記した計算用のアルファベットです。実際に計算すれば、そのサイズになりますね。
ある程度知識があれば、これでサイズの変更ができるかもしれませんが、もう少し説明します。計算さえ間違えなければ、サイズの変更は簡単です。

3.2カラムを作成する

3カラムというのは、2カラムをまず作成して、その片方のカラムの内部を更に2カラムにする、という構成です。ですので、まずは2カラムを作成します。

2カラムの構成

15 a

660 左ボックス b+c+d

240 右ボックス e+f

15 g

これが最初に作成する2カラムです。左ボックス内部を更に2カラムにして、左カラムとエントリ部分を作成しています。
このような構成になっているのがわかれば、あとは計算したサイズをそれぞれ変更すればブログのサイズ変更は完了です。

4.2カラムの計算

まずは準備です。指定しているスタイルシート部分と、色が赤の部分が指定している箇所です。実際に計算してみてください。

全体のボックスサイズ(a〜g)は930pxです。

#box{
width: 930px;
margin-right: auto;
margin-left: auto;
border: solid 1px #000;
}

全体のボックスに左右のマージンを指定することで、左右カラムのスペース(a g)になります。(930-(15+15)=900px)

#box-margin{
margin: 0 15px;
}

左カラム(b)とエントリ部分(d)とスペース部分(c)の合計が、左ボックスのサイズになります。(150+10+500=660px)

#box-left{
float: left;
width: 660px;
}

結果的に、全体のボックスから左右のスペースを引き、そこから左ボックスのサイズを引いたサイズが右ボックス+スペース部分になります。
930-(15+15)-(150+10+500)=240px
ここが少し紛らわしい部分ですが、メインボックス内部で、左ボックス(b+c+d)をfloatを使用して左に寄せて、右ボックス(fだけ)を同じくfloatを使用して右に寄せています。
右ボックス(f)のサイズが230pxで、これを右に寄せているので、結果的に右ボックスの左に10pxのスペース(e)ができます。
計算する上で、ここが一番間違えやすい部分ですので、よく注意してください。右カラム(f)の横のスペース(e)は結果的にできるスペースで、スタイルシートで直接指定するスペースではありません(もちろん計算してスペースができるようにします)。

#box-right{
float: right;(このfloatで右に寄せる)
width: 230px;
}

これで左右スペース、左ボックス、右ボックス(右カラム)が作成できました。次は左ボックス内に2カラムを作成し、左カラムとエントリ部分を作ります。

4.左ボックスに2カラムを作成する

左ボックスを先に作成しましたが、計算上は左カラムとエントリ部分とスペース部分のサイズを先に決定しないと作成できません。合計が結果的に左ボックスのサイズになるわけです。

左カラム(b)は150pxです。floatで左に寄せています。

#box-sub{
float: left;
width: 150px;
}

エントリ部分(d)は500pxです。floatで右に寄せています。

#box-main{
float: right;(右に寄せる)
width: 500px;
}

先ほどと同じですね。左カラム(b = 150px)を左に寄せ、エントリ部分(d = 500px)を右に寄せます。結果的に10pxのスペース(c)が間にできます(660-(150+500)=10px)。
このスペースも、直接的に指定するのではなく、結果的にできるスペースになります。
ちなみに3カラムを作成する方法はいくつかあるので、このカスタマイズは、この方法を使用したテンプレートでないと使用できません。

これでサイズ変更の説明は終わりです。次回は実際にサイズを変更してみましょう。

2006年10月13日

リンクの色を変更する

今回はリンクの色を変更します。リンク部分以外には色がついていないため、リンクの色を変更するだけでもかなり雰囲気が変わります。そして難しいカスタマイズではありませんから、気軽に変更してみて下さい。

タグの細かい解説はおこないませんので、興味が出たらタグの解説をされているサイトなどで勉強してみて下さい。
標準のリンクの色はサイト全体で統一です。設定を行っているのはこの部分です。

a,

a:link,

a:visited{

color: #1785e5;

text-decoration: none;

}

a:hover{

color: #1785e5;

text-decoration: underline;

}

a:active {}

1.リンクの色を変更する

color: #xxxxxx;の部分が色の設定です。#の後ろの6文字が色コードで、ここを変更するとリンクの色が変わります。変更してプレビューした時の画像をご覧下さい。

#e51717

#279bb3

ちなみに、
a:visited{
color: #1785e5;
の色コードを変更すると、リンクの色が変わり(正確に言うと違います)、
a:hover{
color: #1785e5;
の色コードを変更すると、リンクにカーソルを乗せた時のリンクの色が変わります。
プレビューで簡単に変更したときのイメージが表示できますので、色を変更したい場合はお試し下さい。

2.リンクに下線を設定する

text-decoration: underline;(下線あり)
text-decoration: none;(下線なし)
通常では、カーソルを乗せた時に下線を表示しています。いらない場合は変更して下さい。

3.左右カラムとメイン部分で違う設定

変更したい場合は次のようにして下さい。ただし、この場合フリーエリアは標準設定のリンク色のままです。また、リンクの色を変更する場合は一部だけでなく、全ての設定を貼り付けて下さい(例えばa:hoverだけ貼り付けたりしないように)

メイン部分のリンク色を変更

#box-main a,

#box-main a:link,

#box-main a:visited{

color: #ffb2d4;

text-decoration: none;

}

#box-main a:hover{

color: #ffb2d4;

text-decoration: underline;

}

#box-main a:active {}

左カラムのリンク色を変更

#box-sub a,

#box-sub a:link,

#box-sub a:visited{

color: #e51717;

text-decoration: none;

}

#box-sub a:hover{

color: #e51717;

text-decoration: underline;

}

#box-sub a:active {}

右カラムのリンク色を変更

#box-right a,

#box-right a:link,

#box-right a:visited{

color: #ffb2d4;

text-decoration: none;

}

#box-right a:hover{

color: #ffb2d4;

text-decoration: underline;

}

#box-right a:active {}

上記の変更を全て適用した画像

4.変更箇所について

カスタマイズに慣れていない方は、変更して追加する部分は全てスタイルシートの一番下にまとめた方が分かりやすいかもしれません。
本当は、/* 右カラム *//* メイン部分 *//* 左カラム */それぞれのエリアの中に置くのが適切です。この意味がわからない方は、もう少しスタイルシートについて勉強してみましょう。この各エリアは、このセレクタ部分のスタイルを指定しています。

変更を行う場合は、正常に動作しているスタイルシートを保存して、いつでも変更を元に戻せるようにしておきましょう。