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

コメント欄を装飾しよう [応用]

kyara1.png:「Q太郎さん、コメントを書く欄に
面白い細工したいんだけど、何かあるかなぁ」

kyara2.png:「コメント欄・・・だと。
良いか、まず何をやりたいかを考えるんだ。
次には基礎を思い出せ。
基礎はもう分かるだろ」

kyara1.png:「はい、『フォント』・『背景』・『ボーダー』ですよね」

kyara2.png:「Exactru(その通りだ)」

kyara1.png:「これが初期状態のコメント欄だね
見てるみんな文字を入力してみてよ」


kyara1.png:「じゃあ次は、全要素を使って
コメント欄を装飾してみようかな。
えーっと、フォントは『太さ』と『種類』と『斜体』と『色』と『大きさ』で
背景は『背景色』と『背景画像』で
ボーダーは『色』と『幅』と『線の種類』だったね
そうすると、CSS書く場所はコメント欄だから・・・
あっ、ここだね、#comment-write textareaっと」

#comment-write textarea {
height:150px;
font-weigth:700;
font-family:'MS 明朝';
font-style:italic;
color:yellow;
font-size:10pt;
background:black url(/_images/blog/_b9e/dio-the-world21/oraora.gif) no-repeat bottom right;
border:blue 5px dashed;
}

kyara1.png:「こんな感じでどうだ!!!
ちゃんと右下にはワンポイントを入れてみましたよ、Q太郎さん。
見てるみんな、こっちにも文字を入力して
違いを体験してちょうだい」


kyara2.png:「なかなか、いいぞ。
一応補足しておく。
ベイスタは背景に背景色「黒」を使用したが
以前やったように背景画像を使用することも可能だ。
その時のCSSの記述は
#comment-weite textarea{
・
backgrond:url(/-----/) no-repeat;
}が基本となるが
コメント欄の大きさと画像によっては
入り切らなかったり、足りないこともあるだろう。
なので
1.画像が小さい時・・・・no-repeatをrepeatに変更
2.画像が大きい時・・・・
 ①画像が切れてもかまわない時・・・・何もしない
 ②画像が切れるのが嫌な時・・・・・・・hetight,widthの設定を変える。

と、まぁこんなところだ」

kyara1.png:「はい、理解可能です。
なんか応用って言ってもほとんど基礎と変わりありませんね」


疑問に答えよう [その他]

kyara1.png:「Q太郎さん、いつも僕の疑問に
答えてくれてありがとう。
けど、他の人も同じような疑問をもっているかもしれないよ」

kyara2.png:「ああ、そうかもな」

kyara1.png:「たまには、みんなの疑問も
聞いてあげてよ」

kyara2.png:「ヤレヤレだぜ」

kyara1.png:「そんなわけで、疑問あれば
コメントに入れて下さい。
分かる範囲内でQ太郎さんがお答えします
説明が下手でも、『このドシロートがぁぁぁぁ』って
怒らないでね」


もう一度基礎をおさらいしてみよう [おさらい]

kyara1.png:「Q太郎さん、これで
「フォント」・「背景」・「ボーダー」終了なの」

kyara2.png:「ああ、そうだな。
細かく言えばまだあるが、すぐに使うのは前回までに
説明したものだろう」

kyara1.png:「じゃあ、もう一度
CSSの種類とCSSが該当する範囲を復習してみるね」

フォント要素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:★枠線の種類の値 枠線の太さの値 枠線の色の値
区切り------{ }影響を及ぼす個所
①/*-----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トップ - ブログ - ソネットポイント部分
kyara2.png:「これを覚えておけば、あとは応用だけだ。 どうだ?もう次のステップへ行けるか?」 kyara1.png:「はい、まだやってみたいこともあるので 是非お願いします!!!」 kyara2.png「Good」

枠線(ボーダー)を使ってみよう(3) [border基礎]

kyara1.png:「前回の話で、ボーダーに
色々な使い方があるとわかったよ、Q太郎さん」

kyara2.png:「ふっ、まだまだだな」

kyara1.png:「えーっ、まだ何かあるんですか?」

kyara2.png:「観察しろというのは…… 見るんじゃあなくて
観ることだ… 聞くんじゃあなく聴くことだ 
でないと………… これから死ぬことになるぜ……」 

kyara1.png:「そんな大げさなんですか・・・」

kyara2.png:「ベイスタ、お前ボーダーが必ず4辺を囲むと
思い込んでいないか?」

kyara1.png:「えっ、4辺ではなく好きな所にだけ
線を引けるってことですか?
そ、そんな。まさかって感じだがグッと来たぜ!!
で、どうすればいいんでしょう・・・・」

kyara2.png:「4辺に使う時はborder:線の種類 幅 色;だったろ。
限定したい側に使うにはborderの後ろに
-top, -right, -bottom ,-leftを入れるんだ。
下線にしたいならborder-bottom:線の種類 幅 色;だな」

kyara1.png:「なるほど」

kyara2.png:「これによって出来ること・・・・
そうだな記事タイトルを例にとってみてみよう。
枠線(ボーダー)を使ってみよう(3)
この記事のタイトルだな。 .articles-title { margin:0; margin-bottom:15px; padding:3px 12px; background-color: #ff8539; font-size:small; color: #ffffff; border-right:solid 20px green; }と右側に緑色20pxの単線の指定を入れてみるぞ。 するとこうなる。
枠線(ボーダー)を使ってみよう(3)
kyara1.png:「おおぉ、かっこいいー。 そこに痺れる、あこがれる~。 ちょっとしたにも入れてみようっと。 えーと、下はbottomだっけ。 border-bottom:solid 10px green;っと。
枠線(ボーダー)を使ってみよう(3)
ん?ってことはサイドバータイトルなんかにも 使えるってことですよね」 kyara2.png:「ああ、そうだ」 kyara1.png:「もしかして、ブログタイトルや サブタイトルにも使えちゃったりするのかなぁ」 kyara2.png:「可能だ!!!」 kyara1.png:「じゃあ、あんなとこにもこんなとこにも・・・・ ああ、想像するのが楽しすぎるーーーーーーーーー」 kyara2.png:「ヤレヤレダゼ」

枠線(ボーダー)を使ってみよう(2) [border基礎]

kyara2.png:「では、前回の続き
ボーダーの種類を説明しよう。
ボーダーの種類は8種類ある。
solid       dotted

dashed       double

ridge       groove

inset       outset

以上の8つだ」


kyara1.png:「8種類までは知ってたけど
どんな線なのかまでは知りませんでした・・・」

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

kyara1.png:「ところでQ太郎さん、このボーダーって
どういう時に使えばいいの?
フォントや背景は記事にそのまま使えばいいけどさぁ」

kyara2.png:「使い方は様々だな。
この記事の外側を見てみろ。
銀色の枠線で囲まれているだろ」

kyara1.png:「はっ、はい、確かに」

kyara2.png:「それに線の種類で紹介したように
ridgeあたりを使えば、額縁や電光掲示板のようにも使えるぞ。
presented_by_uryyyyyy.jpg
そして時は動き出す kyara2.png:「いいか、頭はただあるんじゃあない。 考えるためにあるんだ」 kyara1.png:「うわっ、こんな使い方が・・・・ ボーダーを見くびってました!!!!」 kyara2.png:「では、CSSの書き方だな。 書き方はこうだ!! border:線の種類 幅 色; 3種類は順不同で、それぞれの要素の間には 半角スペースだ。 この記事のように、枠線を入れたければ .articles-body { line-height:1.6; margin:0 0 20px 0; border:double 5px silver; } このように記述するんだ」 kyara1.png:「それだけなんですか? 思ったより全然簡単です・・・・」 kyara2.png:「やってみなければわからないことだらけだろう。 いいか、真の『失敗』とはッ! 開拓の心を忘れ!  困難に挑戦する事に無縁のところにいる者たちの事をいうのだッ!」 kyara1.png:「理解不能 理解不能 理解不能 理解不能」 「あっ! 理解『可』能」 kyara2.png:「ディ モールト。 次はもう少し踏み込んでみるぞ」

枠線(ボーダー)を使ってみよう(1) [border基礎]

kyara1.png:「Q太郎さん、前回のモミジを
ワンポイントで使ってみましたよ、ほら
article-body{
line-height:1.4;
padding:;
font-size:10pt;
font-weight:900;
color:midnightblue;
background:url("/-----------------") no-repeat right bottom;
}」

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

kyara1.png「この前は『フォント』、前回は『背景』を教わりました。
3要素の残りの『ボーダー』について教えて下さい」

kyara2.png:「ベイスタが記事『CSSの要素をおさらいしてみよう 』で
言っていたように、ボーダーは枠線の種類・色・幅の3つの
要素で構成される」

kyara1.png;「はい、そこまでは理解しています」

kyara2.png:「GOOD !
そうしたら、次は具体的なものだな。
ボーダーの色はそのままだ。
幅であるborder-widthの単位はpxやpt、その他にもmm,cm,in,や
数値を必要としないthin(細い),medium(中間),thick(太い)がある」

kyara1.png:「ふむふむ」

kyara2.png:「一番重要な要素は種類だな。
これは次回に説明しよう」

記事の背景に画像を入れてみよう [background基礎]

kyara2.png:「久しぶりだなベイスタ・・・」

kyara1.png:「Q太郎さん、どこへ行っていたんですか?」

kyara2.png:「ああ、ちょっとエジプトへ」

kyara1.png:「みてくださいレイアウト変わりましたよ。
.article-body{
line-height:1.6;
margin:0 0 20px 0;
font-size:10pt;
font-weight:bold;
color:midnightblue;
}
へへへ、文字の色も変えちゃった」

kyara2.png:「成長したな、康一君」

kyara1.png:「えーっ、康一君て誰ですか!!
僕はベイスタですってば」

kyara2.png:「うっとおしいぞ、このアマ!!」

kyara1.png:「男だし・・・・
まぁそんなことはどうでもいいや。
Q太郎さんがいない間に季節も変わっちゃったよ。
そこで僕思ったんだ。
記事の背景部分を季節感のあるものにしたいんだ。
so-netのブログって記事部分が無地なの多いでしょ。
なんか、そういうとこカスタマイズできるかなって思っちゃった」

kyara2.png:「ふっ、お前がこうしたいって案をだすとはな。
やれやれだぜ。
よし、良いだろう教えてやる。
ここに1枚の画像がある。momiji.png
この画像を使って説明しよう。

その前に、一つ確認だ。
ベイスタ、お前は背景をどうしたいんだ?
ワンポイントで使うのか?
それとも完全な記事の背景として使うのか?
どちらだ」

kyara1.png:「ええーっ、ワンポイントで使うことなんても
出来るんですか~?
僕、完全に記事の背景でしか考えてませんでした・・・」

kyara2.png:「それでは実際の画面を見てみろ。
まず記事の背景として
(ここでは画像を繰り返し使用しています。
繰り返しについては下部で触れております)
そして時は動き出す
そしてこっちがワンポイント
そして時は動き出す
kyara2.png:「一つ忠告しておく。 どちらに使うにしても画像の大きさと透明度には気をつけろ。 背景に使う画像があまりにも小さすぎるとみっともないし 文字と重なると文字が見にくくなる。 ここは.article{ }内のwidthの値に気を配るんだな。 ワンポイントにしても同じだ あまりにも大きいと邪魔だし 文字と重なると文字が見にくくなる」 kyara1.png:「CSSの記述はどうすればいいんですか?」 kyara2.png:「.article-body{ }内でアップロードしてある 背景画像に使いたいファイルを選べば完了だ」 kyara1.png:「ところでQ太郎さん、上の画像を見ると背景画像って 自分の好きな場所に置けるんですか?」 kyara2.png:「ああ、配置できるのは次の9か所。 それぞれブログの画面と同じ配置だ。
left topcenter topright top
left centercenter centerright center
left bottomcenter bottomright bottom
選んだファイルの後ろに、置きたい場所を記述しろ。 上図のように右下ならright bottomだ。 .article-body{ ine-height:1.6; margin:0 0 20px 0; font-size:10pt; font-weight:bold; color:midnightblue; background:url("----------.jpg") right bottom no-repeat; } 画像を繰り返し使いたいときは 1.縦方向に繰り返すならrepeat-y 2.横方向に繰り返すならrepeat-x 3.縦横に繰り返すならrepeat 4.繰り返さないならno-repeatを使う画像の後ろに記述するんだな。 ただし、1は上、中央、下のどこで繰り返すかの指定が必要 2は右、中央、左のどこで繰り返すかの指定が必要だな」 kyara1.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太郎さん、ありがとうございます」
前の10件 | -

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