ブログ活用のヒントを満載
by vlsasaki2
S M T W T F S
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30

カテゴリ:HTMLとCSS編集( 33 )
Top↑

CSS編集とスキンの関係
> vlsasaki2さんの記事「CSSで画像の縁取りポラロイド写真風」を見て
> あたしも、さっそく写真を飾ってみました(ほとんどコピペなんですが)
> CSSの一番最後に
> DIV.POST_BODY img{
(内容省略)
> background-position:95% bottom;
> }
> と挿入し、反映されて喜んでいたのですが、
> 今朝気づくと、Comment欄のCommented by の前のメモ帳?みたいな画像に
> ポラロイドの画像が一部入り込んでしまうのです。

上記のようなメールをいただきましたが同じような疑問を持たれている方もいらっしゃると思いますので本文で対応いたします。

これはスキンによっては本文の中が二重構造になっているものがありまして、DIV.POST_BODYだけでは指定できないものがあります。
こちらで調べることもできると思いますのでまずはどのスキンを使っているのかをお知らせください。
[PR]
by vlsasaki2 | 2004-11-17 19:39 | HTMLとCSS編集 Top↑

鍵付きコメントの表示
ぽっとの陽だまり研究室の鍵コメントを判りやすくする方法からのアイデアです。

自分のブログには鍵付きコメントはたまにしかもらいませんが、だからこそ見落としがないように気をつけています。

ぽっとさんは鍵マークを大きくされていましたが、自分は周りを赤で囲ってみました。
これなら見落とすこともないでしょうね。

DIV.COMMENT_TAIL IMG{border:2px solid red}
a0034054_9545780.gif

ぽっとさん、ありがとね♪

追記
か、か、鍵コメにだけ赤のボーダーをつけたつもりが...
すべてのコメントマークについてました。タハハ;

で、ぽっとさんのアドバイスどおりサイズを大きめにしました。
ぽっとさん、あらためてありがとうございました。
[PR]
by vlsasaki2 | 2004-10-09 09:54 | HTMLとCSS編集 Top↑

エキサイトブログは情報の宝庫
STAY GOLDさんの「うおっ すげぇ!!」で感謝の言葉をいただきました。

CSS編集との出会いはblockquoteタグのカスタマイズ で詳しく説明していますが、本格的なCSSの勉強はここ数ヶ月のことなんです。
まったく分からずに始めましたがいろいろなみなさんにほんとにお世話になりました。

感謝の気持ちをこめてこれまで参考にさせていただいたブログを改めて紹介しましょう。
世祓いさんの検索機能(続き)
紐育日記さんのスキン編集...引用枠 <blockquote> の作り方など
FOOTBALL STYLEさんのBLOCKQUOTEの使い方など
はい こちらサポセン。さんの〆 スキン編集塾#9など 
めざせマイスキンさんの多くの記事
AKIKOのつぶやき。さんの多くの記事
ぽっとの陽だまり研究室さんの多くの記事
しゃんくのつぶやきさんの多くの記事

今後ともよろしくお願いします。(ぺこり)
[PR]
by vlsasaki2 | 2004-10-03 09:13 | HTMLとCSS編集 Top↑

CSSで画像の縁取りポラロイド写真風
画像の縁取りでポラロイド写真風にしました。
a0034054_1722338.jpg

このソースをCSS編集の最後に追加すればOKです。
サインは適当なグラフィックスソフトで作ってください。

●CSSソース
DIV.POST_BODY img{
①margin:5px;
②padding:5px 5px 30px 5px;
③border-top:1px solid #cccccc;
④border-right:1px solid #999999;
⑤border-bottom:1px solid #999999;
⑥border-left:1px solid #cccccc;
⑦background-color:#F6F6F6;
⑧background-image:url(http://www2u.biglobe.ne.jp/~t-sasaki/blog/pic/bg/vl4.gif);
⑨background-repeat:no-repeat;
⑩background-position:95% bottom;
}


●ソースの意味
①枠線の外側に余白を5px分取ります。
②枠線の内側に余白を取ります。上5px、右5px、下30px、左5px
③上の線 1px 実線 薄いグレー色
④右の線 1px 実線 少し濃いグレー色
⑤下の線 1px 実線 少し濃いグレー色
⑥左の線 1px 実線 薄いグレー色
⑦背景色 薄いグレー色
⑧背景画像 サイン 透過gif
⑨背景画像の繰り返し なし
⑩背景画像の位置 左から95%、下端

[PR]
by vlsasaki2 | 2004-09-20 17:32 | HTMLとCSS編集 Top↑

marginとpadding
aT hoMe dAdさんからこういううれしいお便りをいただきました。
記事タイトルのグラデーション
はじめてTBさせてもらいます。こんにちわ^^;
私もここ数日悪戦苦闘していまして、何とかタイトル&メニュー欄のexciteロゴのグラデに成功しました。
よかったら見てやってください。
ひとつ質問ですが、タイトルの左端に少しスペースを入れたいのです。なんか文字がよりすぎていて…。知恵を下さい~^^;


ソースを見ますと、このようになっています。
DIV.POST_HEAD {
WIDTH : 300PX;
MARGIN : 10PX 10PX 10px 0PX;
background-color:#cccc99;
padding:5px;
filter:alpha(opacity100,finishopacity=10,style=1,startx=50);
width:95%;
PADDING : 5PX 0PX 5PX;
BORDER-BOTTOM : 2PX #AAA DOTTED;
}

CSSではあとで記述した方が優先ですから、
PADDING : 5PX 0PX 5PX;
が有効になります。


ちなみに
5PX 0PX 5PX
は上の内余白5px、左右の内余白0px、下の内余白5pxという意味です。

したがってこの行を削除すると、
padding:5px;
が有効となり、上、右、下、左ともに5pxになりますが、もとからあるステートメントは削除するよりも、無効にしておいた方がいいのではないかと思います。
ステートメントを無効にするには、  /* と */ で囲います。

/*PADDING : 5PX 0PX 5PX;*/ とすればいいです。
[PR]
by vlsasaki2 | 2004-09-20 15:56 | HTMLとCSS編集 Top↑

id属性の意味
ヘッダー上部に表示している画像(愛犬タク)の配置はしゃんくさんの記事を参考に行いましたが、ほとんど理屈が分からず見よう見まねって感じでした。
ミツケン先生にclassやidのことを教えてもらっているうちに少し分かるようになってきましたのでこれまでの途中経過を報告します。

●実際の配置
a0034054_14364294.jpg
HTMLの本文・最上部
<DIV CLASS=POST>
<center><img src="http://www2u.biglobe.ne.jp/~t-sasaki/blog/pic/bg/02.jpg" style="position: relative;top: 0px;right: 116px"><$prepage type=1$> <$nextpage type=1$><img src="http://www2u.biglobe.ne.jp/~t-sasaki/blog/pic/bg/03.jpg" style="position:relative;top:0px;left:117px"></center>


●ソースの意味
<center> ← 中央揃え
<img src="http://www2u.biglobe.ne.jp/~t-sasaki/blog/pic/bg/02.jpg" ← 画像表示
style="position: relative;top: 0px;right: 116px"> ← 表示する位置の指定


●位置指定の意味
position: relative; ← 本来の位置からの相対位置指定
top: 0px; ← ブロックの上端
right: 116px; ← 右からの距離が116px。ということは現在の位置から左に116px移動した位置ということ。


style="position: relative;top: 0px;right: 116px"がなかったらcenterタグの指定により、
a0034054_14551821.jpg

のようになる。

これが画像本来の位置であるから、ここから116px分左へ移動させることになる。(左の画像)


ところで、
style="position: relative;top: 0px;right: 116px"
はCSSのインライン表記であるからid属性を使いCSSの部分に記述することができる。

●タグとCSS
HTMLタグからCSSのインライン表記を外しid属性に置き換えると、
<center><img src="http://www2u.biglobe.ne.jp/~t-sasaki/blog/pic/bg/02.jpg" id=taku1><$prepage type=1$> <$nextpage type=1$><img src="http://www2u.biglobe.ne.jp/~t-sasaki/blog/pic/bg/03.jpg" id=taku2></center>

id属性に対応したCSS
#taku1{
position: relative;
top: 0px;
right: 116px;
}

#taku2{
position:relative;
top:0px;
left:117px;
}


[PR]
by vlsasaki2 | 2004-09-20 14:41 | HTMLとCSS編集 Top↑

CSS勉強会
a0034054_14148100.jpg
9月19日(日)10時から17時までCSSの勉強会を行いました。
講師自身が勉強中ということもありはなはだ心もとないところはありましたが、教室は熱気にあふれ大変盛り上がりました。


a0034054_14101770.jpg
IT講師が7人、シニアのボランティア講師が8人という異色の構成で行いましたが結果オーライでした。

昼食時間の交流会もビールと餃子をつつきながら話が弾みました。


a0034054_1734448.jpg
参加者のみなさ~ん。
ブログをアップしたら知らせてくださいねー!


[PR]
by vlsasaki2 | 2004-09-20 14:13 | HTMLとCSS編集 Top↑

id属性の使い方
ミツケン先生、おはようございます。ブログの玉手箱です。
また教えてください。

同じ領域に画像を複数配置することは可能でしょうか。
大きさは小さいものですから重なることはありません。
いわゆるワンポイント画像です。
テストは同じ画像でやっていますが、本番は別の画像にするつもりです。

id="gazou1" を DIV CLASS=POST_BODY の後に挿入すればいいのかなと思ってやりましたがうまくいきません。

状況1
<DIV CLASS=POST_BODY id="gazou1">
とした場合は、画像が表示しますが、もともと<DIV.POST_BODY>で表示していた画像が消えます。

状況2
<DIV CLASS=POST_BODY id="gazou1" id="gazou2">
のような感じで複数配置できないでしょうか。


●HTML編集の「本文」エリア

</DIV>
<DIV CLASS=POST_BODY>
<$postcont$>
<br>


●CSS編集の末尾
#gazou1{
background-image:url('http://www2u.biglobe.ne.jp/~t-sasaki/blog/pic/bg/07.jpg');
background-repeat:no-repeat;
background-position:90% 10%;
}

#gazou2{
background-image:url('http://www2u.biglobe.ne.jp/~t-sasaki/blog/pic/bg/07.jpg');
background-repeat:no-repeat;
background-position:90% 40%;
}

よろしくお願いします。

追記:この質問をした6時間後にミツケン先生から回答をいただきました。
回答致します。
状況1の場合、同一要素に対するCSSは上書きされるので、class、idで同じプロパティがあると、一方しか反映されませんので、この方法だとできません。

状況2の場合は厳密に言うとこの時点で文法エラーですね。
idはもともと要素に対してインデックスをつける為のもの(例えばJavaScriptからその要素に対して直接アクセスする為の窓口になったりします)なので、同じ要素に対し複数のidを指定するのはNGです。
#同様に複数の要素に同じidを指定するのもNGです

という事でこの質問に対する直接的な答えはNoなのですが、以下の方法で代替ができる可能性があります。
<DIV id=gazou1>
<DIV id=gazou2>
~~~~~~~~~~~
</DIV>
</DIV>
HTML編集が出来るところに限りますが、この方法で同じ領域に複数の背景画像を重ね合わせることができます。
#上記の理由でコメント欄に複数の画像を貼るのは難しいです。

単純に画像を重ねるのであれば
<IMG src=hoge1 id=gazou1>
<IMG src=hoge2 id=gazou2>
としておいてposition属性とtop,leftの値を調整すればOKです。
#こちらはささきさんが意図している用途とは違うかもしれませんが


追記2:ミツケン先生、ありがとうございました。
classとidに関して少し糸口が見えてきました。
同じブロック内には背景画像を複数配置することができないということも納得できました。
質問の主旨はいろいろ試している過程で発生した疑問でした。
それよりもHTMLタグでidを宣言しCSSで定義するということが少しではありますが見えてきたのは大きな収穫だったと思います。
コメントに長文を書き込んでいただきほんとうにありがとうございました。

[PR]
by vlsasaki2 | 2004-09-19 06:58 | HTMLとCSS編集 Top↑

CSSで写真のまわりを縁取り(ポラロイド写真風)
写真のまわりをBorderで縁取りし、ロゴを入れました。
ポラロイド写真風でしょ。♪

やり方は明日、アップしますね。
[PR]
by vlsasaki2 | 2004-09-19 00:23 | HTMLとCSS編集 Top↑

CSSでマーカー(蛍光ペン)はいかが?
カリフォルニアのミツケン先生に汎用的なCSSの書き方を教えてもらいましたので、それを応用してマーカー(蛍光ペン)の機能を作りました。

以下のソースをCSSの最後に追加します。

.k01{
background-color:#ff0000;/*赤*/
color:#ffffff;
}

.k02{
background-color:#ffff00;/*黄*/
}

.k03{
background-color:#00ff00;/*黄緑*/
}

.k04{
background-color:#00ffff;/*水色*/
}

.k05{
background-color:#ff0000;/*青*/
color:#ffffff;
}

.k06{
background-color:#ff00ff;/*紫*/
color:#ffffff;
}

.k07{
background-color:#ff8080;/*薄赤*/
}

.k08{
background-color:#ffff80;/*薄黄*/
}

.k09{
background-color:#80ff80;/*薄黄緑*/
}

.k10{
background-color:#80ffff;/*薄水色*/
}

.k11{
background-color:#8080ff;/*薄青*/
}

.k12{
background-color:#ff80ff;/*薄紫*/
}



使い方はいたって簡単。
改行のないインライン範囲指定のspanタグを使うと、
k01 あああああああああああああああああ
k02 あああああああああああああああああ
k03 あああああああああああああああああ
k04 あああああああああああああああああ
k05 あああああああああああああああああ
k06 あああああああああああああああああ
k07 あああああああああああああああああ
k08 あああああああああああああああああ
k09 あああああああああああああああああ
k10 あああああああああああああああああ
k11 あああああああああああああああああ
k12 あああああああああああああああああ

k01 ああああああ<span class=k01>ああああああ</span>あああああ
k02 ああああああ<span class=k02>ああああああ</span>あああああ
k03 ああああああ<span class=k03>ああああああ</span>あああああ
k04 ああああああ<span class=k04>ああああああ</span>あああああ
k05 ああああああ<span class=k05>ああああああ</span>あああああ
k06 ああああああ<span class=k06>ああああああ</span>あああああ
k07 ああああああ<span class=k07>ああああああ</span>あああああ
k08 ああああああ<span class=k08>ああああああ</span>あああああ
k09 ああああああ<span class=k09>ああああああ</span>あああああ
k10 ああああああ<span class=k10>ああああああ</span>あああああ
k11 ああああああ<span class=k11>ああああああ</span>あああああ
k12 ああああああ<span class=k12>ああああああ</span>あああああ


段落指定のpタグを使うと、

あああああああああああああああああああああああああああああああああああああああああああああああああああ


あああああああああああああああああああああああああああああああああああああああああああああああああああ


あああああああああああああああああああああああああああああああああああああああああああああああああああ


<p class=k01>あああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
<p class=k02>あああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
<p class=k03>あああああああああああああああああああああああああああああああああああああああああああああああああああ</p>


ああ、面白かった。
[PR]
by vlsasaki2 | 2004-09-17 00:33 | HTMLとCSS編集 Top↑