2006年06月12日

floatとHTMLの謎解明

前からHTMLとの関係がどうもわからなかったのですが、昨日、人の助けを借りてようやくわかりました。

seesaa-kaizou.gif

まず、HTMLには、
<head>に、「この外部CSSをデザインとして呼び出すナリよ」と書いてあってリンクが貼ってあります。
そして、
<body>には、「<div class="content"><div class="blog">」などの<div>の羅列があります。
これは、位置を決めるモノではなく、読み込むものを読み込む順番に書いてあるだけなんですな。

今まで、CSSでデザインを決めることと、外部ファイルになっていることはわかっていたのですが、どうやってサイドバーやコンテンツの場所を指定するのだろうという頓珍漢な事を考えていたわけです。

頓珍漢珍一休さんだよ!!文部省推薦だよ!!

早い話、HTMLには「コレとコレをこの順番で呼び出すよ」とあり、呼び出されたものは呼び出された順番に並びます。
バナーやサイドバー、コンテンツなどを「一つのbox」のようなものと考えれば、boxは呼ばれた順番に表示され、全て上から順番に左寄せになるんですが、ここで幅のデカイboxがあったりなんかすると、二つが左右に並ばず、下に落ちて行きます。だから、全てのboxの幅が物凄く小さければ一列に並んでしまうこともあり得るわけです。

全部の幅が小さかったら、こんなこともアリ。
seesaa-css22.gif

幅を間違えると、枠内に入りきらずこうなったりする。
seesaa-css33.gif

じゃあ、そのboxの大きさ(幅、間隔)を決めるのは何かといえば、CSSなんですな。

ふぃー( ̄д ̄)


まあ、言うなれば、そりゃそうじゃんてなところですが、どうも勘違いをしていたのでした。

まとめ
1:HTMLにはどの外部CSSファイルを呼び出すか書いてある
2:HTMLには、どのbox(コンテンツ)を呼び出すか、並べたい順番に書いてある
3:CSSでは、ブログ全体の幅を決めている。
4:CSSでは、box(コンテンツ)ごとのサイズを決めている。
5:CSSでは、boxをどういった外見にするかを決めている。
6:呼び出されたboxは呼び出された順番に並ぶ。
7:横に並ぶboxは幅によって決まる。入れない場合は押し出されて下の段に落ちる。(全てのboxは左寄せになるようになっている。これはCSSでボックスごとに指定する。floatで指定。bannerなどは、centerとやってあることもある)


ヤレヤレ。(-_-)
漸くわかったよ。
なんだか、cssは文字の色や背景なんかの、細かいことを指定するだけのものの様な気がしていて、右サイドバーが落ちてしまった時には、ブログ全体の幅を変えれば良いとはわかっていたけど、どうしてそういったことをするのかが分かってなかったよ。

posted by 國王 at 04:37| ウィーン ☀| Comment(2) | TrackBack(1) | CSSのお勉強 | このブログの読者になる | 更新情報をチェックする

2006年04月26日

CSS覚え書き2

【ブログの全体ぽい】body
背景固定
background-attachment:fixed;
【ブログのトップと幅っぽい】#container

+++++++++++++++

【リンク】
a{
color:#CC3300;
text-decoration:none;
}
(text-decoration: underline; だと下線が付くらしい)

【タイトルの文字】h1
【記事の日付】h2
【記事のタイトル】h3
【トップの絵の高さとマージンぽい】#banner
【紹介文】.description
【上のトップへ行ったりNEXTへ行ったり】.navi

+++++++++++++

【記事部分の胴体】#content
【一つずつの記事の胴体】.blog
【一つずつの記事の胴体色々】.blogbody
【日付の所】.date
【記事のタイトル】.title
【タイトルのリンク】.title a
【記事の文字】.text
【ポストしたシト】.posted
【ポストのリンク】.posted a

++++++++++++

【サイドバー左の胴体】#links-left
【サイドバー右の胴体】#links

++++++++++++

【カレンダー】#calendar
【カレンダーの枠】#calendar table
【カレンダーヘッド】.calendarhead
【カレンダーの日付】.calendarday
【カレンダー日付のリンク】.calendarday a


【サイドバーのタイトル】.sidetitle
【サイドバーのサイズ】.side
【サイドバーのリンク】.side a
【タブン、サイドバーの検索の奴】.side input
posted by 國王 at 02:57| ウィーン ☁| Comment(0) | TrackBack(0) | CSSのお勉強 | このブログの読者になる | 更新情報をチェックする

CSS覚え書き

今回の改造点

【背景:縦に画像を繰り返し】
body {
background-image:url(http://king-hotaroh.up.seesaa.net/image/robo-heyahe-2.jpg);
background-repeat:repeat-y;
}

【トップ】
#container{
width:807px; (←ここの数値を900にしないとうまくいかん。ブログクリックのせいか?)
}

【リンク:アンダーラインを抜いた。やっぱり入れれば良かった】
a{
color:#CC3300;
text-decoration:none;
}

【タイトル文字 付け加えてトップ画像とバランス】
h1 {
padding-left:300px;
}
【タイトル文字色】
h1 a{
color:#000033;
}

【文中の文字と、各記事のタイトル】
h3 {
padding: 0px 0px 0px 30px;(←タイトルとアイコンが被らないように30pxにしたら記事全体が動いて微妙)
}

【トップの絵の高さ】
#banner{
height:250px;
}

【トップの説明文】
.description {
padding:0px 10px 0px 300px;(←絵と被らないように300pxにした。折り返しはどうしたらいいんだ!!( ̄д ̄)ノムキー)
}

【日付のアイコン】
.blog {
padding:0px 5px 50px 45px;(←日付と被らないように45px)
background-image:url(http://king-hotaroh.up.seesaa.net/image/robo-mini2.gif);
}

【日付の線】
.date{
border-top:1px solid :#CC3300;(←日付のところの線)
}

posted by 國王 at 02:55| ウィーン ☁| Comment(0) | TrackBack(0) | CSSのお勉強 | このブログの読者になる | 更新情報をチェックする

2005年06月26日

3カラムで、サイドバーを右に集めてみる

以前、そんなカッチョイイ改造を見てから、やってみたいなあと思って数ヶ月。
やりましたよ!!やりましたですよ!!( ̄д ̄)

さて、改造ですが、3カラムのものをベースにします。
↓のような感じで適当にやってみました。

postscript:てな上記の記事を書いてから、ブログが大変な事になったのでございます。
一時期、各記事へのリンクなども壊れまくってました。
むふう。
仕方がないので、普通の3カラムに戻して現在に至る。
誰かどこが悪かったのか教えて下され。(-_-)
(トップページは大丈夫だったのに、記事をクリックすると、記事部分が150pxくらいの幅になってしまっていたのココロよ…)


body {
font-family: Arial, Helvetica, sans-serif;
background-image:url(http://画像のURL);
background-repeat:repeat-xy;←今回はココもrepeat-yからxyにしてみる。これで全方位に背景の繰り返しだ!!
background-position:left;
background-color:#000000;
margin:0px;
padding:0px;
}
A { text-decoration: underline;
color:#006699;
}

h1 {
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
font-weight:bolder;
font-size:30px;
}
h1 a{
color:#99ffff;
font-family:arial, Helvetica;
text-decoration: none;
font-family:sans-serif;
font-weight:bolder;
margin-top:0px;
}

h2 {
padding: 0px;
font-size:100%;
font-weight:bolder;
margin:0px;
}

h3 {
padding: 0px;
font-size:14px;
font-weight:bold;
font-family:arial, Helvetica;
}

H3 a{
padding: 0px;
font-weight:bolder;
font-size:100%;
color:#FFFFFF;
}

#banner{
font-family:arial, Helvetica;
color:#69C;
margin:0px;
width:100%;
padding:0px;
}

.description {
color:#FFF;
margin-left: 20px;
font-size:16px;
font-family:sans-serif;
font-weight:bold;
line-height:140%;
}

.navi {
color:#00F;
font-size:90%;
text-align:center;
margin-bottom:10px;
width:100%;
}

#content {
margin-bottom:30px;
margin-top:25px;
margin-left:10px;
margin-right:10px;
float:left;
width:150pxここで真ん中にくる部分(普段は記事)の幅を決定するので、サイドバーに丁度いいように小さく設定。更に、最初は%だったのだが、固定したかったのでpxにする
}

.blog {
}

.blogbody {
color: #ccffff;
font-size:100%;
background:#000000;
margin-bottom:10px;
border:1px #6633cc solid;
background:#000000;
}

.date{
font-size: 100%;
color: #000000;
font-weight:bold;
padding:0px;
text-align:right;
background:#999999
margin:0px;
}

.title{
color: #FFFFFF;
padding:2px;
font-weight:bold;
background:#006699;
margin:0px;
}
.title a{
border:none;
}

.text{
font-size: 95%;
color: #ccffff;
padding-top:10px;
padding-bottom:10px;
padding-left:5px;
padding-right:5px;
background:#000000;
}

.text a{
color:#0000FF;
}

.posted{
font-size: 80%;
color: #000;
text-align: right;
margin-top:10px;
margin-bottom:5px;
padding:3px 3px 3px 5px;
}
.posted a{
color:#00F;
text-decoration: underline;
}

#links-left {
font-weight:normal;
width:430px;←ここで、左サイドバーにいつもはあたる部分の幅を決定しているので、記事に丁度いいサイズへ。これも%→px
float:left;
margin-left: 5px;
margin-right: 5px;
margin-top:25px;
}
#links {
font-weight:normal;
width:150px;←ここで、右サイドバーにいつもはあたる部分の幅を決定
float:left;
margin-left: 5px;
margin-right: 5px;
margin-top:25px;
}

#calendar {
font-size:95%;
font-weight:normal;
background:#CFCFCF;
border:1px solid #000;
width:100%;
}
#calendar table {
width:100%;
}

.calendarhead {
color:#FFFFFF;
background:#000000;
font-size:80%;
font-weight:bold;
padding-top:3px;
padding-bottom:3px;
text-align:center;
}

.calendarday {
font-size:80%;
font-weight:normal;
color: #003333;
background:#CFCFCF;
}
.calendarday a{
font-size:100%;
color:#0000FF;
text-decoration: underline;
}

.sidetitle {
color:#FFFFFF;
font-size:80%;
font-weight:normal;
padding:5px;
margin-top:10px;
font-weight:bold;
width:100%;
background:#000000;
}

.side {
color:#000;
font-size:80%;
font-weight:normal;
background:#CFCFCF;
line-height:140%;
padding:5px;
width:100%;
border:1px solid #000;
}

.powered {
line-height:120%;
padding:2px;
margin-top:20px;
width:100%;
text-align:center;
}

.syndicate {
font-size:x-small;
line-height:140%;
padding:2px;
margin-top:15px;
text-align:center;
width:100%;
margin-bottom:20px;
}

#comments {
width:430px;
margin-top:25px;
background:#CFCFCF;
border:1px dotted #FFF;
}

.comments-head{
background:#006699;
color:#FFF;
font-size:90%;
font-weight:normal;
line-height:140%;
padding-left:5px;
padding-top:5px;
padding-bottom:5px;
border-bottom:1px dotted #999;
}

.comments-body {
color:#003333;
font-size:90%;
font-weight:normal;
padding-bottom:10px;
padding-top:10px;
padding-left:10px;
border-bottom:1px dotted #999;
}

.comments-post {
color:#003333;
font-size:90%;
font-weight:normal;
padding-left:5px;
padding-top:5px;
padding-bottom:5px;
}
#trackback {
width:430px;
margin-top:25px;
background:#CFCFCF;
padding-bottom:10px;
padding-top:10px;
padding-left:10px;
padding-right:10px;
border:1px dotted #FFF;
}
.trackback-url {
color:#003333;
font-size:100%;
font-weight:normal;
background:#FFF;
line-height:140%;
padding:5px;
border:1px dotted #999;
}

.trackback-body {
color:#003333;
font-size:100%;
font-weight:normal;
background:#FFF;
line-height:140%;
padding-bottom:10px;
padding-top:10px;
border-bottom:1px dotted #999;
}

.trackback-post {
color:#003333;
font-size:x-small;
font-weight:normal;
background:#FFF;
}

#footer{
clear:left;
width:100%;
}
.copyright{
font-size:80%;
width:100%;
text-align:center;
}
posted by 國王 at 21:23| ウィーン ☁| Comment(5) | TrackBack(0) | CSSのお勉強 | このブログの読者になる | 更新情報をチェックする

2005年03月18日

seesaaを愛するバナーを作ってみる

二つ作ってみました。動く奴と動かない奴です。
動く奴も極めて軽い(1kb以下)なので、お好きにお使いください。

seesaa.GIF seesaa-Opt.gif ←FREE
(マウスを右クリックで「画像に名前を付けて保存」を選ぶとダウンロード出来ます)

まあ、まずは誰がseesaaを愛する運動に参加してくれるんだろうという大きな問題があるけどな。( ̄д ̄)
ちょこっと好きなシトも熱烈に好きなシトも、興味で貼りたいだけの他のブログのシトもどぞ。

seesaa、LOVE!!( ̄д ̄)
posted by 國王 at 01:06| ウィーン ☁| Comment(1) | TrackBack(1) | CSSのお勉強 | このブログの読者になる | 更新情報をチェックする

2005年02月20日

ダウンロードタイマー

今回もCSSではないが、実験をしてみた。
dlt-bana.gif

このブログ、54Kのモデムだと49秒もダウンロードに時間かかってるよ…(-_-)
まあ、ブログは表示遅いの覚悟していたんだが…
ちなみに王國は0.4秒。なかなか優秀です。

ううむ。これはやはり画像が多いせいか…
posted by 國王 at 23:00| ウィーン ☁| Comment(0) | TrackBack(0) | CSSのお勉強 | このブログの読者になる | 更新情報をチェックする

2005年02月05日

オペ裸

CSSとは関係ないのだが、seesaaはオペ裸から投稿しようとすると、ファイルマネージャーが表示されないらしい…(-_-)
むふう。
オペ裸ユーザーのシトは大変ですな。
posted by 國王 at 13:15| ウィーン ☁| Comment(0) | TrackBack(1) | CSSのお勉強 | このブログの読者になる | 更新情報をチェックする

2005年01月30日

テンプレを改造しているサイトを見てみる

カテゴリ分けは正解ですな!!
今まで、改造している人のブログは、検索でしか探せなかったのだが、これで一気に探しやすくなったぞ!参考になるね。(技を盗みまくる國王)
これからは、困ったら誰かに相談出来るぞ!!(←人の迷惑を顧みない)
まずは、根スケで崩れない方法を誰か教えてくれ。(色々実験したけど、縛りが多すぎて結構上手く行かないのにゃ…(-_-))

ほえほえっと行ってみるさんは、シアターを両サイドバーに改造したらしい。おお。かっちょいい!!( ̄д ̄)
というか目からウロコ。
確かにシアターの右側は余っている。ワガハイはこの方が都合が良いわけだが、普通にブログ単体で見たときには変なバランスですな。

日々お勉強中。さんのところで、サイドバーでお気に入りリンクを使った方法が書かれていた。なるほど。そうか。自由形式にせずに、お気に入りリンクを改造した方がかっちょいいじゃないか!!( ̄д ̄)
これはウカツ…。
変な箱を直してみよう…
あと、ここは無料ブログ各社比較があります。こういうのを読みたかったんだよな。(-_-)
↑じぃさまとdiaさんが好きそうだ…

Project SEED -seesaa branchさんはlivedoorから移行作戦を展開しているらしい。
ワガハイも、seesaaからgooにやってみようと実験したけど、崩れて意味不明になったよ…
というか、トップ画像なくなっちゃったよ。
CSSって共通じゃないのかよ!!(←当たり前)
それで、seesaa特有のCSSが幾つかあるらしいことを上記ブログ様で発見。
ちょっと研究してみよう。(-_-)
posted by 國王 at 16:07| ウィーン ☁| Comment(3) | TrackBack(0) | CSSのお勉強 | このブログの読者になる | 更新情報をチェックする

2005年01月29日

ブログのテンプレ改造

ブログのテンプレをまたも改造。さすがに4つめなので段々慣れてきた。
しかし、seesaaの仕様が変わって便利になりましたな。
特に、サイドバーなどのコンテンツを、スタイルシートごとに設定しなければならなかったのが、一括で出来るようになっているのが良い。今まで面倒すぎだろ。
実験室のseesaaテンプレ改造頁も微妙にリニューアルって、俺様にしかわからない変化だけどね。

それにしても、テンプレの改造は面白いですな。毎月やってしまいそうだよ。
posted by 國王 at 03:05| ウィーン ☁| Comment(2) | TrackBack(0) | CSSのお勉強 | このブログの読者になる | 更新情報をチェックする

2004年12月25日

背景を繰り返す

bus1
今回は26日から年末までの、短い期間に使うテンプレを作ってみた。
当然、年始からはお正月テンプレだ。

再びクリスマスを土台に使う。
散々苦労したせいか、かなりスムーズです。( ̄д ̄)
そして、背景画像の繰り返しについて考えてみる。
repeat-yだと、縦に繰り返すようだ。
これをxに変えてみたところ、想像どおり横に繰り返された。(位置はその下のleftやcenterで調整する模様)
では、一面にやるにはどうしたらよいか。
repeat-y;repeat-x;
とやってみる。
駄目らしい
repeat-xy
とやってみる。
成功です。(-_-)

一面に繰り返す方法が分かった割には、repeat-yしか使わないのであった…
posted by 國王 at 03:23| ウィーン ☁| Comment(4) | TrackBack(0) | CSSのお勉強 | このブログの読者になる | 更新情報をチェックする

2004年12月24日

ブログのテンプレを改造だ!!

bus1
seesaaのテンプレの改造の仕方を纏めてみた。
ぶらぼー!俺様ぶらぼー!!( ̄д ̄)
まあ、自分用の覚え書きなんだが。
変なところがあったら知らせてくれ。

簡単な覚え書き

〔画像の変更〕

1:背景の画像を変更したい→body
body と書かれた箇所直下のURLを変更する
background-image:url(http://画像のURL); ←ここを変更
2:トップの画像を変更したい→container
#containerと書かれた箇所直下
background-position:top left;←☆
注:画像が貰ってきたgifアニメでサイズが合わない場合は、上記☆マークのleftをcenterにしたり、
rightにして調整をしてみよう。
3:記事の部分のアイコンを変更したい→h3のあたりか?
h3 と書かれたあたりが怪しい
4:日付の部分のアイコンを変更したい→date
.dateと書かれた箇所直下
5:カレンダーのバックを変えたい→#calendar
6:サイドバーのタイトルの部分(カレンダー)→calendarhead
.calendarheadと書かれた箇所直下
7:サイドバーのタイトルの部分→sidetitle


〔文字のサイズや色の変更〕

一先ず、色を変えたい場合は、
color:#201D3C;
の#以下6文字のカラーコードを任意のコードに変更。

文字サイズを変更したい場合は、
font-size: 20px;
のpxの前の数字を変更。

1:背景の色→body
2:リンクの色(カレンダーも含む)→#container
3:トップのタイトルの色→h1が怪しい
4:トップタイトル下の文字(説明書き)の色→h3が怪しい
5:記事の背景の色→blogbody
6:日付部分の文字→date
7:記事部分のタイトルの色→title
8:記事部分の文字の色→text
9:テキスト下のポストした人の名前→posted
10:カレンダー→#calendar
11:サイドバーのタイトル→calendarhead、sidetitle
12:コメント欄→#comments
13:トラックバック欄→#trackback

詳しくははこちら↓
実験室へ



こんなにカスタマイズも出来るらしい→ブログをとことん調べますさん
livedoorなんかも載っているぞ!!( ̄д ̄)

ブラウザでの比較もしている→lazy crazy blogさん
そうか。(-_-)オペ裸や根スケで確認しよう…

同じ感じで、ジワジワ改造していそうな人も発見→BLUE HORNETさん
posted by 國王 at 05:00| ウィーン ☁| Comment(1) | TrackBack(1) | CSSのお勉強 | このブログの読者になる | 更新情報をチェックする

2004年12月09日

テンプレを変更

テンプレでクリスマスがイマイチ気に入らなかったので、トップを変えてみた。


かっちょいい。(-_-)

ちなみに素材はしまこう’sジャンクルーム様よりサンタと怖い雪だるまをお借りしました。
ここはかっちょいい素材が沢山あるぞ!!( ̄д ̄)

なお、しまこう’sジャンクルーム様はリンクウェアなので、素材の使用にはリンクが必要なり。



なお、同じようにテンプレを変えたい人へ



【テンプレを改造する】

1:ブログを開く

2:ペイントなどを開いて、ブログのトップと同じサイズの絵を作る。この時、サイズは厳密でなくても大体で良い

3:どこかに適当に絵をアップする

4:スタイルシートの記述を変える


記述された内容の中の

background-image:urlのあとに続くURLを
background-image:url(http://ナントカカントカ背景.gif);

background-image:url(http://ナントカカントカトップ画像.jpg);
というように自分のURLに変えてしまえばOKです。

(最初のが背景で後の方がトップ画像)






こんな感じでサクッと出来ます。

気に入ったテンプレの無いときにどうぞ。


元にしたテンプレはこちら
posted by 國王 at 04:01| ウィーン ☁| Comment(1) | TrackBack(1) | CSSのお勉強 | このブログの読者になる | 更新情報をチェックする