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

No.【２】header(紹介文・ブログタイトル等)条件別カスタマイズ方法

下記の条件以外のカスタマイズをされたい方はお問い合わせよりご質問下さい。記事内に公開します。

⇒header h1とは ⇒ブログタイトルの文字サイズ変更方法 ⇒ブログタイトルの位置を少し変えたい ⇒ブログタイトルの色を変えたい ⇒ブログタイトルと紹介文の位置を入れ替えたい ⇒ブログタイトル部分の背景色を変えたい

header h1とは

手をつける場所：ＨＴＭＬ｜スタイルシート headerh1では、ブログタイトルの設定をしています。ここのタグを変更する事により、ブログタイトルの文字が変わります。 ▲トップへ

ブログタイトルの文字サイズ変更方法

手をつける場所：ＨＴＭＬ｜スタイルシート header h1にある font-size:110% の数値を大きくすれば大きくなり、小さくすれば小さくなります。 100%が基準値で、ブログタイトルでは基準よりも10％大きく設定されている、という事です。 ▲トップへ

ブログタイトルの位置を少し変えたい

手をつける場所：ＨＴＭＬ｜スタイルシート header h1 を見るとmarginが見つかるはずです。 このmarginというのは、他の領域との間隔を指定するもので、ここでは margin:0px 0px 0px 5px;となっています。 左から順番に上、右、下、左と、時計回りで間隔の幅を指定します。ここでは、左に５px間隔があるという事が分かります。 この方法では大きな配置変えが出来ませんが、少し動かしたい程度ならこれで解決できます。 ▲トップへ

ブログタイトル色を変えたい

手をつける場所：ＨＴＭＬ｜スタイルシート ブログタイトルのリンク色を変更します。 ・まだクリックされていない場合の色は .header a:link ・すでにクリックされた場合の色は .header a:visited ・マウスをタイトルの上に乗せた時の色は .header a:hover ↑ちなみに、デフォルトではマウスオンの時にbackgroundに色、枠線を入れて背景が浮き上がるようにしています。 それぞれテキストサイズを変更するにはfont-size:〜pxをつけくわえます。これにより例えばマウスオンの時に文字サイズを大きくする事もできます。 ▲トップへ

ブログタイトルと紹介文の位置を入れ替えたい

手をつける場所：ＨＴＭＬ｜スタイルシート <div class="intro"<<%introduction></div> <div class="header"><h1><a href="./"><%blog_name></a></h1></div> どちらかを切り取り、上にもってきたい方を上にして貼り付けするとブログタイトルが上、紹介文が下になります。 ▲トップへ

ブログタイトル部分の背景色を変えたい

手をつける場所：ＨＴＭＬ｜スタイルシート ブログタイトル部分の背景色を変えるには、 .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

コメント