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

文字を見やすく設定しよう [font基礎]

kyara1.png:「Q太郎さん、so-netのブログの初期設定の
文字っておいらには見づらいんですけど、大きく出来るんですよね」

kyara2.png:「ああ、出来るな」

kyara1.png:「でもbody{ }のところに記述してしまうと
全部に適用されてしまうのですよね。
優先順位の法則ですよ」

kyara2.png:「ああ、もしbody{ }に書き込めば
ブログタイトル・サブタイトル・記事・記事タイトル・記事タイトルリンク
サイドバーなど全部に適用されるな」

kyara1.png:「そうですよね。だとすると記事本体のみに
適用させるってことでいいんですか?
つまり、.articles-body { }ですね」

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

kyara1.png:「じゃぁちょっとやってみようっと。
えーっと、フォントの大きさ10ptで太字っと・・・
.articles-body {
line-height:1.6;
margin:0 0 20px 0;
font-size:10pt;
font-weight:bold;

}
kyara1.png:「どうですか、変わりましたかQ太郎さん!!!」

kyara2.png:「このド低能が!!確認出来ることと
出来ないことがあるだろうが!!」

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

kyara2.png:「だが、記述は間違っていない。
自分でプレビューして確認してみるんだな
ちなみに、記事内のフォントの種類も、その他の要素も
記事本体に関する設定は.articles-body { }ということだ」

バナー画像に好きな画像を使おう

kyara1.png:「Q太郎さん、so-netのブログって
たくさんのテンプレートがあるけど、バナーに好きな
画像って使えるの?」

kyara2.png:「ああ、余裕だな
#container{ }内の
background:#ffffff url(/_common/skins/212/images/banner-bg.jpg) no-repeat center top;を消して
アップロードしてある、バナーに使いたい画像をクリックだ。
だが・・・一つ忠告しておくぞ。
アップロードするファイルの幅に気をつけるんだ。
バナー画像に使える幅は、#container{ }内のwidthで決まっている。
バナー画像が大きければ、バナー画像が切れるだけで済むが
小さい時には、一気にブログのレイアウトバランスが
崩れる可能性もある。
サイドバー
記事

#container{ }内のwidthの値を大きくした時も
注意が必要だ」

kyara1.png:「じゃあ一体どうしたらいいんですか!!!」

kyara2.png:「ベストは#container{ }内のwidthと同値の
バナー画像を用意すること。
できないなら、アップロードしたファイルを編集して
同じ値にすることだ。

だが、ここでも一つ注意が必要だ。
小さい画像ファイルを大きくすると画像が
荒くなるだけになるぞ。
元画像は大きなものを使うんだ」

kyara1.png:「面倒くさそうだね」

kyara2.png:「確かにな。だが難しいことではない。
widthの値と同じにするだけだ」

kyara1.png:「うん、やってみるよQ太郎さん」

ブログタイトルにロールオーバーを使ってみよう

kyara1.png:「Q太郎さん、ブログのタイトルにマウスが重なると
下に線が出るんですけど、あれって何ですか?」

kyara2.png:「それは、ロールオーバーってやつだ」

kyara1.png:「ロールオーバー?ロールケーキではなくて?くだらねー」

kyara2.png:「はなし・・もどしていいか?」

kyara1.png:「ああ、ごめんなさい」

kyara2.png:「ロールオーバー、つまりマウスがその場所と重なると その場所に変化が生じることだな」

kyara1.png:「たまに、画像にマウスを乗せた時も違う画像が
出たりすることもあるけど、それもそうなの?」

kyara2.png:「ああ、だがそれはまだ先の話だ。
今はとりあえずブログタイトルのロールオーバーを
出来るようにしろ」

kyara1.png:「はい。でもどうやって?」

kyara2.png:「/*----Common----*/の中に#banner h1 a{ }という
のがあるだろう。」

kyara1.png:「はい、確かにありました」

kyara2.png:「それがブログタイトルのリンクの設定だな。
だが、このままではロールオーバーは出来ないんだ」

kyara1.png:「ええええええ!!そんな~。
あっ、ちょっと待って。そう言えばどこかでa{ }って見たことあるよ。
もしかしてこれがそうなのかな」

kyara2.png:「Exactly(そのとおり)
テンプレートの一番最初に出てくる
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{ }の外にだぞ。
{ }内の例は消すんだ。

実際の様子は百聞は一見に如かず。
下のブログタイトルにマウスを置いて自分の目で確かめろ」


kyara2.png:「このように、#banner h1 a:hover{ }内に
変えたい要素を記述する。分かったかべいすた」

kyara1.png:「分かりましたQ太郎さん、ありがとうございます」

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

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

×

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