AX
ケロチナミン配合広報企画剤。副作用:ゲーム、漫画、料理、奇行、浦和レッズ
Top

お菓子作りと手芸とゲームと本とカエルとレッズをこよなく愛するアメリカ帰りの頭痛もち hosted by ケロヨン
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
Updates
レッズの優勝パレードの写真はこちらへ↓

浦和レッズ優勝パレード写真館(1)
浦和レッズ優勝パレード写真館(2)


プロフィール

NAME:ケロヨン(Keroyon)
JOB:調査・分析(Research & Analysis)
OFFICE:広告の企画制作(PR & Advertisement)
STATUS:肩こり(Shoulder pain)

★コメント、TB大歓迎!
でもTBの際は記事に当方のリンクを貼ってください!
↑スパム防止m(_ _)m★

鋼の錬金術師(Full Metal Alchemist)


リラックマ大好き同盟

◆浦和レッズ関連リンク集




栄養源:もち

今月のヒット:浦和レッズ天皇杯優勝!

◆応援しよう!浦和RED DIAMONDS!!(オフィシャルサイト)◆

編み物しよう!


犬と海と空の素材屋さん♪↓
KYOUNO湘南様

Linkのページもぜひ見てね!いろいろあるよ~!

Blog Links


Cちゃんのスタバ
彩りbasket
Living in the edge
エスボックのプランニング・ブティック
サラサレ日記 ~最近少し疲れ気味~
フォロー中のブログ
最新のトラックバック
浦和EAT 『TULLY..
from urawa stray s..
浦和レッズ初優勝
from 生活のキーワード
にんにく黒酢を飲み始めて..
from 黒酢で健康ダイエット!
サントラ三昧 「チャーリ..
from 山里のすみっこ::朽木針畑山..
リラックマとコリラックマ
from リラックマ
タグ:スキン編集 ( 9 ) タグの人気記事
byケロヨン
夏仕様!
スキン夏仕様にしました~


特大ショックは今まで使っていた忍者ツールズのアク解が使用不可になっていたこと・・・

今までのスキンを永遠に使い続けるか、あきらめるか・・・

なんだよう(つД`)泣

これはあれか?エキサイトで新たにはじめた「ネームカード」とかいうのを使えってか!?ああ使ってやるよ!!

・・・

で、スキンですが。

今度もまた新規スキンから作成。

上部に写真を固定しようとは最初から決めていた。白基調が良かったため、ぼかし(?)が入っててうまく白背景につながる写真を探す。探してみてわかったが海の写真はけっこう難しい。

で、見つけたのが今の写真。
KYOUNO湘南様ありがとうございました! m(_ _)m

☆背景固定、場所指定☆

この画像をどうするかというとアップロードの仕方(超初心者向け)を参考にアップ。そして

CSS画面の一番上あたりの

BODY{ background-image:url(ここに画像のURL); 

のあと、背景をリピートさせたくないので

background-repeat:no-repeat;

といれます。さらにスクロールしても左上に固定しておきたいので、固定のために

background-attachment:fixed;

といれるのだす。で、最後に画像の位置を指定します。これにはbackground-positionてのを使います。そして縦横の位置を%で指定します。

左上なら background-position: 0% 0%;
右上なら background-position: 100% 0%;
左下なら background-position: 0% 100%;
右下なら background-position: 100% 100%;
 
で、最後に}でとじる。

☆記事タイトルに絵を入れる☆

昔かおぶが作ってくれたドット絵をどこかで活用したかった。のでブログデビューさせることにした。上記の方法で画像をアップ。そんで上と同じ原理で

DIV.POST_TTL { background-image:url(ここにURL); background-repeat:no-repeat; background-position:2% 40%;

こんな感じに打ちました。positionが2% 40%になってるのは試行錯誤の末・・・余白のない画像だから0%にすると枠にぴったりくっついちゃうんだよね。で、ここまでやってプレビューすると気付くと思いますが画像と文字がかぶってます。これを解消するにはタイトルの文字の位置を指定します。これにはtext-indentを使います。

text-indent:20px;

こんな風にいれてみた。同じDIV.POST_TTL{ }の中ですよ!


☆本文の幅を変える☆

あと昔悩んだのを思い出したのですが、なんか本文の幅が狭い。変えたい。「各部分別横幅」みたいので指定しても変化ない。なぜだ、なぜなんだ、といじりまくってたら原因はCSSの

DIV.POST_BODY{ LINE-HEIGHT : 150%; WIDTH : 450PX; MARGIN-BOTTOM : 30PX; OVERFLOW : HIDDEN; }

にあると判明。

・・・WIDTH:450px・・・??

狭いわけだわ!
ここを600とかにすると今皆さんがご覧になってる幅になります。

いつものことですが間違いなど見つけましたらコメントいただけると幸いです!

ネームカードの設定めんどくさかった・・・orz
[PR]
byケロヨン by windupbird | 2006-07-24 13:09 | Skin編集
いつでもドコモダケ
会社のPCにいつでもドコモダケをインストールしてみた。

デスクトップに常駐して天気だのニュースだのを教えてくれるという。
計算機と天気予報がすく出せるのに惹かれ、即導入。

これは非常に悪い癖なので、マネしないほうがいいのだが、
私はデスクトップのカスタマイズが大好きだ。
壁紙やスクリーンセイバーはもちろん、フォルダ、起動音、デスクトップテーマにいたるまで全て変えてしまう。自作のときもあるがだいたいどこぞから拾ってきたものを使う。まあ部屋の模様替え感覚といったところか。しかもけっこう頻繁に変えてしまう。

かくして同僚達は私のPCを使おうとして困惑する。

b0005123_16412048.jpg

((;゚Д゚))ガクガクブルブル


今ちょうど壁紙をSan-Xのまめごまにしているのでこんなふうにレイアウトしてみた。

b0005123_16414097.jpg

原寸大

このドコモダケ、ときどき天気に合わせてお日様がでたり雲に乗っていたりするのが楽しい。スクリーンセイバーも梅雨時にピッタリなゆる~いかんじ。(最後にでっかいのが降臨してきて何かとおもった)

カスタマイズするのは自宅のPCだけにしといてくださいよ、とまた苦笑されそうだが、
PCは重要な「職場環境」の一つ。
私のささやかな楽しみは続く・・・

アイコンはいろんなところで無料で配布されてます。

アイコン格納庫 アイコン設定方法とかわかりやすくて◎デスクトップテーマも有
San-X (リラックマとか次の日ケロリとか)壁紙もたくさん。

b0005123_16414944.jpg

ハレの日

[PR]
byケロヨン by windupbird | 2006-06-29 16:49 | Skin編集
クリスマススキン For Christmas
告知が遅れましたが、クリスマス用のスキンにいたしました。
毎度のことながら、「できるだけ、軽く」をモットーにしてますが、なにぶんクリスマスですので多少ごちゃごちゃしててもいいかなーくらいの勢いで作りました。

変更事項に関しては今までとほぼ同様なので、背景の変え方、リンク色の変え方など参考にしたい方は以前の記事をお読みください。初心者バリバリですからたいしたこと書いてないっす。

で、一番苦労したのはこの背景の雪の結晶です(あっ、しょぼいとか言わないで)。実はフリーハンドで書きました。私はけっこうなアナログ人間なので、絵とかは手で描きたいタイプの人間なので。さらにマウスを使う習慣がないので、タッチパッド♪

しかし・・・雪の結晶って、どんなんだっけ?たしか全部六角形だったような・・・いろいろ種類があったような・・・とググっていたら、雪の結晶というサイトを発見。CGIをつかって雪の結晶を作ってみよう!というなんとも風変わりなサイトですが、製作画面にいきますと、温度だとか色だとかを指定して、自分だけの雪の結晶を作ってくれます。けっこう楽しいですよ~♪で、その画像をもとにしてペイントで結晶を描いてみたというわけです。

自分でスキン作ると、なんか愛着わきますね。色ちょっといじくるだけでも、「あたしの場所だッ!!」と思えます。「ねえ、一ヵ月後には、これ、変えないといけないんじゃないの?」とかそういう指摘はご遠慮ください。。

I changed the skin (of this HP) for Christmas season.

The hardest thing was to draw snowflakes. Since I am low-tech, I usually draw things freehand. Also, I do not use a mouse normally so I drew this with touch pad on my laptop.

The trouble was that I couldn't remember how snowflakes looked like. I remember they are all pentagon... but there were more than one shape that they could take... Then I found a website that uses CGI to create snowflakes. It's Japanese only site but it was pretty fun. You can change temperature and color and stuff to create your own snowflakes.

So I used the picture that I could get from the site and drew this pic.

I really like changing the skin because it makes me feel like this is MY site. Don't say that I have to change this skin again in a month...!!
[PR]
byケロヨン by windupbird | 2004-11-30 22:50 | Skin編集
素人スキン編集-リンク編
前回の失敗にもめげず、今度はリンクの色の変え方の紹介です~。

背景を変えたら、次に変えたくなるのは、文字とリンクの色。初期設定の色だとすっごく見にくくなったり、しますよね。また、リンク部分には下線を入れたりしたいということも。そんなときの、エキサイトブログにおける各部分のリンクの色の変え方をみてみましょー。

リンク=Link。CSS画面をみると、linkとかかれている文がいっぱいあると思います。どこがどのリンクなの??と混乱しがち。基本的には

a:link →通常のリンク
a:visited →アクセス済みのリンク
a:active →ロード中のリンク
a:hover →カーソルを重ねたときのリンク

ということです。たとえば、

a:link {color:#cc0000;}

にすると、リンクは赤になります。で、エキサイトのCSSには色指定のあとにTEXT-DECORATIONと書いてあるものが多いですね(全部確かめたわけではないけど)。これはその部分のテキスト(文字)にどういったデコレーションをつけるかを指定できるのです。種類は

none なし
underline 下線を表示
line-through 取り消し線を表示
overline 上付き線を表示
blink 文字を点滅

があります~。これでリンクの下に線をいれたりできるわけです!もちろん、リンク部分の背景だって変えられます。たとえば、カーソルを合わせたときだけ背景を黄色にしたい、と思った場合は・・・

a:hover {color:#cc0000; background-color:#ffff00;}

てなかんじで、font-sizeなども変更できます。

さて、ここからが問題。CSSのどの部分がどこのリンク?
まず一番上。BODY, BODY, TD, DIV, LIと続き・・・

A:LINK { COLOR: #0000FF; TEXT-DECORATION:NONE;}

ありましたね。これに続くA:VISITED, A:ACTIVE, A:HOVERはブログ全体のリンク設定となります。変わる部分はメニューのリンクとかです。

で、

DIV.HEADER A:LINK

から下のリンク設定は、ヘッダー、つまりブログのタイトルのリンク色設定です。ここで私がよくやる失敗が、せっかくヘッダーのフォントの色を設定したのに、リンク色を設定してしまうと、どちらかが優先になる。意味ねえ。混乱を避けたいときはバナーを作っちゃってからリンクを貼り付けてます。自分でやってみると、初心者は混乱の渦潮を楽しめるかと思います。

で、その下。

DIV.URL A:LINK

ヘッダーの下に自分のブログのアドレスが出ますよね。これはそのURL部分のリンクを指定するものです。

DIV.USERMENU
えーと、ユーザーメニューってありますよね、トップ、とか設定とか。うちのは英語表示ですが、これはその部分です。

ずーーーっとした。DIV.POST A:LINKってありますか?これ、ついてないスキンもあるんですよね。これがついてないと、本文記事内のリンク部分の設定ができません。たとえば私は微妙なこだわりがあるので、本文中のリンクには下線が入れたい。さすれば、

DIV.POST A:LINK {COLOR:#ff00ff; text-decoration:underline;}

とか入れてみる。さらにDIV.POST A:ACTIVE, DIV.POST A:VISITED, DIV.POST A:HOVERも同様に設定してみよう。ff00ffはピンクなので、リンクに下線がついて、ピンク色になるはず!ちなみにうちのは破線なんですが、これは安直に他のスキンからコピペしてきた、

BORDER-BOTTOM: 1PX DOTTED #99cc66

てのをカッコの中にいれてるだけです。最後の#は色指定ですね。考えるのめんどいし~コピペ(コピー&ペースト)。

主なリンク色はこれくらいだと思います。特に小難しいことは必要ないですね。あとの問題は、色のチョイスだと・・・
私が毎回スキンを変えるたびに、一番悩むのが実はこのリンク色。リンクなのだから、文字とは違う色で、それでいてリンクなんだぞう!とわかる色にしたい。でも蛍光とか、目が痛くなるのはイヤだ。見えにくいのも困る。できたらアクセス済みのときの色も変えたい。カーソルがあったときの色も違うとわかりやすい・・・

(ノ△T。)メ~ソメソメソ エグッ

終わりなき色彩の世界。ああ、ただでさえ色のセンスは悪いのに、なぜ私がこんな目に・・・指定の背景に合わせて色を自動検索するソフトとかないんだろうか・・・アギャン。

個人的なことを言いますと、色がうざい、目に非常にやさしくないサイトにはあまり行かなくなります。なんていうか、やっぱり疲れるのです。重いサイト、音が出るサイトもやぱり苦手ですが。昔はえーリンクの色―?そんなんに時間かけるなんておかしいんじゃないの?なんて思っていましたが、自分で運営するようになってからそれはもう咆哮しております。よかったら参考にしてくださいアーンド情報交換してくだせえ。

また間違いありましたらどうぞコメントオネガイします!!今かなりいっぱいいっぱいなので、間違いがなかったら本人ビックリです!(ダメじゃん)
[PR]
byケロヨン by windupbird | 2004-11-05 18:57 | Skin編集
素人スキン編集-文字、フォント(前編)
以前紹介するといったまま頓挫していた、スキン編集においての文字のさまざま、を紹介します。(スキン関係でTBしていただいたのに気をよくした♪)

背景はいいけど、文字の色、リンクの色が気に食わない、文字を太字にしたい!とは思いつつも、CSSのどこをいじったらどの文字かかわるのかわからない、そんな人のためのスキン編集法です。

文字=フォント、つまりCSS画面では文字の種類や色を変えるコマンドはFONTではじまることが多いです。
FONT : X-LARGE/100%
とか書いてある部分があると思います。

文字の大きさはxx-small, x-small, small, medium, large, x-large, xx-largeの順番で少しずつ大きくなります。
ポイント単位で大きさを変えたい場合は

FONT: 22pt/100% (またはfont-size: 22pt/100%)

などといれてみましょう。
うしろの100%というのは「22ptの文字が何パーセントの大きさで表示されるのか」という指定です。(trickycatさんから、これは「行間指定です」というご指摘がありました!)

また、太字で表示したいときは
FONT: bold (またはfont-weight: bold)

を入れます。色を変えたいときは

COLOR: #000000(6数字で表示される色指定。えーそんなの知らないという人はMariのいろえんぴつなどを参考にしてはいかがでしょうか?)

を使います。Courier New, TAHOMAなどはフォントの種類なのですが、見る人のブラウザや設定によって見れるフォントは異なるため、一番一般的なCourier Newなどの初期設定を使いましょう。タイトルなどで特殊な文字を使いたい場合は、バナーを作りましょう。

ヘッダー(ブログのタイトル)の文字は

DIV.HEADER { }

のカッコの中を変更しますが、その前にHTML画面を見てください。
<DIV CLASS=HEADER><$header$></DIV>
の部分ですが、この<$header$>を消して、自分のブログのタイトルを普通にタイプしていれてからやってください。たとえば
<DIV CLASS=HEADER>頭痛にケロヨン</DIV>
のようにします。それからCSS画面

DIV.HEADER {FONT: bold xx-large/100% Courier New, TAHOMA; COLOR:#0077ff;}

といれてみてください。色とか大きさとかかわりましたか?

同様に
DIV.POST_TTL→記事のタイトル
DIV.POST_BODY→記事の本文
DIV.MNTTL→メモ帳タイトル
DIV.MEMOBODY→メモ帳本文

それぞれの後に続くカッコの中でフォント、色指定ができます。本文、メモ部分でのサイズや色変更はfont-size, font-weight, font-colorって書いたほうがうまくいきます。

記事の文字色を青、太字、Mサイズにしてみよう。

DIV.POST_BODY { font-color:#0077ff; font-size: medium; font-weight: bold;(その他いろいろ書いてあるのはそのまま)}

どうでしょう?セミコロン(;)やコロン(:)のつけ忘れに注意してください。

ブログの配色はこりだすと大変なことになりますが、自分らしいページを作る第一歩、というかんじがします。見やすくもかわいい色、目立つ色など、配色を組み合わせで楽しみましょう!

スキン編集は根気と忍耐。「ここにこれを入れたらどうなるかな?」なゲーム感覚で、こまめにバックアップをとりつつ、いろいろためしつつ解決策を見つけます。初心者どうし、みんなでがんばりましょー!また「おい、ここ間違ってるよ」という発見がありましたらぜひ報告ください!タグなどはエキサイトのものですので、他のブログの人は違う表示になるのだと思います~。

次はリンクの色の変え方と下線のひきかたを紹介する予定ですー。しんどいぞー。

Another article about HTML, CSS editing. This is for excite blog only so I don't know if they will work in other websettings. I am still learning how to design this blog and it sure is fun!
[PR]
byケロヨン by windupbird | 2004-11-04 14:43 | Skin編集
Fall Skin Renewal
11月なのにスキンがハロウィン!の恐怖な事態を避けるため、急ピッチで新スキン製作を進めてまいりました。結婚式にも負けず、なんとか完成しましたよ。しょぼいけど。

バックは単なる紫のグラデーションです。どんなペイントの機能でできます。いろいろ考えたのですが、前回のスキンがにぎやかだったので、次はシンプルでもいいかな、と。

さらにバナーを作ってみた。もとは普通の写真だったのですが、保存形式を間違えたら見事なシルエット写真になり、あまりにもいい雰囲気だからそのまま採用。これもペイント。

画面がシンプルなだけに、テキスト部分をにぎやかにする、コメント欄にイラストをいれる、などいろいろ考えたのですが・・・エキサイトブロガーの皆さん、最近、やたらと重くなるときがありませんか??意味もなくページの表示に時間がかかる。

なのでごちゃごちゃつけるのはとりあえずはやめました。どーせ次ので爆発しそうだし。

ロゴ画像は口をあんぐりあけて時を刻む私のカエルクロック。ミシガンではお世話になりました。友人からいただいたものなのだが、これを見て私を連想したのだろうか・・・?

なにも新しい情報がないのもしょぼいので、お役立ちツール&サイトを紹介します。まずは

AOK COLOR PICKER:いろいろなところの色情報を得ることのできるツールです。自分で作ったバナーに背景の色を合わせたい、別ページで見た色を使いたい、そんなときに便利なツールです。Cちゃんのスタバのかおぶに教えてもらいました♪

とんとん工房:今回は利用しませんでしたが、かわいい猫アイコンや素材がいっぱい~!ソフトな色合いが最高です。

ちなみにうちのカウンターですが、ご存知の方もたくさんいらっしゃると思いますが、Wanzネットさまよりいただいております。ネット超ド級初心者だった私でも設置できた、なんともカンタンなアクセスカウンター。画像が選べます。変える理由もないのでずっとお世話になっております。


I did another renewal to avoid having Halloween skin in Nov. I hurried up the process since I had wedding to attend and all, and finally I finished it last night.

The background is a simple gradation of purple. You can do this with paint tool.

Also, I made a banner. Originally, this is a colored picture but I chose a wrong format to save and it turned out like that. I thought it was quite funny so I decided to keep it. This was also done by paint tool.

I thought about adding more icons in text box or comment box because the skin itself is quite simple, but I decided not to. Recently, excite blogs are kind of heavy... I have no idea why by sometimes it takes a long time to open a page... I don't want my page to take 10 minutes to show up.

Logo picture is my Frog Clock, my favorite clock. My friend gave it to me but I wonder if she thought about my face when she saw this frog...
[PR]
byケロヨン by windupbird | 2004-11-01 13:18 | Skin編集
素人スキン編集 Skin editing
前回のスキンリニューアルの時も記事を書きましたが、今回のリニューアルに関しても皆様の参考までに具体的な編集方法を書いておきます♪

テーマ:縦長のパターンを、横方向にリピートしたい。さらに、スクロールダウンしても背景が動かないようにしたい。

↓完成スキン
b0005123_1501853.jpg


今回使用したツール

1.通常のペイント (背景画を作成。普通にマウスっていうかタッチパッドで描いた)
2.拡張子変換ツール (Defaultのペイントツールではgif保存ができなかったので、bmpからgifに変換するツールをvectorからいただきました)

あと必要なのは~根気と~アイデア?

背景の替え方は以前の記事で紹介しましたが、今回は絵なので、何回も縦リピートされると、うざい。だから固定しました。

まず前回と同様、マイアイメージアカウントに好きな絵を登録して、そのurlをコピーします。その後CSS画面のいちばん上のほうの

BODY { background-image: url(ココにhttpではじまるurlをペースト!); }

で、プレビューで確認してみてください。アップした画像が背景になっている、はず。さらに、縦リピートをしないで~スクロールしても画像は固定しといて~と頼みたい場合は、

BODY {background-image: url(http ); background-repeat: repeat-x; background-attachment: fixed;}

となるわけです。repeat-xは細長画像の横リピート、repeat-yは縦リピート。今回は縦長の画像を作ったのでrepeat-xです。background-attachment: fixedが背景画像を固定するコマンドです。

すごい自己流なのでこれから下はかなり読み流してもらいたいのですが、この背景画像、まず150 pixel(横)×800 pixel(縦)のスペースに適当に絵を描きました。それはもう適当に。それをbmpファイルで保存。エキサイトにアップできる画像は拡張子がjpg (jpeg)かgifに限られているので、どっちかにしないといけないんだけど、私のPCで作成できるのはjpgだけ。しかし!

JPGファイルは写真には快適ですが、イラストには向かない

というかなり致命的な欠陥があり、泣きをみていた私に友人かおぶが教えてくれた便利ソフトが「G・こんばーちゃ」このvectorのサイトからダウンロード可!これは画像などの拡張子を好きなものに変えてくれるので、ファイル→開く で画像を開き、変えたい拡張子を選ぶだけ!これでイラストをbmpからgifに変換♪めでたしめでたし。

(*拡張子はファイルの最後についてる数文字のアルファベットのこと。ワードだったら.docとか.textとかになってますよね。画像だとだいたい.bmp .jpg .gifが主なんです。)

(注:800ピクセルだと大きな画面ではきっちり表示されません。この回では下部分が黒の画像だったので、あらかじめ背景を黒にしてから画像をアップしました。そうすれば余白はできません。)

背景を変えた後一番悩むのは文字色・・・文字色の変え方は長くなるので次回に。スキン編集ビギナーの皆さん、一緒にがんばろー!

補足:上記のCSSは全角も混じってますのでコピー&ペーストでは使わないでね。あとかおぶからすばらしい指摘があるのでコメントもぜひみてね~。

This is another skin editing decsription. Sorry to bore you... here is another pic for you.

b0005123_2251545.jpg

[PR]
byケロヨン by windupbird | 2004-10-01 22:04 | Skin編集
スキン編集 パート2 And a joke for you
前回力つきて中途半端に終わったスキン編集の記事の続きです~。前回は背景の変え方と記事の囲み方を紹介しましたが、今回は

「記事のタイトルを囲む」

実はこれ、妙に苦労したんです。だって、「新しいスキン作製」ではじめたとき、タイトルがHTMLのほうでちゃんと定義されてなかったんだもーん。

まず、HTML(編集画面の上のほう)に注目。
「本文」と書かれた部分をクリックすると
<DIV CLASS=POST>ではじまるタグが出てきます。なぜ私が苦労したかというと、記事のタイトルは
<DIV CLASS=POST_TTL>で提議されているべきなのに、「新しいスキン」にはこのタグが書いてない!!なんて不親切設計!
なので、<$postsubject$>の前に加えちゃいました。つまり
….
<TR><TD WIDTH=80%><DIV CLASS=POST_TTL><$postsubject$></DIV></TD> 
(注:表示のため全角でカッコつけてるのでこれをコピーしても使えません!全部半角でね!)

こんなふうになります。こうしないと記事のタイトル部分をいじれません。他のエキサイトスキンでは定義されてると思う。とにかくこれを確認してからCSS画面へGO!

DIV.POST_TTLという部分を探してください。上から3分の1くらいのところにあります。この{ }の中にいろいろいれるわけです。色とかバックの色とか。たとえば黒いバックに白い文字で太字にしたいとすれば

DIV.POST_TTL { font-weight: bold; color:#ffffff; background-color:#000000}

となります。#のあとは色番号(詳しくは前回の記事を読んで)。従来のCSS画面では FONT: BOLDって書いてあったけどなんかまったく反応しないのでぶちきれてこの形にしたらうまくいった。 で、このままだとバックが文字とせますぎるので余白(余黒?)を定義。

DIV.POST_TTL {font-weight:bold; color:#ffffff; background-color:#000000; padding:4px}

これを枠で囲みたい場合はborder-styleで枠を選ぶ。やりかたは前回の記事に。
裏技もまともな知識もない私ですがこれくらいはできました。最初はちょっと変えてプレビューで見ながらどのコマンドがどこに影響してるのか手作業で確かめたり。皆さんと情報交換できたらよかったけどこっちのレベルが低すぎて卑屈になってしまいそうだったから自分でやってみた。でもやっぱ情報交換できたらいいな~。こんなことできますよ!ってあったらぜひコメントください~♪

言い遅れたけどCちゃんのスタバの部屋主かおぶには今回世話になった。これからもよろしく。

For English readers;

Again, this is an article about HTML and CSS design. Basically, I introduced how to define article titles and change the background for each titles. I don’t think it means anything to non-excite blog users… so this is something extra for you.

Notice something…?
b0005123_186149.jpg

[PR]
byケロヨン by windupbird | 2004-09-10 18:11 | Skin編集
RENEWAL!!
念願のマイスキンりにゅーある~!

↓新作スキン!
b0005123_15295.jpg

開始前の「見やすいページになればいいや・・・」というダメっぽい目標から想像もつかないほど手を入れてしまいました。変更項目は

1.背景、リンク色の変化+ヘッダーを装飾
2.記事部分は枠で囲い別色にする
3.記事のタイトルを色で囲む
4.メニューを左側にもってくる

数ヶ月前は「HTML?CSS??なにそれ、うまいの?」と言っていた私が所有している知識はわずか。限られた知識と資源(?)で行うHTML&CSSデザインを紹介しま~す。(たいしたもんじゃないよ)

テーマは「重くない、でも見やすい」ですので、画像は極力使いません。

まず背景の色はCSSの

BODY { background:#ffffff}

のffffffを別の値に変えることで変わります。ffffffは白、黒ならば000000です。色見本はMariのいろえんぴつ様とCSSとはなんだろうかを参考にしました。ちなみに前者にはリンクすれば使用OKの素材もありますし、後者はちょっとハードなCSSの解説集。便利ですよ。

で、私のこのチェックの壁紙はリンク不要フリー素材屋MOVE様からいただきました!バックにこういった素材を使う場合どうすればいいかというと、

1.スキン編集画面を開く
2.マイイメージアカウントにイメージ登録
3.イメージ追加→参照→画像を選ぶ
4.送信
5.保存されたイメージリストに今送信したファイルがあるのを確認。イメージURLをコピー。
6.CSS編集画面に行き、

BODY { background-image:url(http:// ココにアドレスを入れる)}

簡単!!

さらに本文を別の色にして枠で囲むには

DIV.POST {}

ココ!この部分を

DIV.POST { background-color:#ffffff; border-style:outset; padding:10px}

にすると、バックは白くなり、今の私のページと同じようなちょっと飛び出た枠がつきます!(
このページの本文バックはベージュですが)paddingは余白部分の大きさの指定。

枠は今"outset"という枠の種類ですが他にもsolid, dotted, dashedなどいろいろあって、上記の「CSSとはなんだろうか」に乗っています。

思ったより説明って難しいですね~。書ききれなかった文はつけたすかもしれないです。質問、修正、突っ込みなどございましたらコメントください。今力つきかけてるので間違いが見つかるかも・・・(汗)

Sorry guys, this article is about how I designed new skin for my weblog. I could go on about HTML and CSS that I used for this, but most of the tags are unique to this Excite blog so it will be meaningless to people who are not using excite blog Japanese version...

Anyway, I am learning about HTML and CSS. It is quite fun to design my own page, even if it's just a blog!!
[PR]
byケロヨン by windupbird | 2004-09-08 22:01 | Skin編集