HPを作ろう5 seesaaテンプレ改造

２００4．1２

クリスマスはもっと極悪が良い

クリスマスも近づいた１２月。クリスマスのテンプレにしたいとおもったが、テンプレがイマイチだ！！こんなテンプレは嫌だ。大体、同じテンプレの人を見ると、ちょっとゲンナリするよ。

そう言えば、seesaaではテンプレの改造が出来るらしい。これはやるしかない。（-＿-）と思い立って、seesaaブログのテンプレを改造してみる。

１：トップ画像や背景・アイコンを変えてみる
２：記事欄やブログのサイズを変える
３：文字の色・サイズやバックの色を変える
４：〔HTML〕floatとHTMLの謎解明
５：marginとpaddingとは

それではテンプレ改造です。（-＿-）
まずはマイホーム＞マイブログの「デザイン」→「デザイン一覧」をクリックしてください。
そして、自分がこうしたいと思うスタイルに一番近いと思われるテンプレを選びます。
（画像や背景は変更することが出来るので、文字の色やカレンダーの具合、サイドバーの感じが近いものを選ぶのが無難でしょうね）
ここでは「うさぎ君」という架空のテンプレを選んだことにして話を進めます。
選んだら、「タイトル」の列の「うさぎ君（右サイドバーのみ対応）という文字があると思うのでクリック！
CSSのカスタマイズ画面へ進みます。

〔CSS改造画面へ行く〕
１：デザイン一覧を押す
２：「うさぎ君」などの既存テンプレを一つ選ぶ
３：「うさぎ君（右サイドバーのみ対応）の文字を押してカスタマイズ画面へ

　トップの画像や背景・アイコンを変えてみる。


まず一番最初は画像の変更です。タブンこれが一番簡単です。

１：画像をアップする
２：背景、アイコンなど、該当するところのURLを変更する

１：画像のアップは大丈夫かと思います（-＿-）
ただ、注意点としては、

(1)　アニメgifでも大丈夫（当然）
(2)　元々デフォルトのトップ画像と同じサイズだと話が早い。厳密に同じでなくとも良いので、大体同じ大きさに作る。
(3)　サイズが微妙な時は、表示する位置をいじる

といったところです。

さて、肝心の変更箇所ですが、こんな感じになります。

一先ず、右サイドバーのCSS全て↓


１：背景の画像を変更したい→body
body と書かれた箇所直下
background-image:url(http://画像のURL);　←ここを変更
background-repeat:repeat-y;
background-position:left;

２：トップの画像を変更したい→container
#containerと書かれた箇所直下
background-image:url(http://画像のURL);　←ここを変更
background-repeat:no-repeat;
background-position:top left;←☆
注：画像が貰ってきたgifアニメでサイズが合わない場合は、上記☆マークのleftをcenterにしたり、
rightにして調整をしてみよう。

３：記事の部分のアイコンを変更したい→h3のあたりか？
h3 と書かれたあたりが怪しい
background-image:url(http://画像のURL);　←ここを変更
background-repeat:no-repeat;

４：日付の部分のアイコンを変更したい→date
.dateと書かれた箇所直下
background-image:url(http://画像のURL);　←ここを変更
background-repeat:no-repeat;
background-position:left top;

５：カレンダーのバックを変えたい→#calendar
#calendarと書かれた箇所直下
background-image:url(http://画像のURL);　←ここを変更
background-repeat:no-repeat;
background-position:center;

６：サイドバーのタイトルの部分（カレンダー）→calendarhead
.calendarheadと書かれた箇所直下
background-image:url(http://画像のURL);　←ここを変更
background-repeat:no-repeat;

７：サイドバーのタイトルの部分→sidetitle
.sidetitleと書かれた箇所直下
background-image:url(http://画像のURL);　←ここを変更
background-repeat:no-repeat;



　記事欄やブログのサイズを変えてみる。

これもそんなに難しくはありません。数字をいじるだけです。
これによって、フレーム内に表示している人は見やすくカスタマイズが可能です。

１：ブログ全体のサイズや位置を変えたい（横スクロールを無くすなど）→#container
#containerと書かれた箇所直下
text-align:center←何寄せにするか
margin:0px auto ←余白
padding:0px;←枠(border)と内側の文字との余白
width:800px;←ブログ全体のサイズ

２：記事欄のサイズを変える→blog
blogと書かれた箇所直下
width:450px;←ここを変更

注意：marginとpaddingについては、５：marginとpaddingとは

　文字のやバックの色を変えてみる。

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

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

英語なので簡単です。以下に書いた文字の下辺りに、こういった記述があるはずなので、
探してみてください。

【ブログの全体ぽい】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

２００６．６
　floatとHTMLの謎解明

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

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

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

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

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

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


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


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

ふぃー（￣д￣）

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

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

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

　marginとpaddingとは

どうも忘れがちなので図にしておく。
marginは外との余白、paddingは中との余白。
margin: 1px 2px 3px 4px; とあったら、上（1px)右(2px）下(3px)左(4px)の余白。




なお、このページはCSSなぞまったく知らない人間が実験を繰り返して書いております。間違い等発見された方は速やかにお知らせください。（本なども参考にしていないので、まったく当てずっぽうです）
正確度に関しては、あまり保証は出来ません。

seesaaの公式ページも参考にすると良いでしょう。
また、CSSのカスタマイズは、プレビューボタンを押して、何度も実験するとわかりやすいです。


inserted by FC2 system