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

--年--月--日

スポンサーサイト

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

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>

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

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

プロフィール

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

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

Appendix


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