横浜べいすた。
最近ブログを始めた。
オリジナリティあふれるブログに憧れる。
空条Q太郎。
スタンド使い？
星つながりで、ベイスタの面倒をみる。
文字を見やすく設定しよう [font基礎]
:「Q太郎さん、so-netのブログの初期設定の文字っておいらには見づらいんですけど、大きく出来るんですよね」
：「ああ、出来るな」：「でもbody{ }のところに記述してしまうと全部に適用されてしまうのですよね。
優先順位の法則ですよ」
:「ああ、もしbody{ }に書き込めばブログタイトル・サブタイトル・記事・記事タイトル・記事タイトルリンク
サイドバーなど全部に適用されるな」
：「そうですよね。だとすると記事本体のみに適用させるってことでいいんですか？
つまり、.articles-body { }ですね」
：「exactly(そのとおり)」：「じゃぁちょっとやってみようっと。えーっと、フォントの大きさ10ptで太字っと・・・
.articles-body {
line-height:1.6;
margin:0 0 20px 0;
font-size:10pt;
font-weight:bold;
}
:「どうですか、変わりましたかQ太郎さん!!!」：「このド低能が!!確認出来ることと出来ないことがあるだろうが!!」
：「ううう・・・すみません」：「だが、記述は間違っていない。自分でプレビューして確認してみるんだな
ちなみに、記事内のフォントの種類も、その他の要素も
記事本体に関する設定は.articles-body { }ということだ」
バナー画像に好きな画像を使おう
：「Q太郎さん、so-netのブログってたくさんのテンプレートがあるけど、バナーに好きな
画像って使えるの？」
：「ああ、余裕だな#container{ }内の
background:#ffffff url(/_common/skins/212/images/banner-bg.jpg) no-repeat center top;を消して
アップロードしてある、バナーに使いたい画像をクリックだ。
だが・・・一つ忠告しておくぞ。
アップロードするファイルの幅に気をつけるんだ。
バナー画像に使える幅は、#container{ }内のwidthで決まっている。
バナー画像が大きければ、バナー画像が切れるだけで済むが
小さい時には、一気にブログのレイアウトバランスが
崩れる可能性もある。
サイドバー
記事
#container{ }内のwidthの値を大きくした時も
注意が必要だ」
：「じゃあ一体どうしたらいいんですか!!!」：「ベストは#container{ }内のwidthと同値のバナー画像を用意すること。
できないなら、アップロードしたファイルを編集して
同じ値にすることだ。
だが、ここでも一つ注意が必要だ。
小さい画像ファイルを大きくすると画像が
荒くなるだけになるぞ。
元画像は大きなものを使うんだ」
：「面倒くさそうだね」：「確かにな。だが難しいことではない。widthの値と同じにするだけだ」
：「うん、やってみるよQ太郎さん」ブログタイトルにロールオーバーを使ってみよう
：「Q太郎さん、ブログのタイトルにマウスが重なると下に線が出るんですけど、あれって何ですか？」
：「それは、ロールオーバーってやつだ」：「ロールオーバー？ロールケーキではなくて？くだらねー」：「はなし・・もどしていいか？」:「ああ、ごめんなさい」：「ロールオーバー、つまりマウスがその場所と重なると
その場所に変化が生じることだな」：「たまに、画像にマウスを乗せた時も違う画像が出たりすることもあるけど、それもそうなの？」
：「ああ、だがそれはまだ先の話だ。今はとりあえずブログタイトルのロールオーバーを
出来るようにしろ」
：「はい。でもどうやって？」：「/*----Common----*/の中に#banner h1 a{ }というのがあるだろう。」
：「はい、確かにありました」：「それがブログタイトルのリンクの設定だな。だが、このままではロールオーバーは出来ないんだ」
：「ええええええ!!そんな～。あっ、ちょっと待って。そう言えばどこかでa{ }って見たことあるよ。
もしかしてこれがそうなのかな」
：「Ｅｘａｃｔｌｙ（そのとおり）テンプレートの一番最初に出てくる
a:link（未訪問リンクの状態）
a:visited（訪問済みリンクの状態）
a:active（気にしなくていい）
a:hover（マウスが乗った時の状態）
これでブログ内のリンクにロールオーバがかかっている。
ブログタイトルだけに特別なロールオーバーをしたいなら
#banner h1 a:link{例text-decoration:none;color:blue;}
未訪問リンク時下線なし、ブログタイトル青
#banner h1 a：visited{例text-decortation:none;color:green;}
訪問済みリンク時下線なし、ブログタイトル緑
#banner h1 a:active{例text-decoration:none;color:green;}
#banner h1 a:hover{例text-dicoration:none;color:red;font-size:15pt}
ロールオーバー時下線なし、ブログタイトル赤、字の大きさ15pt
と記述するんだ。
これも優先順位の法則だな。
忠告するが#banner h1 a{ }の外にだぞ。
{ }内の例は消すんだ。
実際の様子は百聞は一見に如かず。
下のブログタイトルにマウスを置いて自分の目で確かめろ」
：「このように、#banner h1 a:hover{ }内に変えたい要素を記述する。分かったかべいすた」
：「分かりましたQ太郎さん、ありがとうございます」
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
テンプレート内の優先順位を確認しよう
:「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
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
テンプレートの中身をおさらいしてみよう
：「すみません、テンプレートの中身あまり理解できませんでした・・・」
：「まぁ想像の範囲内だ。下で表にしたから、よく見ろ」
番号は下の図と合致するから、確認に使うんだ。
：「ありがとうございます、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を分類してみよう
：「Q太郎さん!! 録画に必要なものは分かったんですけど、肝心の録画の仕方がわかりません・・・」
：「前の記事のリンクを見た前提で話すぞ。テンプレート内
-----{
・
・
}
の{ }内に指定したい、『フォント要素』『背景要素』『ボーダー要素』を記述する。
記述方法は 要素:値だ。
要素とはフォントであれば、font-size,font-weight,font-family,font-style,colorであり、
背景ならば、background-color,background-image
ボーダーなら border-styleなどだな」
：「なるほどなるほど。でも自分で勝手に{ }を作って記述していいんですか？」
：「ふっ、べいすたにしては鋭い指摘だな。既に気づいているとは思うが
----{
・
・
}の----部分が番組名だ。
つまり、この----という番組を
【要素：値】で予約しますってことだ。
；「そうは行っても、その番組名が理解できないですよ～」：「そう言うと思ったぜ。これもuryyyyyがどこがで別に説明していたから
そこにリンクを張る。
記事『テンプレートの中のCSSを見てみよう』の
図と照らし合わせながらみると効果的・・・かも。
①/*-----Common-----*/
②/*-----Content-----*/
③/*-----Entry-----*/
④/*-----Side-----*/
⑤/*-----Footer-----*/
どれがどこに対応しているかが分かれば
あとは値を入れて行くだけだ」
CSSの要素を見てみよう
:「べいすた、一つ尋ねるが番組を録画するとき必要なものは何だ？」：「必要なものですかぁ？何ですか？」：「質問を質問で返すなあーっ！！ 疑問文には疑問文で答えろと学校で教えているのか？」
：「すっ、すみません・・・」：「やれやれだぜ。いいか、まず時間。次に曜日、そしてチャンネルだ。
それをCSSに置き換えると、 『フォント』・『背景』・『ボーダー』となる。
まぁ3つの要素ということが言いたいだけだ」
：「でQ太郎さん、その『フォント』・『背景』・『ボーダー』って何ですか？」：「『フォント』は文字に関わるものだ。字体・文字の太さ・文字の大きさ・文字の色・文字の種類だな。
厳密には行間や位置の指定、テキストの装飾まで含まれるがな」
：「では次、背景をお願いいします」：「背景とはbackgroundそのままだ。この記事の下はピンクの＋が連なっているのが分かるか？」
：「それは見れば分かりますよ」：「では、今度は記事のタイトルの部分がオレンジ色になっているのが分かるか？」：「だからそのぐらい、いくらおいらでも分かりますよ」：「つまり、背景とは記事やタイトルなどの下地に適用している、色や画像のことだ」
：「えぇぇぇー!!そのままじゃないですか。じゃぁ次ボーダーについて教えて下さいよ～」
：「ボーダー、それは枠線のことだ」：「枠線・・まさかって感じだがグッと来たぜ」：「おい、ふざけているのか。いずれにしろ『フォント』・『背景』・『ボーダー』とも
uryyyyyyのやつが別のサイトで説明していたから
そこにリンクを張るので見ておくんだな、べいすた」
：「わかりました。ではURLを」：「『フォント』『背景1』
『背景2』
『ボーダー1』
『ボーダー2』
だな」
：「さすがQ太郎さん、そこに痺れる!、憧れるゥ!」：「・・・・・・」to be continued
