スポンサーサイト

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

前後の記事

最近の記事

管理者にだけ表示を許可する

fc2tyle_custom[head部分のカスタマイズ]

カスタマイズトップへ戻る

No.【2】header(紹介文・ブログタイトル等)条件別カスタマイズ方法
下記の条件以外のカスタマイズをされたい方はお問い合わせよりご質問下さい。記事内に公開します。
header h1とは
ブログタイトルの文字サイズ変更方法
ブログタイトルの位置を少し変えたい
ブログタイトルの色を変えたい
ブログタイトルと紹介文の位置を入れ替えたい
ブログタイトル部分の背景色を変えたい
header h1とは
手をつける場所:HTMLスタイルシート
headerh1では、ブログタイトルの設定をしています。ここのタグを変更する事により、ブログタイトルの文字が変わります。
▲トップへ
ブログタイトルの文字サイズ変更方法
手をつける場所:HTMLスタイルシート
header h1にある
font-size:110%
の数値を大きくすれば大きくなり、小さくすれば小さくなります。
100%が基準値で、ブログタイトルでは基準よりも10%大きく設定されている、という事です。
▲トップへ
ブログタイトルの位置を少し変えたい
手をつける場所:HTMLスタイルシート
header h1 を見るとmarginが見つかるはずです。
このmarginというのは、他の領域との間隔を指定するもので、ここでは
margin:0px 0px 0px 5px;となっています。
左から順番に上、右、下、左と、時計回りで間隔の幅を指定します。ここでは、左に5px間隔があるという事が分かります。
この方法では大きな配置変えが出来ませんが、少し動かしたい程度ならこれで解決できます。
▲トップへ
ブログタイトル色を変えたい
手をつける場所:HTMLスタイルシート
ブログタイトルのリンク色を変更します。
・まだクリックされていない場合の色は
.header a:link
・すでにクリックされた場合の色は
.header a:visited
・マウスをタイトルの上に乗せた時の色は
.header a:hover
↑ちなみに、デフォルトではマウスオンの時にbackgroundに色、枠線を入れて背景が浮き上がるようにしています。
それぞれテキストサイズを変更するにはfont-size:~pxをつけくわえます。これにより例えばマウスオンの時に文字サイズを大きくする事もできます。
▲トップへ
ブログタイトルと紹介文の位置を入れ替えたい
手をつける場所:HTMLスタイルシート
<div class="intro"<<%introduction></div>
<div class="header"><h1><a href="./"><%blog_name></a></h1></div>
どちらかを切り取り、上にもってきたい方を上にして貼り付けするとブログタイトルが上、紹介文が下になります。
▲トップへ
ブログタイトル部分の背景色を変えたい
手をつける場所:HTMLスタイルシート
ブログタイトル部分の背景色を変えるには、
.header h1のbackground-colorと
.header のbackground-colorのコードを変えると色が変わります。
背景色を黒色にしてみましょう。
.header h1 {省略~background-color:#778899
.header {省略~background-color:#778899
の赤い部分を#000000にすると、ブログタイトル部分が真っ黒になるはずです。
▲トップへ

前後の記事

最近の記事

トラックバック

この記事へのトラックバックURL:
http://fc2blogshop.blog13.fc2.com/tb.php/80-c534132d


コメント

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