デュッセルタルの犬猫達
dusseltal.exblog.jp
Top
カテゴリ:スキン編集( 8 )
|
|
2004年 10月 31日 |
メモ帳を増設して、自己紹介などのページを、サイドメニューに作る方法。

HTML部分、
<DIV CLASS=MN><$menuleft$></DIV>
   又は
<$calendar type=1$>
のどちらかを探し、このどちらかの下に、以下を追記する。
点線は不要です。
----------------------------
<DIV CLASS=MN>
<DIV CLASS=MNTTL>好きな題名</DIV>
<DIV CLASS="body">
あいうえおあいうえおあいうおえお。
</DIV>
</DIV>
----------------------------
<と、>は全角で書いているので、半角で打ち込んで下さい。

CSS部分、のどこでもいいので、以下を追記する。
----------------------------
.body{
WIDTH : 145PX;
HEIGHT : 200PX;
COLOR : #FFFFFF;
OVERFLOW : AUTO;
BACKGROUND-COLOR : #000000;
}
----------------------------
WIDTHは、横幅。HEIGHTは高さ。COLORは文字色、BACK~は背景色。
自分の好みで変更する。
[PR]
2004年 10月 30日 |
スクロールバーの色変更方法。
設定→スキン編集→現在使用中のスキン。

下段のCSSの最初の方。BODYの前に以下のソースを埋め込みます。

*{
scrollbar-3d-light-color:#E6EED6;
scrollbar-arrow-color:#C0C0C0;
scrollbar-base-color:#E6EED6;
scrollbar-darkshadow-color:#E6EED6;
scrollbar-shadow-color:#C0C0C0;
scrollbar-highlight-color:#f5f5f5;
scrollbar-face-color:#E6EED6;
scrollbar-track-color:#E6EED6;
}

スクロールバーの指定方法は、スクロールバーを参考に。
#XXXXXX と言う、#から始まる色指定の一覧はカラーチャートを参考に。
プレビューで確認して、OKなら保存を押す。
[PR]
2004年 10月 29日 |
メイン画面の(記事が出てる画面)の隣にあるサイドメニュー。
「最近のコメント」などが、縦にズラズラと出て見づらくなりますよね??
そう言う時は、縦の枠を固定して、最近のコメントなどが、ズラズラ出ないように
スクロールバーをつけます。

設定→スキン変更→現在使用中のスキン編集

下段CSSの中、1番下でOKなので、以下のソースを埋め込みます。

DIV.MNBODY{
WIDTH:170PX;
HEIGHT:130PX;
OVERFLOW:AUTO;
OVERFLOW-X:HIDDEN;
OVERFLOW-Y:AUTO;
LINE-HEIGHT:130%;
}
DIV.MNBODY A {LINE-HEIGHT:130%;}
DIV.MNBODY TD{LINE-HEIGHT:130%;HEIGHT:0PX;}

この中の
WIDTH:170PX;  これは、横幅です
HEIGHT:130PX; これは、高さです
それぞれのスキンによって、縦横の幅が違うので、プレビューで確認しながら適当な
数字に変更して下さい。
LINE-HEIGHT:130%; これは、行間の指定です。
[PR]
2004年 10月 28日 |
文字色の指定、サイズの指定、フォントの種類の指定を一括でします。

設定→スキン変更→現在使用中のスキンの編集をクリック。
下にあるCSS。BDOYの数行下付近に

BODY,TD,DIV,LI {
FONT-SIZE : 13px;
FONT-FAMILY : MS UI Gothic;
LINE-HEIGHT : 150%;
COLOR : #808080;
}

こういうのがあります。
FONT-SIZE : 13px;  は、文字のサイズ
FONT-FAMILY : MS UI Gothic;  は、フォントの種類指定
LINE-HEIGHT : 150%;  は、行の間隔の指定
COLOR : #808080;  は、文字色の指定

プレビューで確認しながら指定してください。
フォントの種類は、あまり珍しいフォントを選ばないように。PCによっては見えないフォント
もあります。
代表的なのは、「MS 明朝」「MS ゴシック」「MS Pゴシック」「MS UI Gothic」です。
文字色(#~から始まる6桁の英数字)は、カラーチャートを参考に。
[PR]
2004年 10月 27日 |
コメントを記入する投稿欄を広くする方法。

設定→スキン変更→現在使用中のスキンの編集をクリック。

下段CSSの中に以下のソースを埋め込む

TEXTAREA.TXTFLD {height:10em;}

この中のheight:10em; は、投稿欄の縦幅です。
[PR]
2004年 10月 26日 |
リンクされてる文字にカーソルがオンマウスになった時の状況設定です。

設定→スキンの変更→現在使用中のスキンの編集をクリック。

下段CSSを見ると、そこらじゅうに下記に似たソースがあります。
たぶん5箇所ほど。

A:LINK { COLOR: #7ccd7c; TEXT-DECORATION: NONE; }
A:VISITED { COLOR: #7ccd7c; TEXT-DECORATION: NONE; }
A:ACTIVE { COLOR: #7ccd7c; TEXT-DECORATION: NONE; }
A:HOVER { COLOR: #FFFFFF; background:#99CC99 }

この中の、A:HOVER{ COLOR: #FFFFFF; background:#99CC99 } が、オンマウスに
なったときの変化を指定してる部分です。
上記をコピペして埋め込まないように!!!
DIV.HEADER
DIV.URL
DIV.USERMENU
DIV.POST_BODY
など、それぞれ指定ができます。
オンマウス効果を参考に。
[PR]
2004年 10月 25日 |
excite-Blogには、様々なスキンが用意されています。
中でもテーブルなどにgif画像を使用している綺麗なスキンもありますが、gif画像を使用して
いるスキンは、どうしても呼び出しの時に時間がかかってしまいます。

お洒落なデザインのスキンなんだけど、やっぱりサクサク画面表示して欲しい。
また、記事に文章以外にjpg画像を多く利用しているBlog。
こういう人は、スキンをシンプルな物にすると良いでしょう。
自分のBlogスキンに、画像が使われてるかわからなーい!って人は、
設定→スキン変更→現在使用中のスキンで、編集を押しCSSの部分を見てください。
あちこちに

○×△□-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/02/0/sh_l_1.gif);

なーんてURL表示があるスキンは、テーブルに無数のgif画像を使っているスキンです。
単体では軽いgifですが、これが集合して1つのテーブルを表示している為に、どうしても
シンプルなスキンより、読み込み時間がかかってしまいます。
[PR]
2004年 10月 20日 |
CSSでスキンの編集は色々とできますが、いじくってるうちに、変になってしまった!
元に戻せない!!!!と泣かないように、編集する前にはCSSを全てコピーし
メモ帳やワードパットに貼り付けて保存しておきましょう。
変になった時、いつでも元に戻せるように。

さて、CSSの編集は面白いほどに色々とでき、オリジナルのBlog画面が作成できます。
色々と方法があるにはあるけど、人それぞれ使っているスキンによってCSSの内容や
構成が違います。
まずは、ほぼどのスキンでも問題なく編集できるCSSを書いてみますね。
[PR]
ページトップ
XML | ATOM

個人情報保護
情報取得について
免責事項
Lavender Skin by Sun&Moon