二姐師匠のきゅるるスキン教室

二姐師匠のきゅるるスキン教室

きゅるるスキンと戯れてみよう！

・2004.12
・2004.10
・2004.09
・2004.08

azumi
chixi
kako
ringokoron
shelly
toshii
twochan

<< カコ

きゅるるスキンを解析せよ！レイアウト編

2004/12/09

reflection (タイプ 2)をもとにやっています。

さて、今回は、メニューの右と左の入れ替えをやってみたいと思います。
とっても簡単。

#contents {
margin-right: 10px;
float: right;
width: 500px;
}

この節を探してください。
#contentsというのは、日記の表示をつかさどってるスタイルです。
コレです。
float: right;
を、leftに変えましょう。
float: left;

はい、終わりです。（えぇぇぇぇ）

まーこの3つの章（コレを含め前2つ）は、スタイルシートに慣れてもらうための練習です。

実は、他にも自由に新しいスタイルを自分で名前を決めて作ったりも出来ます。

最近登録していただいた、PLASTICのsmokepinkは、
.panel_profile { background: url(/user/skin/79/profile.png) no-repeat;
width: 170px;
height: 29px
}と、あの透明感のある画像がはまるように、新しいスタイルを作って埋めています。

<%description%>

こんな風に。。。
profileのパネルのしたに、プロフィールの記述が来るようになっています。

日記のほうの角が丸くなってるのも丸みのある画像を上と下にかぶせています。

.content_top { background: url(/user/skin/79/content_top.png) no-repeat;
width: 500px;
height: 5px;
}

.content_bottom { background: url(/user/skin/79/content_bottom.png) no-repeat;
width: 500px;
height: 15px;
margin: -5px 0px 0px 0px;
}

これを、

<%articles(10, photo)%>

こんな風に使ってます。

あとは、あれです、発想ですな。。。。

両サイドメニューにしたり、、、

う、う、うう。
自分の陳腐な発想では、1個しか浮かびませんが(=_=;)
みなさんは、もっと浮かぶと思います。

なんか、おもしろくて使いやすいレイアウトねぇかなぁ。
と、考えながら寝ます。

おやすみなさい。

Post: 2004/12/17 02:43 by toshii | コメント(0)

きゅるるスキンを解析せよ！サブタイトル編

2004/12/08

タイプ２スキンの代表Reflectionでやってます。

Profile、New!、Theme、Ring、Archivesの見た目を変えましょう。
サブタイトルの見た目をつかさどっているのは、h2!

H2 {
font-family: "Verdana", "Arial", sans-serif;
width: 100%;
color : #FFFFFF;
background-color: #70C1CF;
border: 1px solid #FFFFFF;
padding: 3px;
font-size: small;
margin-bottom: 5px;
}

これです。

font-family　は、フォントの名前です。これは、各パソコンが持っているフォントを使用いていますので、みんながもってるフォントでないといけません。
代表的なのが
英語では、
Arial、Impact、Helvetica、Verdana、sans-serif、などです。
日本語では、
MS UI Gothic、ＭＳＰゴシック、ＭＳＰ明朝、細明朝体、Osaka、などです。
color は、フォントの色です。
設定では、#FFFFFF、となっていますが、これは、左から2個ずつで、赤、緑、青の順番での光の強さを表します。
00が最小で、FFが最大です。
全部FFにすると、全部全開で白になります。全部00にすると全部全閉で黒になります。
これはホームページのどこでも使うので、覚えておいて損はないです。

background-color は、サブタイトルのボックスの背景の色です。
デフォルトはエメラルド色ですね。

border は、枠の線を示しています。solidは実線という意味です。
設定では、1ピクセル、白、実線、となっています。

他にも、

none（無し、他要素優先）［規定値］
hidden（無し、自要素優先）
solid（一重線）
double（二重線）
groove（立体凹線）
ridge（立体凸線）
inset（全体を立体凹表示）
outset（全体を立体凸表示）
dashed（破線）
dotted（点線）

これだけ線の種類があります。

padding は、サブタイトルのボックスの内側の余白を示しています。
3pxと、１つ書けば、上下左右3ピクセルの余白が取られます。
5px 3px 5px 3px、と４つ書けば、上、右、下、左の順番で、余白が取られます。

あとは、
margin という設定がありますが、
これは、サブタイトルのボックスそのものの位置を変えます。
paddingと同様

margin : 0px 0px 0px 0px;

のように、使えます。

あとは、
サブタイトルの名前自体も変えられます。
下の方にある

*Profile

*New!

*Theme

*Ring

*Archives

です。これを日本語に変えたりもできます。

Post: 2004/12/15 16:58 by toshii | コメント(0)

きゅるるスキンを解析せよ！タイトル編

2004/12/07

きゅるるスキン(タイプ2)のタイトルの変更をいってみたいと思います。

いきなし、ところどころの変更をしようとすると、頭が混乱するので、ちょっとずつ変更していければいいなと思います。

reflection (タイプ 2) スキンを拝借してやっていきます。

スキンの変更でreflection (タイプ 2) を選択します。

＋テンプレートの編集、を選択すると、謎の言語が出てきます。
この部分を見つけてください。

#header {
background-image: url(/user/skin/67/top1.jpg);
width: 700px;
height: 130px;
margin-bottom: 10px;
}

/user/skin/67/top1.jpg
これが、あのハイソな家具の写真です。

自分でホームページ領域をもってる方は、それを利用して、この画像を外部から呼出し、張り替えることが出来ます。

画像のサイズは自由に変更可能ですが、せっかく、700px * 130pxという規定があるので、そのサイズで好きなように作ってみましょう。
画像編集はウィンドウズに付属している、ペイントなんかでも編集可能です。
変形＞キャンバスの色とサイズ、を選ぶと、画像の大きさを設定することが出来ます。
pxというのは、ピクセルのことです。

画像を作って、アップロードしたら、
/user/skin/67/top1.jpg
の部分を張り替えます。

例えばniftyの方でしたら、
http://homepage2.nifty.com/~*****/gazou.jpg

gazou.jpgのところは、自分でつけた名前にします。
どんな名前をつけても、一致していればOKです。

#header {
background-image: url(http://homepage2.nifty.com/~*****/gazou.jpg);
width: 700px;
height: 130px;
margin-bottom: 10px;
}

スタイルシートは、基本的に
[ プロパティの名前 ][ : (コロン) ][ 設定 ][ ; (セミコロン・閉じ)]

という、順番で構成されています。
詳しく設定したいかたは、サイバーガーデンのリファレンスが詳しいので、ご覧ください。
CYBER@GARDEN CSS辞典

日記の名前の要素は、これになります。

.diary_name {
text-align: left;
color: <%color_diary_name%>;
font-size: large;
font-weight: bold;
padding: 80px 15px 0px 350px;
}

paddingや、marginを使うことで、
好きな位置に配置することが可能です。
80px 15px 0px 350pxについては、
上、右、下、左、の順番です。
marginも同じ順番です。

font-sizeも
smallとか、12pxとか好きな大きさにすることが出来ます。

color: <%color_diary_name%>;
の、ところは、日記帳の設定の色設定なので、
好きな色に変えてしまうことも出来ます。
配色に関してはココが勉強になります。

Post: 2004/12/10 18:20 by toshii | コメント(0)

スキン作成～ネタ明かし～

2004/10/03

出来上がったスキン。
TOP画像に使ったお靴の画像とネックレスの画像

お靴の画像は
ちょっと前の日記に載せたロッシ様のパーティー靴。

そしてネックレスの画像は
本日の写真。
マイコレクションを三つ並べて撮ってみた。

どうやら背景が白っぽいもので
明度レベルをいじるとあぁいうモノクロイラストの様になるらしい。。
っということで布団の上で撮影(笑)

あっ、そうだ。
私はジャラジャラした女ですヾ(´ε｀*)ゝ

ちなみに
一番外枠の白と茶系の天然石のネックレスは
wendy minkというアメリカのジュエリーデザイナーさんのもの。

内側の黒の大小の数珠っぽいのは
パリで活躍する日本人のジュエリーデザイナー
ヨシコ☆クリエーションのもの。
今月号の装苑で彼女の特集が組んでありました。

そして右に垂れ下がるのが
今や東京発のブランドでは群を抜く勢いで人気の
TOGAのアクセ。
たまたまお店に入ったら目に付いて
店員さんに
「今日入ってきたんですよ！TOGAのアクセは１日2日ですぐ完売しちゃう
んです。今日来られてラッキーですよ♪」
との言葉に押されて即買いしたもの。(←また。。。)
勿論気に入ってるので文句無し(笑)

話はだいぶ反れたが
この布団の上で撮影したものが
あんな面白い画像になるとは
こりゃ～はまりそう(^m^)

写真付き日記から
イラスト日記になるのも
そう遠くはない！？
なんちって|ﾍ(´ω`)ゞ

Post: 2004/10/04 00:46 by chixi | コメント(2)

出来た～スキン完成♪

2004/10/02

悩みに悩んだpage top (スキンの一番上の欄)

今日はゆっくり絵を描いてみるぞ～！
と意気込んだのものの
どう頑張っても美術３だった私には才能がない｡･ﾟ･(ﾉε`)･ﾟ･｡

とりあえず、写真を貼ってみようか。。
と、マイピクチャを開いた。
自分の写真を右クイックしてみたら
‘画像編集ツールで開く’ってあるのを発見！(今頃・・・)

マイコレクションをあれよあれよと編集し
ペタペタ貼ったら

「いい感じじゃなぁ～い

」

このTOPが出来るとイメージもどんどん沸いてくるもので
今まで出来てたとこも変更！変更！

出来上がり～v(￣ｰ￣)v

昔から、母親に
「もうちょっと若々しい色を選びなさい」と怒られてた私(･Θ･;)
いかにもわたしっぽいのが出来た(笑)

次はかわいい感じのを作りますヮ♪
母様(￣ー￣；ノ~~

Post: 2004/10/02 22:33 by chixi | コメント(2)

スキン作成　二日目

2004/09/29

なんだかんだ言いながら
順調にいってる♪

が、ブラウザチェックだけはうまく(?)いかず、
まぁ　kyururuフォルダの中の base html　を開けば見れるし
いいかぁ～！とこの件は放置して進めている(いいののかしら・・・？)

残すところあと　page top　の作成のみ

行き詰る・・・・・・・(￣￣；)

絵を描いてみるが、マウスでの絵描きに慣れず
思ったように書けないし(涙)

文字を入れてみたが
なんだかしっくりこない。。。

写真を貼ろうと自分のアルバムを振り返るが
絵になるようなものがない。。。

ひらめくまで　気長に頑張りま～すヾ(*'-'*)

Post: 2004/10/01 00:02 by chixi | コメント(0)

スキン作成

2004/09/28

この夏、スキン教室が開催されてたのは
もちろん知ってたが、
「私にはまだまだ。。。。」
なんて思ってた。

が

今日、急に作ってみたくなり
早速、作成中

勿論、二姐さんの教室を参考(お世話になってます！)に
順序よく取り掛かる。
ほんと知らないことばかり・・・汗

まず、
「解凍ってなんやねん」
から始めております(笑)

新しいフォルダの作り方もわからず
色々いじって、調べてやっとできたわぁ。。。

ところがどっこい

二姐先生のレッスンの(五)まで行き
お引越しもすんだのに
「D:\kyururu\base.html」
で見れない。。。。
なぜだぁ<(ﾟﾛﾟ;)>

何がおかしいのかしら？？

今日はとりあえずつまずいたので終了～

明日また原因追求に努めるぞ！

※画像は[フォルダ]kyururu→baseHTML　Documentで開いたもの。
二月もちゃんと作ってるのになぜ出ない。。。

おまけに数字列がガタガタ。。。く("0")>
前途多難だわ。。。

Post: 2004/09/29 01:08 by chixi | コメント(8)

<< カコ


	www.kyururu.com/	designed by 二姐