さてさて、11月も折り返し地点を過ぎてしまいました。

次期スキン、もうほぼ完成しております。

テーマは当然「クリスマス」。

でも各メニュータイトルの画像がなかなか決まらない・・・。

基本は透過gifなんですが、どういう感じにするか・・・。

ほんまに悩みに悩み中です。む~、どしよ。

今日中に出来ればいいんだけど(*_*)
やっとでけた!(*'∀'*)+

やっとっていうか、総作業時間6時間ぐらいかな?

今回は各メニュータイトルを凝ってみた☆

一部の画像のサイズ合わなくて何度も修正するハメに(;´д⊂)

でもいい出来♪

7月の背景画像固定スキンと色合いが少し似てるかも・・・。

まぁパーツは全てまったく違うから大丈夫だと思うー☆

今回のベーススキンは今のこのスキン(*_*)

ホントは「読者になる」とかのボタンが

オレンジのにしたかったんだけど

いつも使ってるオレンジのは色合いが少し違っててダメだった。

なので無難にこいつの白でいくことにした☆


それでは、21日にまた(*'-')
10月のスキンのテーマはかなり前から考えてた。

「ハロウィン」。

スキンがだんだん手抜きになってきてるような・・・。

まいっか(´・ω・`)

シンプルでかっこよくって、けっこう難しい。

CSSの勉強はもうし尽してやることないので、

あとはただデザインをひたすら考えるのみ。

僕の美的センスが問われてるような気がするけど、

凝ればすんごいのができるんだろうけど、

根がめんどくさがりだから(*´Д`*)


というわけで、この週末使ってスキン作ります。
いい素材見つけた♪

次のheader画像にしよう♪


というわけで、次回スキンの方向性決まりました('∀')

やっぱりテーマは『秋』!

お楽しみに☆
9月になった。早いなー(´・ω・`)

で、次のスキン。どしよ。

まずテーマ考えよう。

9月と言えば、やっぱ秋。

秋分の日もあるし(笑)

秋かー。

結局全然関係ないテーマになりそうな気がー(笑)
ついにきた! 広告部分のデザイン編集!


今までCSSでは触ることができなかった広告部分。

それがついにいじれるようになった!

よくやったアメブロ!(*´Д`*)
できた(´・ω・`)


作業時間、およそ4時間かな?

次のスキンできちゃった。

まいっか。


21日をお楽しみに♪
次のスキンの作成に取り掛かります。

ほかのブログとうちのブログを見比べて思ったこと。

「ちょっと派手すぎかな?(´・ω・`)」
ということで、使う色を少し減らそうと思います。

どんなのになるかなー。
今回のスキンについて。

透過処理は実はすんごく簡単。CSS中の透明にしたい部分に以下の2文を加えるだけ。

filter:Alpha(opacity=80);
-moz-opacity:0.80; opacity:0.80

上の行がInternetExplorer用のスタイル。opacity=80 ←この数字部分を1~100に変化させることで、それがそのまま透過率(%)になってる。

下の行はNetscape用のスタイル。FireFoxはこっちになる。これは0~1.00の値の範囲で変化させる。

これらはたまたまネットで見つけた。運がよかった♪


あと、背景の固定。今回のスキンはスクロールさせても後ろの画像が動かないよね。これは以下の分を加えるだけ。

background-image: url(http://blog.ameba.jp/user_images/a5/6a/10008264974.jpg);
background-position: center top;
background-attachment:fixed;
background-repeat:repeat-y;
background-color: #EBF4E4;

今回のスキンの背景画像のCSS。赤字の部分が「背景画像-固定」っていうスタイル。こんだけ。簡単でしょ。

ちなみに、上の部分はbody{ }の中に置いてる。そうしないと単一記事表示にさせた時、今のまーさんとこのように、下部分が欠けた状態になってしまう。理由は指定領域の違い。

body{ }は「全て」を表す。「全て」だから、単一記事表示状態でもしっかり一番下まで画像で埋まってる。

だったらまーさんとこもそうしてあげたらいいじゃんってことになるけど、そうすると周りの赤い絨毯みたいな模様の画像が表示できなくなってしまう。実はあの絨毯みたいな模様もbody{ }の中に置かなくてはいけない。だから白とピンクの帯は仕方なくsubFrame{ }のとこに置いてたはず。

ひとつの指定領域(bodyやsubFrame)の中に背景画像は1つしか指定できない。それが今のアメブロのCSSの仕様。そうじゃないスキンもあるけど、それらは全てCSS編集不可になっている。おそらく指定領域の表記の仕方をいじってるんだと思うけど。

僕のCSSの勉強方法はサンプルがないと成り立たない。サンプルが見れない以上、それらを完璧に実現・習得はできない。残念だ。まぁ仕方ないんだけどね。真似て作るのはなかなか難しい。面白いけど♪
透過PNGに対応してないIEのためなんかにいちいち探すのめんどくさかったんだけど、次のスキンにはどうしても必要だったのでちょっと調べてみたらあっさり見つけてしまった。


そう、透過GIFの作り方♪


今使ってるお気に入りの画像処理ソフトには透過GIFを作る機能がついてなかった。透過PNGはあったけど。また新たに別の画像処理ソフトは使いたくなかったから「どしよー」って考えてたんだけど、ふとすごく簡単なことに気がついた。


要は透過PNGをそのまんまGIFに変換してやりゃいいんじゃんΣ(゜∀゜)イッツカンタン


というわけで、画像処理における最強フリーソフト「GIMP」を使ってGIFに変換することに。GIMPは前から持ってるすごい奴。製品として売ってるPhotoShop(10万弱)と同等の性能、とどこかで読んだことある。ほんとかどうかは知んないけど。

実際なんでもできる。すんごい多機能。そのせいで使いにくいから普段は使ってない(笑) 今使ってるのは「PictBear」っていうフリーソフト。シンプルですごく使いやすい。お気に入り♪

さて、これでまたひとつスキン作りの自由度が増した☆
背景にしばられないのはすんごく嬉しい(*'-')