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

--年--月--日

スポンサーサイト

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

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年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.変更箇所について

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

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

プロフィール

templatetube

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

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

Appendix


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