呪文的なにかを書くと楽チン♪になるよ、というなにか

ただいま、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を設定したときの写真

コメント 8

リクエストまだかなまだかな。。。ワクワクしてまってまする○┓ﾍﾟｺ
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（サイドバーの黒猫）はソネ風呂に入浴出来ないので、
Ｋ弁護士のところにリンクさせているのに‥‥＾＾;

.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)