« カスタマイズ2(スタイルシートの作成&背景を変える) | トップページ | カスタマイズ4(スクロールバー) »

2004.02.06

カスタマイズ3(タイトル)

昨日は背景をいじったので、今日はタイトルのとこを変えてみます。
昨日作ったmystyle.cssを開いて(エディタかコーディングソフトで開けます)、スタイルをプラスします。
タイトル部分のスタイルを決めているのは「#banner」と「H1」。
#bannerはタイトル部分全体、H1はタイトル文字部分のスタイルを決めているようです。
私は先に「アップロード」でcssという名前のフォルダを作って「lega.jpg」という写真をアップしておきました。

#banner {
background-image: url(lega.jpg);
background-repeat: no-repeat;
background-position: center;
}

という文を書き加えます。
バックグラウンドのイメージは「lega.jpg」、繰り返しはなしで(小さい画像だったらrepeatにするのがいいですね)、位置は中央に。
タイトルの背景に画像が映し出されました。
タイトル部分だけ変えたいなって場合は、

h1{
background-color: #0099CC;
font-family: "Arial", "Helvetica", "sans-serif";
}

なんて書き加えてみると、タイトル文字の色とフォントも変えられます。
ただ、フォント(字体)は環境によっては見られなかったり文字化けする場合があるのであまり変えない方がいいかも。

フォントもちょっと変わったでしょっ

|

« カスタマイズ2(スタイルシートの作成&背景を変える) | トップページ | カスタマイズ4(スクロールバー) »

ウェブログ・ココログ関連」カテゴリの記事

コメント

555踏んでましたヽ(´ー`;)ノ

で、★環境ではちょっとだけ違って見えます。
というのはProxomitronというプロキシソフトを間に入れてて、これがまたいろんなもんを無効にしてくれるからなんですが(笑)
もちろんカスタマイズしてますのでそんな極端じゃないんですけど。

具体的にはフォントサイズが無効にされてるっぽいです。
なので文字が大きくなって見えてます。(ブラウザの設定値「中」っぽい)
だからと言って別に困ってるわけじゃないんですけど。Proxomitronをスルーすれば問題なし(Shift押下で一発)。
どんどんカスタマイズしていってください(笑)

Osakaフォントって見てみたい…(笑)

★もちょっと別件でWeblog導入テスト中です。
ここはTypePadベースですが、★はMovable TypeとGSBlogをテストしてます。
MTは海外の有名どころですがGSBlogは日本人が作者です。
MTも設定変更で対応可能ですが、GSBlogは最初からPHPで組まれてます。結構設定も楽だし。

近く自宅でWebサーバーを立てて友人と独自ドメインで色々遊ぼうという話が。
で、現在★PCではApacheとPerl、PHP、MySQLは稼動中です。
#実はとっくに独自ドメインは持ってて、さらに今朝DNSの設定が伝播したので独自ドメインで工事中画面だけは見えるようになってます(^^;
#やっぱWindowsでやるのはパーミッション設定とか面倒かも…

投稿: ★ | 2004.02.06 21:17

今のフォントは「明朝」あるいは「Times New Roman」ぽい字体になってますです。
これはニフティ提供のデフォのフォントなの。
スタイルシート見たらGeorgia, Times, serifって書いてあったよ。
これから予定しているのはスクロールバーの色とか、
あとは各記事のタイトルのとこが寂しいんでこれも変えてみよっかなって考えています。
それ以上は、まだ思いつかない(爆)。
googleとか貼るのも色気ないしなあ、なんかいいアイディアない??(笑)

★ちゃんの後半何言ってんだか分からないんだけど(爆)
独自ドメインとったのは前聞いてたんで、どうしたかなあと思っていました。
まだ工事中なのね、ちょっと楽しみ、できたら絶対教えてねっ。
私もパーミッション設定は腹立つなあ、と言いつつ、
掲示板の設定でしかやったことないし、それもFTPソフトで分かりやすく表示してあるんで
贅沢言うなって感じなんですけど(笑)。

投稿: しのぶ | 2004.02.07 00:58

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/12358/171307

この記事へのトラックバック一覧です: カスタマイズ3(タイトル):

« カスタマイズ2(スタイルシートの作成&背景を変える) | トップページ | カスタマイズ4(スクロールバー) »