きまぐれAWA's Life

アクセスカウンタ

zoom RSS CSS(フォント編)第1回 トップページのフォント♪ 『タイトル〜プロフィール』

<<   作成日時 : 2008/02/17 01:41   >>

ブログ気持玉 0 / トラックバック 0 / コメント 2

まずはトップページから順にフォントを変えていきます♪




 トップページ タイトルのフォント♪ 


トップページのタイトルは『サイズ・色・配置』の変更をします。

【フォントの大きさを指定します】
場所 『/* タイトルテキスト */』
『 #banner h1{ 』の後に下の文字列を追加します。
』には文字サイズを%で入力します。 (例:font-size:150%;)
変更後、画面で確認して適当な数値にします。

font-size:■%;

【フォントの色を指定します】
場所 『/* タイトルテキスト */』の文字列の後に新規で文字列を追加します。
』にはカラーコードを入力します。 (例:color:#7FFF00;)

#banner h1 a {
color:●;
}


【フォントの位置を指定します】
場所 『/* タイトルテキスト */』
先程入力した『 font-size:■%;の後に下の文字列を追加します。
入力する数値で『』は上から下、『』は右から左へと文字の位置が移動します。
変更後、画面で確認して適当な数値にします。

position:relative; top:▲px; left:◆px;

※タイトルフォントの表示位置は配置を指定しない場合、
選択しているデザインテンプレート用の配置が適用されます。
また、CSS編集のみで表示する場合は左上に配置されます。
デザインテンプレート用の文章が入っているケースもあるので、
位置調整をする際にはそれも考慮してフォントの配置を行います。


 B 『 トップ、月別、テーマ別ページ 』   CSS 全体Map 

/* タイトル領域内のアンカー */
#banner a{
}

/* タイトルテキスト */
#banner h1{
font-size:■%;
position:relative; top:▲px; left:◆px;
/* タイトル領域内での位置を指定します */
}

#banner h1 a {
color:●;
}


/* ログインボタン */
#banner #login{
/* タイトル領域内での位置を指定します */
}




好きな位置に配置できます(ん)

画像



※ 上記以外でも『中央揃え』や『右揃え』といった設定も出来ます。
 『中央揃え』なら

#banner h1{
text-align:center;


 『右揃え』なら

#banner h1{
text-align:right;


※ タイトルのフォントを非表示にすることも出来ます。
文字を表示したくない場合は下のように文字列を追加します。

/* タイトルテキスト */
#banner h1{
display:none;
/* タイトル領域内での位置を指定します */
}








  プロフィール欄のフォント♪  

プロフィール欄に移ります。
プロフィールラベル(ブログ名・ブログ紹介の文字)の『サイズ・色・配置』を変更します。
ためしに右揃えにしてみましょう♪

場所 『/* ラベル(「ブログ名」「自己紹介」) */』
#profile dt{ 』の後に下の文字列を追加します。

font-size:■%;
color:●;
text-align:right;

プロフィールの本体部分の『サイズ・色・配置』を変更します。
こちらも右揃えにします♪

場所 『/* プロフィールテキスト */』
#profile dd{ 』の後に下の文字列を追加します。

font-size:■%;
color:●;
text-align:right;

 B 『 トップ、月別、テーマ別ページ 』   CSS 全体Map 

/*---------------- プロフィール ----------------*/
#profile{
}

/* ラベル(「ブログ名」「自己紹介」) */
#profile dt{
font-size:■%;
color:●;
text-align:right;
}

/* プロフィールテキスト */
#profile dd{
font-size:■%;
color:●;
text-align:right;
}



プロフィールラベルの色とプロフィール文の色が変わりました♪







※プロフィールの文字は基本表示設定(ブログ紹介編集)でもデザインの指定が出来ます。
CSS編集でデザインを指定しなくても、強調・色・大きさなど記事を書く時と同じように
タグを使用して入力していけばオーケーです。

AWA's Life へようこそ♪

…であれば、

<span style=color:#36f><span style=font-size:larger>AWA's Life へようこそ♪</span></span>

このように記述すればいいわけです。
これでもフォントのデザインは変えることが出来ます。
また、『CSS編集』でプロフィール文全体のフォントの色を決めておき、
『ブログ紹介編集』で一部分だけ色を変えるといった応用もできたりします♪
 関連記事  ウェブリブログでパンヤの絵文字〜フリースペースの活用♪



今回はトップページのタイトル〜プロフィール欄のフォントのデザインが変えました♪
次回はトップページの記事一覧のフォントのデザインです。


|ω・)ノシ See you♪

|彡 サッ




■ ブログをいじっちゃおぅ♪ 〜 ブログのレシピ 〜 ■



テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(2件)

内 容 ニックネーム/日時
今回の変更の件でこのページには助けられました(ぺこ)
デフォの設定だとブログタイトルが左上に行っちゃって、しかも色が紺だったので困っていたのですよ(うる)
すごく分かりやすい解説だったのですぐに設定出来ました(ういんく)
本当にありがとうござます(すき)

で、1つだけお伺いしたいのですが・・
私が今回選んだテンプレだとカウンターがTOPも記事ページも右上に表示されています(まじ)
前の「パンヤ」だと左下に表示されていました(うる)
別にどっちでも良いと言えばよいのですが、もしCSSで変更出来れば変更したいな〜とか思ったのですが、そんなことは可能でしょうか??

もしご存知でしたらお暇な時に教えて頂けると幸いです(ぺこ)
ユーリル
2009/04/29 23:42
>ユーリルさん

お役にたててなによりです(にこ)
デザイン変更もうまくいったみたいですね〜(わら)
お疲れ様です(ん)


>カウンターの位置
たぶんタイトル画像の下とかになら配置とか出来ると思います。
ちょっと見てみますのでお時間くださいませ(ぺこ)
mairis
2009/04/30 08:49

コメントする help

ニックネーム
URL(任意)
本 文
  現在の閲覧者数:

* ぱにゃステ *

『ぱにゃステ』 customized by mairis
 
 
ふぉろーみー

CSS(フォント編)第1回 トップページのフォント♪ 『タイトル〜プロフィール』 きまぐれAWA's Life/BIGLOBEウェブリブログ
文字サイズ:       閉じる