So-net無料ブログ作成
<登場人物>
kyara1.png
横浜べいすた。
最近ブログを始めた。
オリジナリティあふれるブログに憧れる。
kyara2.png
空条Q太郎。
スタンド使い?
星つながりで、ベイスタの面倒をみる。
- | 次の10件

CSSを記述してみよう

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

kyara2.png:「ああ、そうだ」

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

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

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

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

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


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

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

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

#lead{
padding:0 14px;
color: #ad0f00;
font-style:italic;
border-bottom:black dotted 7px;

}

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


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

kyara2.png:「やれやれだぜ」

to be continued



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

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

kyara2.png:「べいすたよ、部分の対義語って何だ?」

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

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

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

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

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

kyara2.png:「そういうことだ」

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

to be continued

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

kyara2.png:「べいすた、何を悩んでいるんだ」

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

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

kyara1.png:「てへへ。でっ、その中身って確かこんな感じじゃなかったですか?」

フォント要素CSS名★に入る値(具体例)
文字の太さfont-weight:★100~900
文字の大きさfont-size:★ 数字+単位 pt,pxなど
文字の種類font-family:★MS 明朝
斜体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:★枠線の種類の値 枠線の太さの値 枠線の色の値


kyara2.png:「良しッ! ディ・モールト ディ・モールト(非常に 非常に)良いぞッ! 良く学習してるぞッ!」

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

to be continued

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

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

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

kyara1.png:「ありがとうございます、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-----*/entryNice・コメント・コメント欄・トラックバックエリア
.entry h4上記.entry欄のNice・コメント・コメントを書く
トラックバックの文字
#nice h4Nice!欄の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 imgso-netブログロゴ
#rssfeedRSS1.0|RSS2.0部分
⑤/*-----Footer-----*/#footerフッター全体
.copyright左下 So-netトップ - ブログ - ソネットポイント部分


kyara1.png:「これで次に進めそうです」

CSSを分類してみよう

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

kyara2.png:「前の記事のリンクを見た前提で話すぞ。
テンプレート内
-----{


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

kyara1.png:「なるほどなるほど。
でも自分で勝手に{ }を作って記述していいんですか?」

kyara2.png:「ふっ、べいすたにしては鋭い指摘だな。
既に気づいているとは思うが
----{


}の----部分が番組名だ。
つまり、この----という番組を
【要素:値】で予約しますってことだ。

kyara1.png;「そうは行っても、その番組名が理解できないですよ~」

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



CSSの要素を見てみよう

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

kyara1.png:「必要なものですかぁ?何ですか?」

kyara2.png:「質問を質問で返すなあーっ!!
疑問文には疑問文で答えろと学校で教えているのか?」

kyara1.png:「すっ、すみません・・・」

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

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

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

kyara1.png:「では次、背景をお願いいします」

kyara2.png:「背景とはbackgroundそのままだ。
この記事の下はピンクの+が連なっているのが分かるか?」

kyara1.png:「それは見れば分かりますよ」

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

kyara1.png:「だからそのぐらい、いくらおいらでも分かりますよ」

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

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

kyara2.png:「ボーダー、それは枠線のことだ」

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

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

kyara1.png:「わかりました。ではURLを」

kyara2.png:「『フォント』
『背景1』
『背景2』
『ボーダー1』
『ボーダー2』
だな」

kyara1.png:「さすがQ太郎さん、そこに痺れる!、憧れるゥ!」

kyara2.png:「・・・・・・」

to be continued

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

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

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

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

kyara1.png:「・・・・・・・何ですかこの暗号みたいなの・・・・」

kyara2.png:「それがCSS、番組表みたいなものだ」

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

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

1.Common(バナー部分含む全体)
2.Contents(記事部分)
3.Entry(Nice・コメント・コメント欄・トラックバック)
4.Sidebar(サイドバー)
5.Footer(フッター)

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

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

kyara2.png:「やれやれだぜ」
to be continued

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

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

kyara2.png:「べいすたがブログ・・やれやれだぜ」

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

kyara2.png:「それはCSSってやつだな」

kyara1.png:「CSS?なんですかそれ」

kyara2.png:「WEBページの体裁を整えるもの、と言えば理解できるか?」

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

kyara2.png:「べいすたよ、お前ブログを書く際、字を大きくする時どうしている?」

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

kyara2.png:「そう、そうするよな。だがその時横には<span style="font-size:large;"></span>という
文字が出てくるのは知っているか?」

kyara1.png:「い、いえ、気にも留めていなかったもので・・・・」

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

kyara1.png:「えっ、え~~~~!!」

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

kyara1.png:「録画ですか?そりゃぁ番組表見ながら録画しますよ」

kyara2.png:「それがもし毎週同じ曜日、同じ時間のものだったら?」

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

kyara2.png:「Exactly(そのとおり)」

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

kyara2.png:「ふっ、やれやれだぜ」




- | 次の10件

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

×

この広告は1年以上新しい記事の更新がないブログに表示されております。