｜ADMIN｜EDIT｜RES｜

果報は寝て待て(-_☆)

果報を寝て待ってはいるのですが・・・

04月 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

◇ ◆ ◇ Recent Entry ◇ ◆ ◇

≪ [168] [167] [166] [1018] [165] [164] [163] [162] [1019] [161] [160] ≫

[PR]

2024/04/19 (Fri)｜

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

タイトルと日付を両端に、そして１行で表示させる

2006/08/20 (Sun)｜[customize]ＨＴＭＬ/ＣＳＳ

さらにメンテナンス前、集中投稿(爆)

フリースペース作った時にもう一つ手を加えてみたコト。

タイトルを表示させている部分。
ココにタイトルと日付を１行で書いてます。左右の両端に・・・。

ｔａｂｌｅタグを使えば別になんの動作もナイ作業なのですが、「ｔａｂｌｅタグはあんまり使いたくないな・・・」って場合に強い見方になるのがｆｌｏａｔタグなのです（￣ー￣+

ｆｌｏａｔを使えば、あとはｔｅｘｔｰａｌｉｇｎで位置をしていするダケで一行に収めるコトができますし、何かとＣＳＳで変更が自由にできるので便利ですよ(ﾟーﾟ*)

まず、ＨＴＭＬはスタイルを適用できるように、各div要素にクラス名を付加しておきます。
テンプレートに使用しているクラス名と重ならないように注意しましょう。

クラス名の書き方：
<div class="クラス名">
例）　私が書いたＨＴＭＬはこんなカンジです。
<div class="infomation">
<div class="subject">メンテナンスのお知らせ</div>
<div class="date">８月２０日(Sun)</div>
</div>

そしてＣＳＳ。
赤字の部分がミソ(？)な部分です(笑)

div.指定した左側のクラス名 {
　text-align : left;
　float : left;

}
div.指定した右側のクラス名 {
　text-align : right;
}
div.infomation {
　background-color : #ffffff;　/*背景色*/
　color : #666666;　/*文字色*/
　font-weight : bold;　/*太字に設定*/
　padding : 5px;　/*枠の内側の余白*/
}

infomationの中身は適当に調整してもらえばいいかと思います。

　＜＜ prev entry 　　｜ HOME ｜　　 next entry ＞＞　　　　

+++ この記事へのコメント +++

name
title
color
mail
URL
comment
preview	ご利用のブラウザ、設定ではご利用になれません。
password
secret?	※チェックすると管理者へのみの表示となります。

無題

divのclassをCSSの編集に設定するのが、なかなか知らない人には伝わりにくいですよね。yozoもいつも心をくだくようにしています。
大変参考になりましたよ。m(_ _)m
追伸：トラバありがとーございまっす♪
こちらからも返しのトラバ入れさせていただきました。m(_ _)m

yozo URL 2006/08/22(Tue)16:43:42
EDIT｜RES

Re:無題

>divのclassをCSSの編集に設定するのが、なかなか知らない人には伝わりにくいですよね。

細かい説明は省いちゃったんで、なんか不親切な説明だなぁと我ながら思ってるのですが・・・(ﾟ▽ﾟ；)

わかる人には『div要素にクラス名を付加して～…』で伝わるだろうけど、わかんない人は実際見た方が早いと思って・・・。
それでもわからなければＳａｍｐｌｅ残すからコレ使ってってカンジで(爆)

ＴＢありがとうございました♪(ﾟ▽ﾟ*)

Ｐ．Ｓ．
コメント書き込み不能でお騒がせしてスミマセンでしたｍ(＿＿；)ｍ

[ 2006/08/22 17:00 ]

+++ この記事へのトラックバック +++

この記事にトラックバックする：

Search in BLOG