人気ブログランキング | 話題のタグを見る
なげやり風味スキン変更方法
先日スキンを変更したところ、しるさんから方法を教えてとのレスを頂いたので
自己流でしかSiteを作った事が無いので間違えたり勘違いしてたりする場合もあるかもと
ビビリつつ、自分なりに説明をば。

Sealの事は書いて無いので興味の無い方はスルーでヨロシクー。
間違えているところがあったら指摘ヨロシクー。




ベースとしてGame.exciteのシールオンラインAを使用してますデス。

まず、最初にブログ設定からスキン変更を選択し、
「Game.excite」の編集を選び「スキン編集を始めます!」をクリック。
次に「シールオンラインA」を選択し「編集」をクリック。
とりあえず今日はCSS編集のみでやってみようという事で…。


(1)まずは壁紙を変えてみよう~。

「マイイメージアカウントにイメージ登録」をクリック。
イメージ追加にていつもブログにSSを載せている要領で壁紙にしたい画像をUP。
保存されたイメージリストからその壁紙にしたい画像を選択し、
イメージURLコピー。
■CSS編集の
BODY { BACKGROUND-IMAGE: URL(http://md.exblog.jp/skn/img/a/01/02/5/back_blue.gif); BACKGROUND-REPEAT : REPEAT; MARGIN : 0; PADDING : 0; }
のURL()内を先ほどのURLに変更(ペースト)。

(2)次にTOPの画像も変えてみよう!

まず、TOPにしたい画像を用意。
シールオンラインAに用意されてる画像が761×195pxなので
その大きさに合わせるのをオススメします。
そして先ほど壁紙をUPした要領で「マイイメージアカウント」に画像をUP。
■CSS編集の
DIV#TOP {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/02/5/seal2.jpg);
BACKGROUND-REPEAT : NO-REPEAT;
WIDTH : 761PX;
HEIGHT : 195PX;
PADDING-TOP : 1PX;
PADDING-BOTTOM : 20PX;
}
ここのBACKGROUND-IMAGE : URL();の()内に先ほどのURLに変更。

(3)枠線を変えてみよう!

壁紙とTOPの絵を変えたら枠線が青いままじゃ似合わない~と思った場合に。
(壁紙とブログのメイン部分との境目?の線の部分の変更です)
■CSS編集の
DIV#BODY {
BACKGROUND : #FFF;
WIDTH : 761PX;
BORDER-LEFT : 1PX #2C89FC SOLID;
BORDER-RIGHT : 1PX #2C89FC SOLID;
BORDER-BOTTOM : 1PX #2C89FC SOLID;
BORDER-TOP : 1PX #2C89FC SOLID;
TEXT-ALIGN : LEFT;
}
ここの部分のLEFT、RIGHT、BOTTOM、TOPそれぞれの色を変更してください。
色は「#2C89FC」の部分ですよー。
色のタグはここを参照して好きな色をどうぞー。

(4)プロフィールの背景を変えてみよう!

ブログ設定でのロゴ画像をUPしてある箇所の背景はここで指定されています。
■CSS編集の
DIV.PROFILE {
WIDTH : 160PX;
BACKGROUND-IMAGE: URL(http://md.exblog.jp/skn/img/a/01/02/5/seal2_profile.gif); BACKGROUND-REPEAT : NO-REPEAT;
LINE-HEIGHT : 150%;
OVERFLOW : HIDDEN;
}
シールオンラインAでは青のグラデーション画像なので、
青いのやだぁーと思う方はここのURL()内のURLを
壁紙、TOP絵を変更したときと同じ要領でマイイメージアカウントに画像をUPし、
そのURLを入れてください。
ちなみにベースになってる青いグラデーション画像は160×215pxなので
その大きさに合わせた画像にした方がいいですよー。

ちなみに私は背景はナシにしてます。
これが私の使っているタグです。
DIV.PROFILE {
MARGIN : 10PX 0PX;
LINE-HEIGHT : 140%;
TEXT-ALIGN : CENTER;
}
シンプルなのがいいって方は参考までに。

追記:背景を左のメニューと合わせて色をつけました。
現在はコレ。
DIV.PROFILE {
WIDTH : 160PX;
BACKGROUND : #F1F1F1;
LINE-HEIGHT : 150%;
OVERFLOW : HIDDEN;
}

(5)右のメニューの背景も変えてみよう!

メニューの背景とはシールオンラインAだと青のグラデーションになっていて
白の太文字でエキサイトブログ、最新のコメント、最新のトラックバックとか
書いてある場所の背景画像です。
これはココで指定されています。
■CSS編集の
DIV.MNTTL {
WIDTH : 150PX;
FONT-SIZE : 8PT;
FONT-FAMILY : VERDANA;
FONT-WEIGHT : BOLD;
PADDING : 5PX 7PX 1PX;
MARGIN : 20PX 0PX 10PX;
BACKGROUND-IMAGE: URL(http://md.exblog.jp/skn/img/a/01/02/5/seal2_mnttl.gif); BACKGROUND-REPEAT : NO-REPEAT;
COLOR : #FFFFFF;
}
ここにあるURLに今までと同様に画像をUPした後、
その画像のURLに変更してください。
ちなみに元に使われている画像の大きさは164×22pxです。
今までと同様、大きさは出来るだけ合わせてくださいねー。
UPした画像が白いものの場合、このままでは文字も白なので見辛くなるので
COLOR : #FFFFFF;
の部分の色を変更してください。
色については(3)を参照。

ちなみに私は画像をなくして背景に色をつけているだけにしています。
同じ様にしたい方は参考までに。
DIV.MNTTL {
BACKGROUND-COLOR : #F1F1F1;
MARGIN-TOP : 20PX;
WIDTH : 160PX;
MARGIN-BOTTOM : 10PX;
TEXT-ALIGN : CENTER;
}
BACKGROUND-COLORってのが文字の背景の色です。
文字の色も変えたい場合はこの中に
COLOR : #好きな色;
を挿入してください。

(6)お題の色を変えてみよう!

ブログを書いた時のタイトルの色の変更です。
■CSS編集の
DIV.POST_HEAD {
MARGIN-BOTTOM : 15PX;
PADDING-TOP : 15PX;
BORDER-TOP : 1PX #3333FF DASHED;
}
ここの部分で色が指定されていますので、
この色(#3333FFの部分)を自分の好きな色に変更してください。
色については先ほどと同じく(3)を参照ですよー。

私が使用しているのは以下の通りです。
DIV.POST_HEAD {
PADDING : 1PX 8PX 2PX;
MARGIN-BOTTOM : 20PX;
BACKGROUND : #989898;
LETTER-SPACING : 5PX;
FONT-FAMILY : VERDANA;
FONT-SIZE : 9PT;
COLOR : #FFFFFF;
}
BACKGROUND : #989898;が背景の色、COLOR : #FFFFFF;が文字の色です。
ここを自分の好きな色に変更してください。


これで満足だ!ってものが出来上がったら一番下の「保存」をクリックです。
保存すると編集したスキンが適用され、「マイスキン」に保存されます。
今日弄ったスキンからまた編集をした場合は「スキン変更」で
「マイスキン」を選択し、今日の日付のものを選択すれば再度編集できます。

大雑把だけどこんな感じかなー。
自信のない人は私が書いた場所以外は弄らない方が安全デス。
画像系は大きさを出来るだけ合わせる事をオススメします。
大きさが大幅に変わると大変な事になっちゃいます(笑)。
弄る前、弄ってる時にプレビューしてみて思い通りになった場合は
ちゃんと保存しておきましょう。
間違って変になっちゃった時に復活できます。


適当ですが、参考になれば…。
by monstercat | 2005-03-28 14:00 | スキン編集方法
<< イースター祭当選者発表! ついに手に入れたぞ! >>
当ホームページに記載されている会社名・製品名・システム名などは、
各社の登録商標、もしくは商標です。
©2003-2004 GRIGON Entertainment. Co., Ltd.
©2003-2004 YNK JAPAN Inc.
©2003-2004 KESPI Co., Ltd.