横浜べいすた。
最近ブログを始めた。
オリジナリティあふれるブログに憧れる。
空条Q太郎。
スタンド使い?
星つながりで、ベイスタの面倒をみる。
前の10件 | -
コメント欄を装飾しよう [応用]
:「Q太郎さん、コメントを書く欄に 面白い細工したいんだけど、何かあるかなぁ」 :「コメント欄・・・だと。 良いか、まず何をやりたいかを考えるんだ。 次には基礎を思い出せ。 基礎はもう分かるだろ」 :「はい、『フォント』・『背景』・『ボーダー』ですよね」 :「Exactru(その通りだ)」 :「これが初期状態のコメント欄だね 見てるみんな文字を入力してみてよ」 :「じゃあ次は、全要素を使って コメント欄を装飾してみようかな。 えーっと、フォントは『太さ』と『種類』と『斜体』と『色』と『大きさ』で 背景は『背景色』と『背景画像』で ボーダーは『色』と『幅』と『線の種類』だったね そうすると、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; } :「こんな感じでどうだ!!! ちゃんと右下にはワンポイントを入れてみましたよ、Q太郎さん。 見てるみんな、こっちにも文字を入力して 違いを体験してちょうだい」 :「なかなか、いいぞ。 一応補足しておく。 ベイスタは背景に背景色「黒」を使用したが 以前やったように背景画像を使用することも可能だ。 その時のCSSの記述は #comment-weite textarea{ ・ backgrond:url(/-----/) no-repeat; }が基本となるが コメント欄の大きさと画像によっては 入り切らなかったり、足りないこともあるだろう。 なので 1.画像が小さい時・・・・no-repeatをrepeatに変更 2.画像が大きい時・・・・ ①画像が切れてもかまわない時・・・・何もしない ②画像が切れるのが嫌な時・・・・・・・hetight,widthの設定を変える。 と、まぁこんなところだ」 :「はい、理解可能です。 なんか応用って言ってもほとんど基礎と変わりありませんね」
疑問に答えよう [その他]
:「Q太郎さん、いつも僕の疑問に 答えてくれてありがとう。 けど、他の人も同じような疑問をもっているかもしれないよ」 :「ああ、そうかもな」 :「たまには、みんなの疑問も 聞いてあげてよ」 :「ヤレヤレだぜ」 :「そんなわけで、疑問あれば コメントに入れて下さい。 分かる範囲内でQ太郎さんがお答えします 説明が下手でも、『このドシロートがぁぁぁぁ』って 怒らないでね」
もう一度基礎をおさらいしてみよう [おさらい]
:「Q太郎さん、これで 「フォント」・「背景」・「ボーダー」終了なの」 :「ああ、そうだな。 細かく言えばまだあるが、すぐに使うのは前回までに 説明したものだろう」 :「じゃあ、もう一度 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-----*/ | 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トップ - ブログ - ソネットポイント部分 |
枠線(ボーダー)を使ってみよう(3) [border基礎]
:「前回の話で、ボーダーに 色々な使い方があるとわかったよ、Q太郎さん」 :「ふっ、まだまだだな」 :「えーっ、まだ何かあるんですか?」 :「観察しろというのは…… 見るんじゃあなくて 観ることだ… 聞くんじゃあなく聴くことだ でないと………… これから死ぬことになるぜ……」 :「そんな大げさなんですか・・・」 :「ベイスタ、お前ボーダーが必ず4辺を囲むと 思い込んでいないか?」 :「えっ、4辺ではなく好きな所にだけ 線を引けるってことですか? そ、そんな。まさかって感じだがグッと来たぜ!! で、どうすればいいんでしょう・・・・」 :「4辺に使う時はborder:線の種類 幅 色;だったろ。 限定したい側に使うにはborderの後ろに -top, -right, -bottom ,-leftを入れるんだ。 下線にしたいならborder-bottom:線の種類 幅 色;だな」 :「なるほど」 :「これによって出来ること・・・・ そうだな記事タイトルを例にとってみてみよう。枠線(ボーダー)を使ってみよう(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):「おおぉ、かっこいいー。 そこに痺れる、あこがれる~。 ちょっとしたにも入れてみようっと。 えーと、下はbottomだっけ。 border-bottom:solid 10px green;っと。枠線(ボーダー)を使ってみよう(3)ん?ってことはサイドバータイトルなんかにも 使えるってことですよね」 :「ああ、そうだ」 :「もしかして、ブログタイトルや サブタイトルにも使えちゃったりするのかなぁ」 :「可能だ!!!」 :「じゃあ、あんなとこにもこんなとこにも・・・・ ああ、想像するのが楽しすぎるーーーーーーーーー」 :「ヤレヤレダゼ」
枠線(ボーダー)を使ってみよう(2) [border基礎]
:「では、前回の続き ボーダーの種類を説明しよう。 ボーダーの種類は8種類ある。 solid dotted dashed double ridge groove inset outset 以上の8つだ」 :「8種類までは知ってたけど どんな線なのかまでは知りませんでした・・・」 :「やれやれだぜ」 :「ところでQ太郎さん、このボーダーって どういう時に使えばいいの? フォントや背景は記事にそのまま使えばいいけどさぁ」 :「使い方は様々だな。 この記事の外側を見てみろ。 銀色の枠線で囲まれているだろ」 :「はっ、はい、確かに」 :「それに線の種類で紹介したように ridgeあたりを使えば、額縁や電光掲示板のようにも使えるぞ。:「いいか、頭はただあるんじゃあない。 考えるためにあるんだ」 :「うわっ、こんな使い方が・・・・ ボーダーを見くびってました!!!!」 :「では、CSSの書き方だな。 書き方はこうだ!! border:線の種類 幅 色; 3種類は順不同で、それぞれの要素の間には 半角スペースだ。 この記事のように、枠線を入れたければ .articles-body { line-height:1.6; margin:0 0 20px 0; border:double 5px silver; } このように記述するんだ」 :「それだけなんですか? 思ったより全然簡単です・・・・」 :「やってみなければわからないことだらけだろう。 いいか、真の『失敗』とはッ! 開拓の心を忘れ! 困難に挑戦する事に無縁のところにいる者たちの事をいうのだッ!」 :「理解不能 理解不能 理解不能 理解不能」 「あっ! 理解『可』能」 :「ディ モールト。 次はもう少し踏み込んでみるぞ」
枠線(ボーダー)を使ってみよう(1) [border基礎]
:「Q太郎さん、前回のモミジを ワンポイントで使ってみましたよ、ほら article-body{ line-height:1.4; padding:; font-size:10pt; font-weight:900; color:midnightblue; background:url("/-----------------") no-repeat right bottom; }」 :「良しッ! ディ・モールト ディ・モールト(非常に 非常に)良いぞッ! 良く学習してるぞッ!」 「この前は『フォント』、前回は『背景』を教わりました。 3要素の残りの『ボーダー』について教えて下さい」 :「ベイスタが記事『CSSの要素をおさらいしてみよう 』で 言っていたように、ボーダーは枠線の種類・色・幅の3つの 要素で構成される」 ;「はい、そこまでは理解しています」 :「GOOD ! そうしたら、次は具体的なものだな。 ボーダーの色はそのままだ。 幅であるborder-widthの単位はpxやpt、その他にもmm,cm,in,や 数値を必要としないthin(細い),medium(中間),thick(太い)がある」 :「ふむふむ」 :「一番重要な要素は種類だな。 これは次回に説明しよう」
記事の背景に画像を入れてみよう [background基礎]
:「久しぶりだなベイスタ・・・」 :「Q太郎さん、どこへ行っていたんですか?」 :「ああ、ちょっとエジプトへ」 :「みてくださいレイアウト変わりましたよ。 .article-body{ line-height:1.6; margin:0 0 20px 0; font-size:10pt; font-weight:bold; color:midnightblue; } へへへ、文字の色も変えちゃった」 :「成長したな、康一君」 :「えーっ、康一君て誰ですか!! 僕はベイスタですってば」 :「うっとおしいぞ、このアマ!!」 :「男だし・・・・ まぁそんなことはどうでもいいや。 Q太郎さんがいない間に季節も変わっちゃったよ。 そこで僕思ったんだ。 記事の背景部分を季節感のあるものにしたいんだ。 so-netのブログって記事部分が無地なの多いでしょ。 なんか、そういうとこカスタマイズできるかなって思っちゃった」 :「ふっ、お前がこうしたいって案をだすとはな。 やれやれだぜ。 よし、良いだろう教えてやる。 ここに1枚の画像がある。 この画像を使って説明しよう。 その前に、一つ確認だ。 ベイスタ、お前は背景をどうしたいんだ? ワンポイントで使うのか? それとも完全な記事の背景として使うのか? どちらだ」 :「ええーっ、ワンポイントで使うことなんても 出来るんですか~? 僕、完全に記事の背景でしか考えてませんでした・・・」 :「それでは実際の画面を見てみろ。 まず記事の背景として (ここでは画像を繰り返し使用しています。 繰り返しについては下部で触れております)そして時は動き出すそしてこっちがワンポイントそして時は動き出す:「一つ忠告しておく。 どちらに使うにしても画像の大きさと透明度には気をつけろ。 背景に使う画像があまりにも小さすぎるとみっともないし 文字と重なると文字が見にくくなる。 ここは.article{ }内のwidthの値に気を配るんだな。 ワンポイントにしても同じだ あまりにも大きいと邪魔だし 文字と重なると文字が見にくくなる」 :「CSSの記述はどうすればいいんですか?」 :「.article-body{ }内でアップロードしてある 背景画像に使いたいファイルを選べば完了だ」 :「ところでQ太郎さん、上の画像を見ると背景画像って 自分の好きな場所に置けるんですか?」 :「ああ、配置できるのは次の9か所。 それぞれブログの画面と同じ配置だ。
left top | center top | right top |
left center | center center | right center |
left bottom | center bottom | right bottom |
文字を見やすく設定しよう [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 { }ということだ」
文字っておいらには見づらいんですけど、大きく出来るんですよね」
:「ああ、出来るな」
:「でも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太郎さん」
たくさんのテンプレートがあるけど、バナーに好きな
画像って使えるの?」
:「ああ、余裕だな
#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{ }って見たことあるよ。
もしかしてこれがそうなのかな」
:「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{ }の外にだぞ。
{ }内の例は消すんだ。
実際の様子は百聞は一見に如かず。
下のブログタイトルにマウスを置いて自分の目で確かめろ」
:「このように、#banner h1 a:hover{ }内に
変えたい要素を記述する。分かったかべいすた」
:「分かりましたQ太郎さん、ありがとうございます」
下に線が出るんですけど、あれって何ですか?」
:「それは、ロールオーバーってやつだ」
:「ロールオーバー?ロールケーキではなくて?くだらねー」
:「はなし・・もどしていいか?」
:「ああ、ごめんなさい」
:「ロールオーバー、つまりマウスがその場所と重なると その場所に変化が生じることだな」
:「たまに、画像にマウスを乗せた時も違う画像が
出たりすることもあるけど、それもそうなの?」
:「ああ、だがそれはまだ先の話だ。
今はとりあえずブログタイトルのロールオーバーを
出来るようにしろ」
:「はい。でもどうやって?」
:「/*----Common----*/の中に#banner h1 a{ }という
のがあるだろう。」
:「はい、確かにありました」
:「それがブログタイトルのリンクの設定だな。
だが、このままではロールオーバーは出来ないんだ」
:「ええええええ!!そんな~。
あっ、ちょっと待って。そう言えばどこかでa{ }って見たことあるよ。
もしかしてこれがそうなのかな」
:「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{ }の外にだぞ。
{ }内の例は消すんだ。
実際の様子は百聞は一見に如かず。
下のブログタイトルにマウスを置いて自分の目で確かめろ」
:「このように、#banner h1 a:hover{ }内に
変えたい要素を記述する。分かったかべいすた」
:「分かりましたQ太郎さん、ありがとうございます」
前の10件 | -