CSSを記述してみよう

:「Q太郎さん、まずブログタイトルの文字を
変えたいんですけど、その時は#banner h1{　}ってところに
font-size:★;やfont-family:★って記述すればいいんだよね」

：「ああ、そうだ」

：「もし、#banner{　}に記述すると、ブログタイトルとサブタイトルの
両方が変わってしまうの？」

：「#banner h1と#leadに何も触れていなければ変わらない。
前回の優先順位の法則だ」

：「そっか、全体よりも部分が優先されるんだよね。
じゃあ、ちょっと記述してみるよ。
えーっと、文字の大きさが20pxで、色は青、フォントは富士ポップに
してみようかなと。
#banner h1{
margin:0;
padding:80px 0 0 14px;

font-size:20px;
font-family: '富士ポップ';
color:blue

}
これでいいのかな。よしプレビューで確認してみよう～」

なじむ　実に！　なじむぞ
過程や・・・！　方法なぞ・・・！　どうでもよいのだァーッ

：「Q太郎さん、文字の色も、大きさも、フォントも変わってますよ」

：「べいすた成長したな。このCSSを指定したのは
まぎれもなくべいすた、お前だ」

：「今度はサブタイトルもいじってみようかな。
サブタイトルは#leadだったよね。
うーん、斜体にボーダーなんてどうかな。

#lead{
padding:0 14px;
color: #ad0f00;

font-style:italic;
border-bottom:black dotted 7px;

}

なじむ　実に！　なじむぞ
過程や・・・！　方法なぞ・・・！　どうでもよいのだァーッ

:「Q太郎さん、出来ているよ～。
もうCSS怖くないぞ!!」

：「やれやれだぜ」

to be continued

タグ：サブタイトル ブログタイトル so-net カスタマイズ ブログ CSS

テンプレート内の優先順位を確認しよう

:「Q太郎さん、この前のテンプレートのおさらいで
改めてテンプレートの中を見たけど、なんであんなに多いの？」

：「べいすたよ、部分の対義語って何だ？」

：「うわっ、疑問文に疑問文・・・
ええと、確か全体じゃないですか」

：「ああ、そうだ。具体的な例を挙げて言うぞ。
一人の人間がいる。人間を全体とすると
五臓という部分がある。五臓は分けると肝臓・心臓・腎臓・脾臓・肺臓だな。
だがその臓にもさらに細かい組織がある。

これを先のCSSにあてはめる。
①/*-----Common-----*/という人間がいる
つかさどる名前はbody
ここに命令することによって
全部への指令が出る。
しかし人間には
②/*-----Content-----*/③/*-----Entry-----*/④/*-----Side-----*/
⑤/*-----Footer-----*/という臓器があり、それぞれ活動している。

②/*-----Content-----*/をつかさどるのは#contentと#mainだな。
③/*-----Entry-----*/は.entry
④/*-----Side-----*/は#side-a, #side-b
⑤/*-----Footer-----*/は#footer
だがここで肝心なのは全体と言うのは部分が集まって
出来ているということ。
すなわち強制力は部分＞全体である。

：「なるほど、例えば①/*-----Common-----*/のbodyに
color:blue;と指示しても②/*-----Content-----*/の#contentに
color:greenとすると、ブログのタイトルやサブタイトルは青でも
記事は緑になるんだね」

：「そういうことだ」

：「色々分かったし、もうカスタマイズに挑戦しても大丈夫かな」

to be continued

タグ：so-net 優先順位 CSS ブログ カスタマイズ

CSSの要素をおさらいしてみよう

：「べいすた、何を悩んでいるんだ」

：「あっ、Q太郎さん。CSSを記述しようとしたんですけど
CSSの要素って、『フォント』・『背景』・『ボーダー(枠線)』ですよね」

：「ああ、そうだ。厳密にはもっとあるが
このブログで使うのはこのあたりだ。べいすたにしてはやるな」

：「てへへ。でっ、その中身って確かこんな感じじゃなかったですか？」

フォント	要素	CSS名	★に入る値(具体例)
	文字の太さ	font-weight:★	100～900
	文字の大きさ	font-size:★	数字＋単位 pt,pxなど
	文字の種類	font-family:★	ＭＳ　明朝
	斜体	font-style:★	italic
	文字の色	color:★	red,#0000ff
背景	背景色	background-color:★	blue,#ff0000
	背景画像	background-image:url(★)	アップロード済みのファイルを クリックしてください
	背景画像の位置	background-position:★	right,left,center
	背景画像繰り返し	background-repeat:★	repeat,repeat-x,repeat-y,none
	背景画像の一括指定	background:★	ファイルURL 位置要素の値 繰り返し要素の値
枠線	枠線の種類	border-style:★	solid,dotted,dashed,double ridge,groove,inset,outset
	枠線の色	border-color:★	yellow,#ffff00
	枠線の太さ	border-width:★	数字＋単位 pt,pxなど
	枠線の一括指定	border:★	枠線の種類の値 枠線の太さの値 枠線の色の値

：「良しッ！　ディ・モールト　ディ・モールト（非常に　非常に）良いぞッ！　良く学習してるぞッ！」

：「これで安心してカスタマイズできます、ありがとうQ太郎さん」

to be continued

タグ：ブログ カスタマイズ CSS so-net

テンプレートの中身をおさらいしてみよう

：「すみません、テンプレートの中身
あまり理解できませんでした・・・」

：「まぁ想像の範囲内だ。
下で表にしたから、よく見ろ」
番号は下の図と合致するから、確認に使うんだ。


：「ありがとうございます、Q太郎さん!!」

区切り	------{ }	影響を及ぼす個所
①/*-----Common-----*/	a	ブログ内のリンク個所
	body	ブログ全体
	blockquote	引用部分
	#container	バナー画像
	#banner	ブログタイトル＋サブタイトル
	#banner h1	ブログタイトル
	#banner h1 a	ブログタイトルのリンク
	#lead	サブタイトル
区切り	------{ }	影響を及ぼす個所
②/*-----Content-----*/	#content	サイドバーと記事部分
	.archive-title	前の10件/次の10件 前の記事/次の記事　ブログトップの部分
	.archive-bottom	記事下の前の10件/次の10件 前の記事/次の記事　ブログトップの部分
	.archive-name	前の記事（前の10件）|次の記事（次の10件）の部分
	.previousLink	前の記事（前の10件）の部分
	.nextLink	次の記事（次の10件）の部分
	.archive-links	ブログトップの部分
	#main	ピンクの＋が敷き詰められている部分
	.articles	記事部分（タイトル部分含む）
	.articles-title a	記事タイトルのリンク部分
	.articles-body	記事本体部分
	.articles-bottom	なし
	.articles-body img	記事に挿入した画像
	.posted	記事投稿した時間やNice・コメント・トラックバック数
③/*-----Entry-----*/	entry	Nice・コメント・コメント欄・トラックバックエリア
	.entry h4	上記.entry欄のNice・コメント・コメントを書く トラックバックの文字
	#nice h4	Nice!欄のNiceの文字
	#nice li	Nice!欄のユーザーアイコン
	.each-comment	送信されたコメント1つごと
	.each-comment img	コメントを送信したユーザーのアイコン
	each-comment input	コメントを消すためのチェックボックス
	.comments-body	送信されたコメント内容
	each-comment input	コメントを消すためのチェックボックス
	#nice li	Nice!欄のユーザーアイコン
	#comment-write textarea	コメントを書く場所
	.comment-input	コメントの送信ボタン so-netユーザー以外の名前・URL入力
	#trackback-write p	トラックバックの段落
	#trackback-write form	トラックバックの入力フォーム・送信ボタン
	.each-trackback	トラックバック一つごと
④/*-----Side-----*/	#side-a, #side-b	サイドバーの領域全体
	.sidebar	サイドバーの区切りごと
	.sidebar-title	サイドバータイトル
	.sidebar-body	サイドバーの中身の部分
	.sidebar-body li	サイドバーの中身の部分の序列
	.new	読んでいるブログに表示されるNEWの文字
	dt.profile-img	プロフィール内　ブログオーナーの画像
	dd.profile-status	プロフィール内　Nice・記事（数）
	#profile .profileLink	プロフィール内　プロフィールという文字
	.nice	プロフィール内Niceの文字
	#calendar table	カレンダーの　<<　2010　X月>>の部分
	#calendar th	カレンダーのマス目の見出し（曜日）
	#calendar td	カレンダーの日付
	#calendar td.link	カレンダーの日付のリンク
	#search .sidebar-body	検索ボックス
	.search-tbox	検索ボタン
	#rssRegist	ブログを作って読者登録部分
	rssRegist a	上記リンク部分
	#powered img	so-netブログロゴ
	#rssfeed	RSS1.0｜RSS2.0部分
⑤/*-----Footer-----*/	#footer	フッター全体
	.copyright	左下　So-netトップ - ブログ - ソネットポイント部分

：「これで次に進めそうです」

タグ：CSS ブログ カスタマイズ so-net

CSSを分類してみよう

：「Q太郎さん!!　録画に必要なものは
分かったんですけど、肝心の録画の仕方がわかりません・・・」

：「前の記事のリンクを見た前提で話すぞ。
テンプレート内
-----{
・
・
}
の{　}内に指定したい、『フォント要素』『背景要素』『ボーダー要素』を記述する。
記述方法は　要素:値だ。
要素とはフォントであれば、font-size,font-weight,font-family,font-style,colorであり、
背景ならば、background-color,background-image
ボーダーなら border-styleなどだな」

：「なるほどなるほど。
でも自分で勝手に{　}を作って記述していいんですか？」

：「ふっ、べいすたにしては鋭い指摘だな。
既に気づいているとは思うが
----{
・
・
}の----部分が番組名だ。
つまり、この----という番組を
【要素：値】で予約しますってことだ。

；「そうは行っても、その番組名が理解できないですよ～」

：「そう言うと思ったぜ。
これもuryyyyyがどこがで別に説明していたから
そこにリンクを張る。
記事『テンプレートの中のCSSを見てみよう』の
図と照らし合わせながらみると効果的・・・かも。
①/*-----Common-----*/
②/*-----Content-----*/
③/*-----Entry-----*/
④/*-----Side-----*/
⑤/*-----Footer-----*/
どれがどこに対応しているかが分かれば
あとは値を入れて行くだけだ」

タグ：so-net ブログ カスタマイズ CSS

CSSの要素を見てみよう

:「べいすた、一つ尋ねるが番組を録画するとき必要なものは何だ？」

：「必要なものですかぁ？何ですか？」

：「質問を質問で返すなあーっ！！
疑問文には疑問文で答えろと学校で教えているのか？」

：「すっ、すみません・・・」

：「やれやれだぜ。
いいか、まず時間。次に曜日、そしてチャンネルだ。
それをCSSに置き換えると、　『フォント』・『背景』・『ボーダー』となる。
まぁ3つの要素ということが言いたいだけだ」

：「でQ太郎さん、その『フォント』・『背景』・『ボーダー』って何ですか？」

：「『フォント』は文字に関わるものだ。
字体・文字の太さ・文字の大きさ・文字の色・文字の種類だな。
厳密には行間や位置の指定、テキストの装飾まで含まれるがな」

：「では次、背景をお願いいします」

：「背景とはbackgroundそのままだ。
この記事の下はピンクの＋が連なっているのが分かるか？」

：「それは見れば分かりますよ」

：「では、今度は記事のタイトルの部分がオレンジ色になっているのが分かるか？」

：「だからそのぐらい、いくらおいらでも分かりますよ」

：「つまり、背景とは記事やタイトルなどの下地に
適用している、色や画像のことだ」

：「えぇぇぇー!!そのままじゃないですか。
じゃぁ次ボーダーについて教えて下さいよ～」

：「ボーダー、それは枠線のことだ」

：「枠線・・まさかって感じだがグッと来たぜ」

：「おい、ふざけているのか。
いずれにしろ『フォント』・『背景』・『ボーダー』とも
uryyyyyyのやつが別のサイトで説明していたから
そこにリンクを張るので見ておくんだな、べいすた」

：「わかりました。ではURLを」

：「『フォント』
『背景1』
『背景2』
『ボーダー1』
『ボーダー2』
だな」

：「さすがQ太郎さん、そこに痺れる!、憧れるゥ!」

：「・・・・・・」

to be continued

タグ：CSS カスタマイズ ブログ so-net

テンプレートの中のCSSを見てみよう

:「Q太郎さん、ところでCSSの予約ってどこで行うんですか？」

：「それは管理ページからデザイン、そしてテンプレート管理だ」

：「ええと、管理ページ→デザイン→テンプレート管理ですね」

：「・・・・・・・何ですかこの暗号みたいなの・・・・」

：「それがCSS、番組表みたいなものだ」

：「ちょっ、素人にこんなの見せられても意味分かりませんよ」

：「だろうな、おれが医学書や法律用語を見ても分からないのと一緒だ。
なので説明してやろう。
いいか、『観察しろというのは……　見るんじゃあなくて観ることだ…　聞くんじゃあなく聴くことだ』
テンプレート内は大きく５つの要素に分かれている。

１.Common(バナー部分含む全体)
２.Contents(記事部分)
３.Entry(Nice・コメント・コメント欄・トラックバック)
４.Sidebar(サイドバー)
５.Footer(フッター)


ちょうど/*------xxx----*/で区切られている範囲だな。
あとはテンプレートの中の｛　｝内がどの番組かが分かれば予約もできるだろう」

：「ちょっとだけ分かったような気がします。
するとあとは録画方法ですね」

：「やれやれだぜ」
to be continued

タグ：CSS ブログ カスタマイズ テンプレート管理 so-net

ブログのカスタマイズをはじめよう

:「Q太郎さん、おいらもso-netブログを始めたよ。
Nice!やコメントが良いね」

：「べいすたがブログ・・やれやれだぜ」

：「僕も色々な人のブログを見て回って気づいたんだけど
テンプレートに無い形のものがあるんだ。
あれどうやっているのかな？」

：「それはCSSってやつだな」

：「CSS？なんですかそれ」

：「WEBページの体裁を整えるもの、と言えば理解できるか？」

：「いやいや、それだけでは分かりませんよ。
それで分かるなら横浜の投手陣は全員毎年10勝します!!」

：「べいすたよ、お前ブログを書く際、字を大きくする時どうしている？」

：「字を大きくする時ですが？そりゃぁ、上のA+ってやつを押してますよ、それが何か？」

：「そう、そうするよな。だがその時横には＜span style="font-size:large;"＞＜/span＞という
文字が出てくるのは知っているか？」

：「い、いえ、気にも留めていなかったもので・・・・」

：「まぁ当然と言えば当然だ。だがこの＜span＞～＜/span>も
れっきとしたCSSだ～!!、お前は知らず知らずのうちにCSSを使っているんだよ」

：「えっ、え～～～～!!」

：「この記述方法は直接記述、ということは間接もあるということだ。
そしてその間接こそが、初期テンプレートでありカスタマイズだ。
べいすたよ、お前見たいテレビ番組を録画する時どうする？」

：「録画ですか？そりゃぁ番組表見ながら録画しますよ」

：「それがもし毎週同じ曜日、同じ時間のものだったら？」

：「ええと、その時は予め指定しておきますね。
んっ!!　ああぁ、そういうことか～。
どこそこにこういう予約を最初から入れておくってことですね!!」

：「Ｅｘａｃｔｌｙ（そのとおり）」

：「そう分かったら早く予約を入れに行きましょうよ」

：「ふっ、やれやれだぜ」

タグ：CSS カズタマイズ ブログ so-net