Powered By FC2ブログ
ブログやるならFC2ブログ
今すぐブログを作っちゃおう!

--年--月--日

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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月22日

バナーを2分割して、左右別なコンテンツを挿入するカスタマイズ

今回はバナー部分を左右に2分割して、汎用的に使用できるようにカスタマイズします。左右に分割するだけなら難しくないんですが、分割して何をやりたいかを決めていないので、カスタマイズによっては修正が必要になる可能性があります。
それ程複雑なことをしなければ、後はテキストの位置などを追加するだけで対応できますので、まずはお試し下さい。

1.バナー部分のスタイルシートをカスタマイズする

とりあえず汎用的に対応できるようにスタイルシートをカスタマイズしておきます。その後HTML部分を変更する例をご紹介します。


#banner{
width: 100%;
background: #ebebeb;
border-bottom: solid 1px #000;
}

#banner a,
#banner a:link,
#banner a:visited{
color: #000;
text-decoration: none;
}
#banner a:hover{
color: #000;
text-decoration: underline;
}
#banner a:active{}

#bannerbox{
text-align: left;
color: #000;
padding: 6px 20px;
}

#banner h1,
#banner h1 a{
font-size: 24px;/*ブログタイトルの文字サイズ*/
margin-bottom: 6px;
}

#banner h2{
color: #000;
font-size: 12px;/*ブログの説明の文字サイズ*/
}

#bannerleftbox{
float: left;
width: auto;/*左ボックス。サイズは自動*/
}

#bannerrightbox{
float :right;
width: auto;/*右ボックス。サイズは自動*/
}

#bannerright{
font-size: 12px;
color: #000;
text-align: right;/*右ボックスの文字は右寄せ*/
}

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

説明はコメントで簡単にしてあります。/*     ヘッダ・バナー部分     */内のスタイルシートを上記のスタイルシートに置き換えて下さい。

2.カスタマイズ例。左にブログタイトル。右にブログの説明文

バナー
次はHTML部分をカスタマイズします。一番簡単な例ですね。


<div id="banner">
<div id="bannerbox">

<div id="bannerleftbox">
<div id="bannerleft">
<h1><a href="<%url>" accesskey="0" title="<%blog_name>"><%blog_name></a></h1>
</div>
</div>

<div id="bannerrightbox">
<div id="bannerright">
<h2><%introduction></h2>
</div>
</div>

<div style="clear: both;"></div>
</div><!-- bannerbox -->
</div><!-- banner -->

ブログの説明文は右寄せになります。左寄せにしたい場合、スタイルシートのtext-align: right;をtext-align: left;に変更してください。

3.ブログタイトル、ブログの説明が左で、右に画像などを配置。

バナー
どうしても右が空いてしまうので、このようなパターンがいいかもしれません。


<div id="banner">
<div id="bannerbox">

<div id="bannerleftbox">
<div id="bannerleft">
<h1><a href="<%url>" accesskey="0" title="<%blog_name>"><%blog_name></a></h1>
<h2><%introduction></h2>
</div>
</div>

<div id="bannerrightbox">
<div id="bannerright">
<img src="画像のアドレス" width="幅" height="高さ" alt="代替文字列" />
</div>
</div>

<div style="clear: both;"></div>
</div><!-- bannerbox -->
</div><!-- banner -->

4.検索窓を右に配置

バナー
単に画像を検索フォームに置き換えただけですが、この方が実用的かもしれません。ただし注意点があります。


<div id="banner">
<div id="bannerbox">

<div id="bannerleftbox">
<div id="bannerleft">
<h1><a href="<%url>" accesskey="0" title="<%blog_name>"><%blog_name></a></h1>
<h2><%introduction></h2>
</div>
</div>

<div id="bannerrightbox">
<div id="bannerright">
<form method="get" action="検索フォームのアドレス">
<input id="search-text" type="text" name="q" size="40" value="">
<input id="submit" type="submit" value="Search">
</div>
</div>

<div style="clear: both;"></div>
</div><!-- bannerbox -->
</div><!-- banner -->

注意点は検索フォームのアドレスで、ちなみにこのブログだとhttp://templatetube.blog78.fc2.com/index.php?ul=541910f6318cdaceになるんですが、php?以下の文字の規則性がわからないので、使用する場合は、まずプラグインで検索フォームを表示して、ソースを参考にしてアドレスを調べて下さい。そのアドレスを挿入すればカスタマイズできます。

5.右にカレンダーを設置

バナー
実はカレンダー用のスタイルシートも用意してあるので、このようなこともできます、ということで。


<div id="banner">
<div id="bannerbox">

<div id="bannerleftbox">
<div id="bannerleft">
<h1><a href="<%url>" accesskey="0" title="<%blog_name>"><%blog_name></a></h1>
<h2><%introduction></h2>
</div>
</div>

<div id="bannerrightbox">
<div id="bannerright">
<div class="leftcalendar"><!-- カレンダー -->
<div class="calendarbox"><!-- カレンダーボックス -->
<table summary="カレンダー" class="calendar">
<caption>
<a href="<%prev_month_link>" title="前月">«</a> <%now_year> ⁄ <%now_month> <a href="<%next_month_link>" title="次月">»</a>
</caption>
<tr>
<th abbr="日曜日" scope="row"><span class="sun">S</span></th>
<th abbr="月曜日" scope="row">M</th>
<th abbr="火曜日" scope="row">T</th>
<th abbr="水曜日" scope="row">W</th>
<th abbr="木曜日" scope="row">T</th>
<th abbr="金曜日" scope="row">F</th>
<th abbr="土曜日" scope="row"><span class="sat">S</span></th>
</tr>
<!--calender-->
<tr>
<td><span class="sun"><%calender_sun></span></td>
<td><%calender_mon></td>
<td><%calender_tue></td>
<td><%calender_wed></td>
<td><%calender_thu></td>
<td><%calender_fri></td>
<td><span class="sat"><%calender_sat></span></td>
</tr>
<!--/calender-->
</table>
</div><!-- カレンダーボックス -->
</div><!-- カレンダー -->
</div>
</div>

<div style="clear: both;"></div>
</div><!-- bannerbox -->
</div><!-- banner -->

この場合、リンクの色の変更やブログタイトルの画像化、背景色の変更、などのカスタマイズをすると更に見映えがよくなります。ちなみにこのカレンダーは、左カラムに設置することを想定していますので、プラグインの上に置いてみてもいいかもしれません。

以上がバナー部分のカスタマイズ基本編でした。カスタマイズの内容によって、多少の変更が必要となりますので、これをベースにいろいろといじってみて下さい。

2006年12月17日

バナー(トップ)部分のカスタマイズ方法

今回はタイトル部分(バナー部分)のカスタマイズです。バナーは一番上に表示されますので、ブログの印象としてはかなり大きな部分を占めます。文字の大きさや、背景などを自分ので表現してみてください。
(バナー部分に通常テキストを挿入するのは想定していませんので、その場合はスタイルシートを修正する必要があります。)

1.タイトル部分のHTML


<div id="banner">
<div id="bannerbox">
<h1><a href="<%url>" accesskey="0" title="<%blog_name>"><%blog_name></a></h1>
<h2><%introduction></h2>
</div><!-- bannerbox -->
</div><!-- banner -->

h1でタイトル、h2でブログの説明を表示しています。

2.タイトル部分のスタイルシート


#banner{
width: 100%;
background: #ebebeb;
border-bottom: solid 1px #000;
}

#banner a,
#banner a:link,
#banner a:visited{
color: #000;
font-size: 24px;
text-decoration: none;
}
#banner a:hover{
color: #000;
font-size: 24px;
text-decoration: underline;
}
#banner a:active{}

#bannerbox{
text-align: left;
color: #000;
padding: 6px 20px;
}

#banner h1,
#banner h1 a{
margin-bottom: 6px;
font-size: 24px;
font-weight: bold;
}

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

3.スタイルシートでカスタマイズ


#banner{
width: 100%;
background: #ebebeb;背景
border-bottom: solid 1px #000;バナー下のボーダー指定
}

バナー
バナー全体の指定です。背景を白に(background: #fff;)、ボーダーを削除すると、すっきりしたトップになります。


#banner a,
#banner a:link,
#banner a:visited{
color: #000;リンクの
font-size: 24px;削除
text-decoration: none;
}
#banner a:hover{
color: #000;カーソルを乗せた時のリンクの
font-size: 24px;削除
text-decoration: underline;
}
#banner a:active{}

リンク部分(基本的にブログタイトル部分)の指定。カスタマイズは、clolorの部分でブログタイトルリンクの色を変更できます。
カスタマイズしないなら問題ありませんが(ただし必要でもない)、ブログタイトルのサイズを変更したり、バナー部分にテキストリンクを設定する場合、削除部分(font-size: 24px;)を削除してください。


#bannerbox{
text-align: left;テキストの位置
color: #000;文字の色
padding: 6px 20px;上下、左右のパディング
}

バナー部分のボックス指定です。テキストをセンタリングしたり、文字の色(通常テキストの色なので、特に必要ありません。ここにfont-size: 12px;を追加すると、バナー部分にテキストを表示できます。)を変更したりできます。
paddingですが、これはボックス内部の余白を指定しています。上下に6px、左右に20pxの内部余白を指定していますが、もちろん変更可能です。

バナー
padding: 3px;に変更した例。内部余白の重要性がわかると思います。


#banner h1,
#banner h1 a{
margin-bottom: 6px;タイトル下のスペース
font-size: 24px;ブログタイトルのフォントサイズ
font-weight: bold;ブログタイトルを太字にする
}

ブログタイトルの表示部分です。タイトル下のスペースは、ブログの説明文をどれだけ離すかの指定です。タイトルのフォントサイズはお好きなサイズで(注:カスタマイズの例を参照)。また太字にしたくない場合は、font-weight: bold;を削除してください。


#banner h2{
color: #000;文字の色
font-size: 12px;文字のサイズ
}

ブログの説明文の指定。色、サイズは変更可能です。

4.カスタマイズの例

よくあるパターンを紹介します。

ブログタイトルのフォントを小さく、通常の太さで表示


#banner a,
#banner a:link,
#banner a:visited{
color: #000;
font-size: 24px;削除
text-decoration: none;
}
#banner a:hover{
color: #000;
font-size: 24px;削除
text-decoration: underline;
}
#banner a:active{}

#banner h1,
#banner h1 a{
margin-bottom: 6px;調整
font-size: 14px;
font-weight: bold;削除
}

バナー
文字のサイズを14pxにして、通常の太さで表示。この場合、マージンを4px位にした方がよいかもしれません。

ブログタイトルに画像を使用

この場合、HTMLをカスタマイズします。


<h1><a href="<%url>" accesskey="0" title="<%blog_name>"><img src="画像のアドレス" width="横サイズ" height="縦サイズ" alt="<%blog_name>" /></a></h1>

バナー
赤文字部分は使用する画像に合わせて変更してください。これでバナーが使用できます。

以上が簡単にできるカスタマイズの説明でした。もう少し複雑なカスタマイズ(バナーを分割して左にタイトルを、右に画像や検索フォームを設置)などは次回までお待ち下さい。

2006年12月02日

テーブルについて

秘密の質問をいただいたんですが、ブログのアドレスと質問内容が少し不明ですので、できましたら再度ご連絡いただけますでしょうか。
わかる範囲でお答えすると、テーブル自体はスタイルシートで何も設定していないので、テーブルを使うとブラウザの標準スタイルで表示されます。
細かく指定したい場合、スタイルシートに追加するか、エントリ部分で直接スタイルシートを適用(styleを使用)するしかありません。

単純にテーブルを使用した例です。(サイズと背景とだけ指定)

15
a
150
b
10
c
500
d
10
e
230
f
15
g
カテゴリ : 未分類記事のURL コメント (5) トラックバック (0)

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カラムを作成する方法はいくつかあるので、このカスタマイズは、この方法を使用したテンプレートでないと使用できません。

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

プロフィール

templatetube

Author:templatetube
FC2ブログへようこそ!

最近の記事
最近のコメント
最近のトラックバック
月別アーカイブ
カテゴリー
ブロとも申請フォーム

Appendix


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。