k e n t 4 9 8 9 s w a t c h
********金融関係のニュースなどblog
■ 初心者のためのNews-Handlerでの「スタイル変更」講座

掲示板でもスタイルシート関係の質問が増えてきたので、これが適切かどうかの自信は無いのですが初心者のためのNews-Handlerでの「スタイル変更」講座というものを書いてみます。他のblogツール(Movable Typeなど)で構築されたサイトは技術解説やTipsのエントリがけっこうあるのですが、News-Handlerであるとそういったエントリをあまり見かけないので、まぁ参考までに。Trackbackがあればまた続けてみたいですね。

そもそもNews-Handlerの表示の仕組み
まず、News-Handlerでどのように表示が行われているか、を簡単に説明してみます。後の説明をわかりやすくするために書いてますが、だいたいの方はわかっているようなので、その場合は読み飛ばして下さい。

News-Handlerの構造はだいたいこんな感じです。

「個別の記事(エントリー)」→「テンプレート」+「スタイルシート」→→読者

いやぁ、さっぱりわからないな(笑)。というわけで詳しく説明すると、
・まず、皆さんが行っているように、管理画面で記事を投稿する。これが、「個別の記事」になります。
・この「個別の記事」が、「テンプレート」に読み込まれて、実際には表示されるようになります。
・そして、実際に表示されるときに、文章のそれぞれの部分をどんな風に(大きさ、色、フォント等)表示するかを、「スタイルシート」と組み合わせてブラウザが解釈します。

具体的な例で考えると――
管理画面から投稿された記事がまずあります。
管理画面から投稿された記事タイトル
管理画面から投稿された記事本文
これが、テンプレートの独自タグと呼ばれている部分に読み込まれます。例えばこんなテンプレートだと――
〈div class=\"title\"〉〈a href=\"{$entry_url[entry]}\" title=\"permlink\"〉■{$ename[entry]}→ここに記事タイトルが埋め込まれる〈/a〉〈/div〉〈BR〉
〈div class=\"entry\"〉{$etext[entry]}→ここに記事本文が埋め込まれる〈/div〉
独自タグに記事が読み込まれて、最終的には
〈div class=\"title\"〉〈a href=\"{$entry_url[entry]}\" title=\"permlink\"〉■管理画面から投稿された記事タイトル〈/a〉〈/div〉〈BR〉
〈div class=\"entry\"〉管理画面から投稿された記事本文〈/div〉
そして、特にタグについて詳しく知る必要はないですが、この文章は、classで囲まれた部分ごとに、スタイルシートによって書式が決定されて画面に表示されるようになります。

この例であれば、記事タイトルは〈div class=\"title\"〉〈/div〉というタグに囲まれているので「title」という書式が適用され、本文は、〈div class=\"entry\"〉〈/div〉というタグで囲まれているので、「entry」という書式が適用されるわけです。

スタイルシートの簡単な見方
テンプレートによって、文章のいろんな部分が、様々なclassに区切られています。試しにこのWeblogや、あなたのWeblogの「ソース」を見てみると良いでしょう。そのclass毎の書式設定が、スタイルシートです。
例えば、私のスタイルシートでさっきのtitleとentryの書式設定はこんな形で書いています。
.title {
PADDING-LEFT: 10px; →左から10ピクセル間隔を空けて表示始める
FONT-WEIGHT: bolf; →ボールドにする
FONT-SIZE: medium; →フォントサイズは中くらい
COLOR: #c20638; →色は、#c20638
}
.entry {
PADDING-LEFT: 10px ; →左から10ピクセル間隔を空けて表示始める
PADDING-RIGHT: 10px ; →右から10ピクセル間隔を空けるように折り返す
FONT-SIZE: small; →フォントサイズは小
COLOR: #666; →色は、#666
}
ちなみに私のスタイルシートはかなり汚いし問題あるのであくまでご参考。
ここまでがぼんやりとでも理解できると後は簡単です。

亜流:Weblogの見た目を簡単にいじる方法

まず自分のWeblogを表示させましょう。そして、ソースを表示させます。
そして、ちょっと大変ですが、見栄えを変えたい部分が、どんなclassで囲まれているか、を見つけましょう。
見つかったら簡単です。あとは、スタイルシートで、該当するclassの箇所を色々書き直してみれば良いのです。
とほほのスタイルシート入門
などで、スタイルシートの書き方を調べれば良いでしょう。
他には、「真似したい人のスタイルシートを見る」という手もあります。
スタイルシートは、管理画面のCSSファイルの編集から、出来ます。
※滅茶苦茶になってしまったら、テンプレートを変更すればリセットが出来ます

これで一般的な初心者の人はわかるのかな? 意見はコメントかトラックバック下さい。
本当はもっと留意することもあるのかもしれませんが、専門家ぢゃないので、ご指摘下さい。
これを読んだ人が、素敵なWeblogを作られることを祈ります。

参考
News-Handler FAQ →こっちにエントリしたほうがよかったかも

# なんてな!

投稿時間 2004年01月17日 | Comment( 2 ) | TrackBack( 0 ) | Bulkfeedsで関連記事検索



a b o u t

□編集人:kent4989
□銀行関係のニュースと、日々思ったコトを書き綴っています。不定期更新です。
□リンク、TrackBackなどは当然ですがご自由にどうぞ。
□E-Mail:kent4989@hotmail.com
archives
2004年7月
2004年4月
2004年3月
2004年2月
2004年1月
2003年12月
2003年11月
2003年10月
2003年9月
2003年8月
2003年7月
categories
Weblog
銀行
システム開発
雑件
このサイトについて
site search

myblog list
金融関連のblog検索
by FeedBack




This Page Powerd by
News-Handler