この際だから・・・・
前の記事 で・・・・
CSSってカンタンだよ～って書いてしまったので
ついでに・・・・
CSS自体は・・・ 本当にカンタンなんです・・・・
どうやって組み立てるか？
どうやって考えるか？
そっちが問題なんです・・・・
あっ・・でも難しくはないですよ～
逆に難しくも出来ますけどね・・・・・
たとえば・・・・
１ と ２ があって ・・・・ 間に ３ を入れたいとします
すぐに2つの方法が思いつきますよね・・・・
Aの方法 １の後ろに ３を入れる
Bの方法 ２の前に ３を入れる
これがCSSを書くとき考えることなんです
どうやったらできるのか？
AもBもどちらも同じ場合もあれば
Aの方が簡単な場合も、Aだと出来るけど難しい場合もあります
いろんな考え方、方法があって答えは１つではないんです
まっ・・・カンタンなのは・・・
前の記事でも書きましたが「同じテーマの最新記事」を消す方法とかですね
だれでもアノ方法をすぐに思いつきます・・・・
別の方法を考える方が面倒です・・・
もうひとつ例を挙げると・・・
ここのブログのカレンダー・・・・
タイトルの下にペンギンの画像があります・・・
しかし・・・すでにタイトルで画像を使っていますから背景に画像を２つは使えません・・・
そこで・・・
すごく面倒なことをしてタイトルの画像とペンギンの画像を１つの画像に加工してつけたんです
でも・・・
カレンダー自体には画像を使っていませんのでカレンダーの上にならカンタンに付けられたんです
後で気が付きました・・・
どちらもタイトルの下に画像で、その下がカレンダー・・・・ とまったく同じなんです
どうやったら出来るのか？もっとカンタンに出来ないのか？
CSSでいちばん頭を使うのはココです・・・・
突然・・・ ひらめく時もあります・・・・
このブログのコメントのタイトル・・・・
普通なら ■コメント と、なるところですが アイコンが付いています・・・
いままで質問をいただいて
「ここは変えられません・・・ムリです！」って堂々と答えてきました・・・・
昨日のコメントにもダメですって答えています
昨日の夕方まで本当にそう思っていました・・・・出来るわけがない！って
ソースを見るとコメントのタイトル部分は
<p class="label">■無題</p>
こうなっています・・・・・
ど～やって■だけ消すの・・・？
パット見・・・ムリですよね・・・・
って・・・・昨日の夕方までは思っていました
でも・・・・・
コメントタイトルには全部に■がつきます
アメブロによって必ず付けられてしまいます・・・
それも１文字目・・・・・
１文字目・・・・？
ココからはみなさまの立場になってシュミレーションしてみます
「ＣＳＳ 1文字目」で検索します
すると・・・・
1文字目を大きくする・・・なんて記事がいっぱい出てきます
ということは・・・１文字目だけなんとかできるんだ・・・
それらの記事の中に first-letter が出てきます
次は「first-letter」で検索！
p:first-letter { font-size: 2em; }
<p>の中の最初の1文字目を2倍のサイズにする・・・・
なんか・・・まじで1文字目だけ何とかなりそうだ・・・
消せれば最高！
実際は文字を透明にする命令はありません（注）
なら・・・背景の色にあわせればOK!
背景が白地なら最初の1文字目・・・つまり■を白に出来れば消えてみえる
何とかなりそうじゃないですか・・・・・
p:first-letter { color:#ffffff; }
これでは全部の<p>の1文字目が白くなってしまうので
class="label" これを利用して （ <p class="label">■無題</p> ）
.label:first-letter {
color:#ffffff;
}
背景が白ならコレでいいのですが・・・
ココのブログのように画像を背景に使っている場合には困ります
なら・・・目立たないようにすればいいじゃん
で、サイズを一番小さくしちゃえばいいじゃん！
/*コメントタイトルの■を消す*/
.label:first-letter {
color:#ffffff;/*■の色*/
font-size:1px;
}
※■の色は背景色または、出来るだけ背景画像に似た色を指定してください
これで■がなくなったようにみえます ・・・ やっり～！！！！
あとは空いたところにアイコンを背景で指定をすれば希望通りに・・・・
-----------------------------------------
アメブロによりコメントに№が付くようにされたため
この方法は使えなくなりました
-----------------------------------------
これが私のＣＳＳの作り方・・・・というか考え方みたいなもんです・・・
なんとなくわかりますか？
でも・・・・
なんといっても・・・・ 一番難しいのは・・・・・
みなさまにどうやって理解してもらうか
わかりやすく記事にする方法・・・・ これが一番難しいことです
ということなので・・・
この続き・・・アイコンを入れるまでが記事になるのはいつになるか・・・・・？
クリックしていただけるとうれしいな
注 ・・・じつは
やろうと思えば透明にも出来るのですが・・・・
ソコまでしなくても・・・
ここの実験ブログ↓は背景を半透明にしています
http://ameblo.jp/how-to/
ついでに「ナンチャって会員サイト」のデモサイトでもありますので
↑このリンクから以外ではyahooに飛ばされます
（お気に入りからでも、URLを直接入れてもyahooに飛んじゃいます）
あと・・・・
.label:first-letter {color:#ffffff;}
これも
.label:first-letter {
color:#ffffff;
}
これも・・・どちらも同じです
ただの書き方の違いだけです
ひとつだけなら上でもいいのですが
いろいろ設定するなら下の方がわかりやすいです
CSS サイドバーの背景を下まで 32768
重要です 2009.1.6 --------------------------------------------------
この方法はアメブロでは使用できません
--------------------------------------------------------------
リンク先にラベルを指定してあった場合・・・・・
そのラベルより上が表示されなくなります
アメブロの場合
記事のURLをクリックして記事を見ていた場合に
前の記事や後の記事に移るとき
なぜかわかりませんが記事のURLの後に #main なんて付けられちゃいます
別に必要ないのですが・・・・
http://ameblo.jp/exlink/entry-10187725406.html#main ←最後の #main が問題になりますそのため
<div id="main"> より上にある header が表示されなくなります
つまりタイトル部分が表示されなくなります
原因は・・・・ わかりません？
--------------------------------------------------------------------------
32768で～す！ ・・・・・ こんな数字覚えられるはずないでしょ
数字がわかったら検索をしていっぱい出てきました
結局・・・・ 数字以外はあっていました
しか～し・・・
紹介しているサイトは多いのですが・・・
32768・・・ この数字がなんなのかってはっきり説明しているところはありませんでした
たぶんIEの表示限度ではないでしょうか・・・って説明しているサイトはありましたが？
むか～し・・・ディスプレイの色数で 32768色って聞いたような気がしますが・・・
それは関係あるはずないですよね
前の記事で40000ではダメで30000ならうまくいったからなにかあるんでしょうね？
padding,marginのbottomそれぞれに32768px,-32768px
親要素にoverflow:hidden;
で、CSSの最後に・・・・
#main,
#sub_a,
#sub_b{
margin-bottom: -32768px;
padding-bottom: 32768px;
}
#frame{
overflow:hidden;
}
質問はナシでお願いします
どうせ答えられないと思いますので・・・・・
ちなみに・・・・
私が英語だって思っていたサイトは
なんかスペイン語だったらしいです・・・？
それでもCSSは何とかなるくらいカンタンなんです・・・
ついでにCSSを習うコツ・・・・覚えるコツ・・・使えるようになるコツ・・・
なんと言っても
一番はパクリです！
言葉は悪いですが、まずは人まねからです
わからないうちから本を買っても無駄だと思います
たぶんこのブログでアフェリエイトでCSSの本を紹介すれば多少は儲かるような気がするんですが・・・
本は必要ないって～のが自論なんで・・・ もったいないな～
・・・・・で、CSSに著作権がないって知っていますか？
ないんです！
たとえば・・・
先日・・ アメブロによって同じテーマの最新記事がついたとき
私を含めいろんな方がCSSで消す方法を紹介していました
全部同じでしょ・・・・
誰がやってもああなっちゃうんです
これに著作権なんてあったとしたら・・・ とんでもないことですよね
だから安心してパクッてください・・・・あれっ？
コピーしてきてうまくいったら
まずはうまくいった時点のＣＳＳを退避しておいてください
その後・・・・ 数字を変えてください
padding: 5px; でしたら padding: 30px; とかに
line-height:1.5;でしたら line-height:3.5;
の、ように極端に変えると違いがわかり
その命令がなんなのか・・・数字がどこを意味しているのか理解が出来ます
本を読んで「なるほどね」って覚えるより・・・
数字を変えて実際に違いを見たほうが「あ～ここの数字はここなんだ～」いっぱつで覚えますよ
CSSでブログが壊れるはありませんので安心してトライください
表示がおかしくなることはありますが・・・数字を元に戻せば元通りに・・・
ドコの数字を変えたかわからなくなると困りますから1つずつですよ
だからココのブログに書かれているCSSはコピーして確認したら
数字を変えてどんな風になるのか遊んでください
CSSで使われている命令はそんなにありません
パターンも決まっています
paddingとかスペル覚える必要ないです、読み方なんて覚える必要ないです
こんなの必ず近くで使われていますからコピぺすればすむことです・・・
この後に続く数字の意味が大事なんです・・・
paddingでしたら その後には 上、右、下、左 の順番で数字がくるな・・・コレだけ
そしてこのような場合の数字の順番も全部同じなんです
数字が1個なら その部分
2個なら 上下、左右 3個なら 上、 左右 、下
コレだけ・・・・・ 単位はpxだけで充分
ですから上ってわかったとしても数字を極端に変えてみて実際に「上」の意味するものを感じてください
そうすれば・・・ それだけで・・・・ あなたもCSSの達人です！
自分のブログでCSSを紹介する場合には
CSSに著作権がなくっても・・
それについている注釈 /*こんなの*/ は文章ですからそのままはまずいですよ
CSSについている注釈を見れば・・・
あ～私のところから持ち帰って使ってくれているんだ～ってわかる場合もあります
人によって書く順番とかスペースのあけ方の違いとか・・・癖がありますから・・・
なので
ドコドコからパクッてきましたって書くとか
注釈とかを自分の言葉で説明するとか
もっと細かく注釈をつけて見た方にわかりやすいようにするとか・・
一工夫をしてくださいな
ただ使う分にはそのままでかまいません・・・・
気にする必要もありません・・・ そのまま貼り付けちゃってください
素敵なスキンにして気分よくブログ生活を楽しんでくださいな
※CSSは退避してから作業をおこなってください
------------------------------------------
重要・・
アメブロではおかしな動作をしますので使えません
------------------------------------------
クリックしていただけるとうれしいな
CSS サイドバーの背景を下まで3 ←アメブロでは使えません
CSS サイドバーの背景を下まで3
重要・・
アメブロではおかしな動作をしますので使えません
------------------------------------------
今回の記事は今のところ成功していません・・・・
まねしないようにしてください
たぶん・・・
途中まではあってると思うのですが・・・？
うまくいきません
SOS！！！
どなたかわかる方がおられるかも・・・
期待を込めて記事をアップします
10/2 AM3:50
もしかして・・・・・
うまくいったかも・・・・？
でも・・・
まだ確認中です
10/3 確認できました
これは以前に別のCSSを調べていて
たまたま海外のサイトで見つけました・・・
そのとき試してみてできる場合と出来ない場合がありました
が、・・・英語が全くダメな私にとって
たぶんやり方とか書いてあったと思うのですが・・・・
理解できずにその場は終わってしまいました
今回・・・・
記事を書くにあたって
いろいろと検索をしたのですが見つけ出す事はできませんでした
そのとき・・・ 私が思ったことは
「へ～・・・プラスマイナスでゼロにするんだ・・・・・」
「40000じゃダメなの？30000じゃ足りないの・・・・？」
私が覚えているのはこれだけ・・・・・
そう・・・
そこに書かれていた数字が・・・・・
3万何千何百何十いくつ・・・・って1の位まである数字でした
この数字についても書かれていたとは思うのですが
なんせ英語が・・・・・
ここまででわかったこと！
英語が出来なくてもCSSは理解が出来る！
CSSは簡単なんです！
前の記事とか前の前の記事・・・・
日本語がわからない方が見たとしても・・・
たぶん理解できると思います
私もそうでした
どうなるのかって画像とCSSだけでなんとかなっちゃいます・・・
それほど簡単、万国共通なんです
たぶんその3万何千何百何十いくつ・・・・って数字で検索をかければ見つかると思うのですが
肝心の数字が思い出せません・・・・てか、そんな半端な数字は最初から覚えていません
日本のサイトでも出てきません・・・
やはり数字がわからないと検索できないのか・・・・・
・・・・・で、
ここまででわかっている事で手探りでやってみます
「へ～・・・プラスマイナスでゼロにするんだ・・・・・」
これはマージンとパディングにプラスとマイナスの同じ数字を入れてプラマイゼロにするって～こと
パディングにはマイナスは入れられないから必然的にマージンがマイナス・・・
肝心の数字は・・・・
「40000じゃダメなの？30000じゃ足りないの・・・・？」
margin : -40000px;
padding : 40000px;
これでは上下左右に広がってしまいますので下だけに設定します
margin-bottom : -40000px;
padding-bottom : 40000px;
これをサイドバーに設定・・・
#sub_a,
#sub_b{
margin-bottom: -40000px;
padding-bottom: 40000px;
}
・・えっ・・・え～ぇ？
出来てないですか・・・・・・？
もう少し検証する必要はありますが
ダメです！
記事のほうが短いとサイドバーもソコまでで切れてしまいます
#sub_a,
#sub_b{
margin-bottom: -30000px;
padding-bottom: 30000px;
}
今度はうまくいきました・・・・
が、IEだけです・・・・
#main,
#sub_a,
#sub_b{
margin-bottom: -30000px;
padding-bottom: 30000px;
}
コレでもダメ・・・・
40000がダメで30000だとIEではうまくいった・・・
やはり3万いくつって数字でないとダメなのでしょうか・・・？
いまのところ
お手上げです
根本的にCSSだけで出来ないのか？
完璧に間違っているのか？
一部間違っているのか？
できっこないから検索しても出てこないのか？
いまのところそれすらわかりません・・・
期待を持たせてすみません・・・・・
///////////////////////////////////////
やはり気になって眠れません・・・・
で、思いついたのが
全体を囲っている frame にoverflowを使ってはみ出た部分を消したら・・・・
#sub_a,
#sub_b{
margin-bottom: -30000px;
padding-bottom: 30000px;
}
#frame{
overflow:hidden;
}
今のところ・・・・
うまくいっています（IE6とFirefoxとOpera9とLunascapeで確認）
みなさまに試してくださいってお願いするわけにもいきませんので
実験ブログでも作ってうまく表示されるか見ていただこうかな・・・・
とりあえず寝ます
これが夢でありませんように・・・・
お休みなさい
///////////////////////////////////////
って・・・
やっぱり眠れませんでしたので確認用ブログを作りました
確認いただけると助かります
現在確認済み
○ Windows XP + IE6
○ Windows XP + Firefox
○ Windows XP + Opera9
○ Windows XP + Lunascape
ご協力お願いします
特にmacは近くに環境がありませんので確認できません m(_ _)m
「他にこんなパターンがあるよ実験したら」って提案も歓迎です
あと・・知りたいのは3万いくつって数字・・・ 教えて下さい
やっばっ・・・もう5時過ぎちゃったよ～
早く寝なくては・・・・・
情報ありがとうございます
○ Windows XP + Google Chrome
○ Windows Vista + IE7
× Windows XP + Opera 8.5
------------------------------------------
重要・・
アメブロではおかしな動作をしますので使えません
------------------------------------------
クリックしていただけるとうれしいな
CSS サイドバーの背景を下まで 32768 ←アメブロでは使えません