呪文的なにかを書くと楽チン♪になるよ、というなにか [HTML&CSSの小枝]
ただいま、CSSちょいと本腰いれて解析中。
※といっても、クラスや固定IDの名称確認ぐらい。
※ネーミングルールが分かりやすいので、お気楽極楽ってかんじ♪
記事タイトルの帯の色や画像の変更を先日、確認しましたので、
後日アップする予定。
で、じゃぁ、今回はなにさ?
って言うと、
コレ↓
写真に枠線風に見えるのがあると思いますが、これを毎回、毎回書くの面倒!
過去記事からコピーするのも面倒!
っていうそこのアナタ!
そう、アナタ(多分、人差し指で自分の顔指しているアナタのことですよー)。
この設定をCSSに書いちゃいましょう、ということ。
で、↑の記事本文に書いた内容は↓。
■HTML側 <img class="myphoto" src="pekepeke.jpg" />
目新しいのは「class」ってヤツ。
まあ、↑の説明の前に追記したCSSはどーなっているかというと↓。
■CSS側 .myphoto { padding:10px 10px 20px; border-width:1.5px 3.5px 3.5px 1.5px; border-color:#555555; border-style:solid }
って感じ♪
なにやら、イロイロ呪文が書かれていますが、大切なのは、
「.myphoto」
「.」の後ろの文字(今回は「myphoto」)は
ご自分で覚えやすい文字でOKですd(^^*)
ex)「.photosettei」とか「.photowaku」とかとか。
註:「.photo」とか一般的な名称は避けた方がよいかも。
で、これをしたことで、何を設定したかというと、CSS文法におけるクラス(class)を設定したのです!
しかも、独自のクラスです!!
で、↑のHTML側のように設定すると
↑の写真の枠が表示されるのです♪
「コレをしたことで、どんなメリットがあるの?」
ごもっとも。
記事本文中だけで、上記のような枠線を書く場合は↓。
■記事本文だけで記載する場合 <img src="pekepeke.jpg" style=" padding:10px 10px 20px; border-width:1.5px 3.5px 3.5px 1.5px; border-color:#555555; border-style:solid" />
これを毎回書く(コピー込み)するよりは、自分で設定した独自クラスを
ちょろっと書いた方が楽だし、見た目もさわやか<謎
で、この設定。
いくらでも、増やせます♪
たとえば、文字色やサイズ表記位置なども設定できます。
写真を撮った時のカメラ情報などを記載する時にも楽ですね♪
...。。。
ぁ。
あきらめてる人いる?
...。。。
手ぇ挙げなくていいから、ちょいとチャレンジしてみて欲しい。
CSS側の書かれている呪文も↓で解説しておきますので、ぜひともやってみて欲しい。
楽だよ?
CSS側の呪文解説
■padding
写真の縁からどれだけ離すかを設定
ex)padding:10px;(←とりあえず、これで十分かと。数字を変更すると変化します)
■border-width
枠線の太さを設定
ex)border-width:3px;(数字を変更すると変化します)
■border-color
枠線の色を設定
ex)border-color:#ddff44;(#以降の16進数文字を変更すると変化します)
註:色の説明については、ココ。
■border-style
枠線の種類を設定
ex)border-style:solid;
註:種類の説明については、ココ。
また、勘のよい人はあれだと思うけど、
このpaddingというのがまたミソ。
Necoのは記事が白地に黒字だから白い枠のように見えるけど、実際は、塗りつぶされていないのですよ。
なので、ちょいと追加。
このカテゴリ内にもちょろっと書かれていますけど。
■background-color
背景色を設定
ex)background-color:#6666aa;
→はbackground-colorを設定したときの写真
リクエストまだかなまだかな。。。ワクワクしてまってまする○┓ペコ
by maya (2006-08-04 15:05)
>mayaさん
コメント及び「nice!」判定ありがとですm(_ _)m
まぁ、待て(笑)
しばし、待て。
で、タイトル脇の緑は、多分画像なので、次の記事で解決するよ。
「続き」のヤツも解析済みでっす。
後は、記事を書く時間だけですのでー♪
by NecoYanagi (2006-08-04 15:31)
チャレンジしてみます。。。
by loiter_about_on_the_way (2006-08-06 07:55)
>にっしぃさん
コメント及び「nice!」判定ありがとですm(_ _)m
うんうん、チャレンジしてみて♪
by NecoYanagi (2006-08-07 09:33)
Necoさん、こんばんにゃ。
忍法「猫柳」で、こっそり写真に枠を付けたり、カレンダーの更新日を
ハート形にしてみました^^;
幾つか分かったことがあるので、お礼の代わりに紹介しておきます。
.body {background-color:#f0ffff} ←背景色
.articles {color:#333333} ←記事の文字色!
.previousLink a{color:#70a000} ←記事タイトルの上にあるリンク文字色
.archive-links a{color:#70a000}
.nextLink a{color:#70a000}
.archive-name {color:#70a000}
.sidebar h3{color:#70a000;} ←サイドバーの文字色
.sidebar a{color:#70a000;}
.sidebar{color:#339900}
使用しているベーシック(白)はバナーもないし、リンク部分も
カーソルで触れないと色変化しないので、デフォルト色を付けてみました。
ul{list-style-type:square}
em.sknys1{color:#70a000} ←何故かイタリック?
CSSの遠隔操作も面白いのですが、これ以上カスタムペインに入りません!
by sknys (2006-08-19 20:43)
>sknysさん こんばんにゃ<真似っ子(笑)
おーイロイロと変えてますねー。
そうそう、カスタムペインにはいらないときは、
どこか(So-net U-pageとか)にCSSだけ書いてポイって置いておいて、
<link rel="stylesheet" type="text/css" href="置いた場所" />
をカキカキすれば、無限(!?)にカスタマイズできます。
多分、これだけできる人なので、お気楽にできるかと。
Necoはものぐさ大王なので、ちょびちょびしかやっていませぬ...orz
しかし、忍法とは。。。げぼにゃー(笑)<意味なし
by NecoYanagi (2006-08-21 16:24)
Necoさん、こんばんにゃん。
外部リンクという「裏技」があるんですね。
全然思い付きませんでした。
ウチのMaukie(サイドバーの黒猫)はソネ風呂に入浴出来ないので、
K弁護士のところにリンクさせているのに‥‥^^;
.previousLink a, ←カンマ( , )で区切るだけ!
.nextLink a,
.archive-links a,
.archive-name{color:#70a000}
.articles h3,
.articles a{color:#70a000}
.sidebar h3,
.sidebar a{color:#70a000}
「複数の要素に適用させる」方法で、ダイエットに成功?
‥‥上手く行かない場合もありますが。
by sknys (2006-08-22 00:22)
>sknysさん こんばんにゃー。
...。。。
(!!)
複数要素を同一指定する場合ってば、カンマ区切りでいけるんだ!!
し、知らなかったよ...orz
べんきょーになりました<ぃゃ、真面目にm(_ _)m
自分で記述してるCSSだと、自分の都合のよいよーに書いてしまうからなー(反省)
by NecoYanagi (2006-08-22 14:55)