<   2006年 01月 ( 27 )   > この月の画像一覧
2006年 01月 30日
26 メッセージを流すお知らせ欄を設定してみましょう     (HTML & CSS)
exciteブログワンポイント カスタマイズの第26回目です

ベーシック スキンのダークブルーをベースに書いていきます。

メッセージを流すお知らせ欄を設定してみましょう。

1.HTML(全体)をカスタマイズします。

8~10行目位に

<div class="USERMENU"><$adminmenu type=1$></div>
</div>
</td></tr>
と言う文があります
この後ろに下の分を追加します

<tr><td colspan="2" valign="top" align="right"><marquee class="board"><b>この場所にメッセージを書きます</b></marquee></td></tr>


編集後
<div class="USERMENU"><$adminmenu type=1$></div>
</div>
</td></tr>
<tr><td colspan="2" valign="top" align="right"><marquee class="board"><b>この場所にメッセージを書きます</b></marquee></td></tr>


CSSをカスタマイズします。

Ⅰ.CSS の一番下に下の文を追記します。
.board {
BACKGROUND : #000099;
color : #FFccFF;
font-size : 10pt;
FONT-FAMILY : VERDANA,ARIAL,SANS-SERIF;;
border : inset 1px #FFccFF ;
width : 650px;
height : 15px;
padding-top : 1px;
padding-bottom : 1px;
}


BACKGROUNDのカラーコードを変えればメッセージボードの背景の色が変わります。
colorのカラーコードを変えればフォントの色が変わります。
width : 650pxの数字を変えればメッセージボードの幅を変えられます。

この後プレビューを押して確認してみてください。 OKでしたら保存を押して適用してくださいね。
e0075308_21521324.jpg

[PR]
by chocobopapa | 2006-01-30 01:05 | スキン編集
2006年 01月 29日
25 記事の最初の1文字だけスタイルを変えてみましょう (CSS)
exciteブログワンポイント カスタマイズの第25回目です

ベーシック スキンのダークブルーをベースに書いていきます。

記事の最初の1文字だけスタイルを変えてみましょう 。

今回はこの記事のように、文章の最初の一文字だけを別のスタイルにする事が出来るカスタマイズです。(ドロップキャップスっていいます)


この方法は、IEだと6以降のものに対応してます。古いブラウザだと対応されていませんので注意が必要です^^;



CSSをカスタマイズします。

Ⅰ.CSS の一番下に

p:first-letter {
font-size:250%;
line-height:100%;
color:#ffd800;
float:left;
}

という文を追加してください。(コピー&ペーストが楽です^^)
これで準備は完了です^^
カラーコードはお好きな色を指定してくださいね。

Ⅱ.記事を投稿するときに...
 
<p>記事の本文をお書きください。そうすると...</p>


こうすることによって

記事の本文をお書きくださいそうすると...こんな風に最初の一文字だけ拡大されて表示されます。文章が多い記事にはアクセントになっていいかと思います^^


記事の中の段落ごとに <p> </p>でくくることによって段落の最初の文字だけがアクセントになります。


いかがですか?ちょっと変化があっていいかんじでしょ?

e0075308_21521324.jpg

[PR]
by chocobopapa | 2006-01-29 21:09 | スキン編集
2006年 01月 29日
24 サイドメニュー部分の背景に壁紙を設定しててみましょう(HTML & CSS)
exciteブログワンポイント カスタマイズの第24回目です

ベーシック スキンのダークブルーをベースに書いていきます。


今回はサイドメニュー部分の背景に壁紙を設定しててみましょう。
前回はCSSでカスタマイズを行いました...そうすると、表示する内容が無いと、背景は途中で途切れてしまいます。
それを回避してみましょう。

準備.壁紙にする画像を “マイイメージアカウントにイメージ登録” から登録して下さい。
イメージのurlをコピーしておいてください。

 *注意
  他のサイトから直接リンクだけはしないようにしてくださいね。
  必ず自分でupしたurlで行ってください。
  画像のサイズは適当でOKです^^;

1.HTML(全体)をカスタマイズします

11,12行目位に

<tr><td width="240" valign="top">
<div id="LEFT">
と言う文があります
valign="top"の後ろに半角のスペースをいれた後に
BACKGROUND="http://pds.exblog.jp/pds/1/****.gif"
を追記してください。http://~はあなたがupした画像のurlですよ^^
編集後
<tr><td width="240" valign="top" background="http://pds....gif">
<div id="LEFT">


CSSをカスタマイズします。

Ⅰ.CSS の比較的上のほうに^^;(17行目くらいに...)

DIV#LEFT {
BACKGROUND : #FFF;
WIDTH : 190PX;
PADDING : 0PX 25PX;
MARGIN-BOTTOM : 30PX;
WORD-BREAK : BREAK-ALL;
}

という文がありますので探してみてください。

BACKGROUND : #FFF;
を削除してください。


この後プレビューを押して確認してみてください。 OKでしたら保存を押して適用してくださいね。
e0075308_21521324.jpg

前回までのプレビュー
今回のプレビュー

今回の背景は和風素材の小紋屋様からお借りいたしました。
[PR]
by chocobopapa | 2006-01-29 18:10 | スキン編集
2006年 01月 29日
23 記事表示部分の背景に壁紙を設定しててみましょう-2 (HTML & CSS)
exciteブログワンポイント カスタマイズの第23回目です

ベーシック スキンのダークブルーをベースに書いていきます。


今回は記事表示部分の背景に壁紙を設定しててみましょう。
前回はCSSでカスタマイズを行いました...そうすると、表示する内容が無いと、背景は途中で途切れてしまいます。
それを回避してみましょう。

準備.壁紙にする画像を “マイイメージアカウントにイメージ登録” から登録して下さい。
イメージのurlをコピーしておいてください。

 *注意
  他のサイトから直接リンクだけはしないようにしてくださいね。
  必ず自分でupしたurlで行ってください。
  画像のサイズは適当でOKです^^;

1.HTML(全体)をカスタマイズします

24,25行目位に

<td width="560" valign="top">
<div id="RIGHT">
と言う文があります
valign="top"の後ろに半角のスペースをいれた後に
BACKGROUND="http://pds.exblog.jp/pds/1/****.gif"
を追記してください。http://~はあなたがupした画像のurlですよ^^
編集後
<td width="560" valign="top" BACKGROUND="http://pds.exblog.jp/pds/1/****.gif">
<div id="RIGHT">

CSSをカスタマイズします。

Ⅰ.CSS の比較的上のほうに^^;(25行目くらいに...)

DIV#RIGHT {
BORDER-LEFT : 1PX #CCC DOTTED;
BACKGROUND : #F4F5F9;
WIDTH : 520PX;
MARGIN-BOTTOM : 40PX;
PADDING : 0PX 20PX 0PX 19PX;
WORD-BREAK : BREAK-ALL;
}

という文がありますので探してみてください。

BACKGROUND : #F4F5F9;
を削除してください。


この後プレビューを押して確認してみてください。 OKでしたら保存を押して適用してくださいね。
e0075308_21521324.jpg

CSSのみで行ったときのプレビュー
今回のプレビューね?切れてなぁ~い^^

今回の背景は和風素材の小紋屋様からお借りいたしました。
[PR]
by chocobopapa | 2006-01-29 15:26 | スキン編集
2006年 01月 29日
22記事表示部分の背景の色を変えてみましょう-2   (HTML & CSS)
exciteブログワンポイント カスタマイズの第22回目です

ベーシック スキンのダークブルーをベースに書いていきます。


今回は記事表示部分の背景の色を変えてみましょう。
前回はCSSでカスタマイズを行いました...そうすると、表示する内容が無いと、背景は途中で途切れてしまいます。
それを回避してみましょう。

1.HTML(全体)をカスタマイズします

24,25行目位に

<td width="560" valign="top">
<div id="RIGHT">
と言う文があります

valign="top"の後ろに半角のスペースをいれた後に
bgcolor="カラーコード"
と入力します。*カラーコードはお好きな色をお入れくださいね。

編集後
<td width="560" valign="top" bgcolor="#CCCCFF">
<div id="RIGHT">


次にCSSをカスタマイズします。

Ⅰ.CSS の上のほうに(25行目くらいに...)

DIV#RIGHT {
BORDER-LEFT : 1PX #CCC DOTTED;
BACKGROUND : #F4F5F9;
WIDTH : 520PX;
MARGIN-BOTTOM : 40PX;
PADDING : 0PX 20PX 0PX 19PX;
WORD-BREAK : BREAK-ALL;
}

という文がありますので探してみてください。

BACKGROUND : #F4F5F9;という文を削除しちゃってください

この後プレビューを押して確認してみてください。 OKでしたら保存を押して適用してくださいね。
e0075308_21521324.jpg

編集前のプレビュー
編集後のプレビュー
[PR]
by chocobopapa | 2006-01-29 11:28 | スキン編集
2006年 01月 29日
22サイドメニュー部分の背景の色を変えてみましょう-2   (HTML & CSS)
exciteブログワンポイント カスタマイズの第22回目です

ベーシック スキンのダークブルーをベースに書いていきます。


今回はサイドメニュー部分の背景の色を変えてみましょう。
前回はCSSでカスタマイズを行いました...そうすると、表示する内容が無いと、背景は途中で途切れてしまいます。
それを回避してみましょう。

1.HTML(全体)をカスタマイズします

11,12行目位に

<tr><td width="240" valign="top">
<div id="LEFT">
と言う文があります

valign="top"の後ろに半角のスペースをいれた後に
bgcolor="カラーコード"
と入力します。*カラーコードはお好きな色をお入れくださいね。

編集後
<tr><td width="240" valign="top" bgcolor="#666699">
<div id="LEFT">


次にCSSをカスタマイズします。

Ⅰ.CSS の上のほうに(17行目くらいに...)

DIV#LEFT {
BACKGROUND : #FFF;
WIDTH : 190PX;
PADDING : 0PX 25PX;
MARGIN-BOTTOM : 30PX;
WORD-BREAK : BREAK-ALL;
}

という文がありますので探してみてください。

BACKGROUND : #FFF;という文を削除しちゃってください

この後プレビューを押して確認してみてください。 OKでしたら保存を押して適用してくださいね。
e0075308_21521324.jpg

編集前のプレビュー21迄カスタマイズ適用
編集後のプレビュー
[PR]
by chocobopapa | 2006-01-29 00:02 | スキン編集
2006年 01月 28日
21.サイドメニュー部分の背景の色を変えてみましょう       (CSS)-1
exciteブログワンポイント カスタマイズの第21回目です

ベーシック スキンのダークブルーをベースに書いていきます。


今回はサイドメニュー部分の背景の色を変えてみましょう。

CSSをカスタマイズします。

Ⅰ.CSS の上のほうに^^;(17行目くらいに...)

DIV#LEFT {
BACKGROUND : #FFF;
WIDTH : 190PX;
PADDING : 0PX 25PX;
MARGIN-BOTTOM : 30PX
WORD-BREAK : BREAK-ALL;
}

という文がありますので探してみてください。

BACKGROUND : #FFF;という文の(カラーコード)をお好きな色に変えます。


この後プレビューを押して確認してみてください。 OKでしたら保存を押して適用してくださいね。
e0075308_21521324.jpg

編集前のプレビュー20迄カスタマイズ適用
編集後のプレビュー
[PR]
by chocobopapa | 2006-01-28 21:25 | スキン編集
2006年 01月 26日
⑳コメント入力部分に画像を挿入してみましょう
exciteブログワンポイント カスタマイズの第20回目です

ベーシック スキンのダークブルーをベースに書いていきます。

今回はコメント入力部分に画像を挿入してみましょう。

CSSをカスタマイズします。

Ⅰ.CSS の一番下に

DIV.COMMENT_INPUT TEXTAREA{
background :#666699 url(http://pds.exblog.jp/*******.gif) no-repeat right center ;
}


という文を追記してください。画像はあらかじめupしてくださいね。

 カラーコードは万が一画像が表示されないときの為に入れておくことをお勧めします^^;
 no-repeat と言うのは繰り返さないってことです。これを省略すれば繰り返してエリア内に画像を繰り返し表示してくれます。
 right center と言うのは最初のrightは横の位置を指定します。次のcenterはたての位置を指定します。
 たとえば左上だったら...left top、右下だったら...right bottomって感じです。
  
先ほどの背景の色、文字の大きさと色、高さ・幅の変更と合わせて
編集後
DIV.COMMENT_INPUT TEXTAREA{
width:456px ! important;
height:10em;
font-size:10px;
background :#666699 url(http://pds.exblog.jp/pds/1/200601/23/08/p_p.gif) no-repeat right center ;
}
保存を押して適用してくださいね。
e0075308_21521324.jpg

[PR]
by chocobopapa | 2006-01-26 12:16 | スキン編集
2006年 01月 25日
⑲コメント入力部分の幅を変えてみましょう(CSS)
exciteブログワンポイント カスタマイズの第19回目です

ベーシック スキンのダークブルーをベースに書いていきます。

今回はコメント入力部分の幅を変えてみましょう。

CSSをカスタマイズします。

Ⅰ.CSS の一番下に

DIV.COMMENT_INPUT TEXTAREA{
width:456px ! important;
}

という文を追記してください。

 456pxの数字を変えればコメント入力欄の横幅の大きさが変わります。
  
先ほどの背景の色、文字の大きさと色、高さの変更と合わせて
編集後
DIV.COMMENT_INPUT TEXTAREA{
width:456px ! important;
HEIGHT : 10em ;
background : #666699 ;
FONT-SIZE : 10PT ;
COLOR : #FFFFFF ;
}
保存を押して適用してくださいね。
e0075308_21521324.jpg

[PR]
by chocobopapa | 2006-01-25 22:27 | スキン編集
2006年 01月 25日
⑱コメント入力部分の高さを変えてみましょう(CSS)
exciteブログワンポイント カスタマイズの第18回目です

ベーシック スキンのダークブルーをベースに書いていきます。

今回はコメント入力部分の高さを変えてみましょう。

CSSをカスタマイズします。

Ⅰ.CSS の一番下に

DIV.COMMENT_INPUT TEXTAREA{
HEIGHT : 10em;
}

という文を追記してください。

 10emの数字を変えれば文字の大きさが変わります。
  *今度の単位はemです。10文字分の高さって意味です^^

先ほどの背景の色、文字の大きさと色の変更と合わせて
編集後
DIV.COMMENT_INPUT TEXTAREA{
HEIGHT : 10em ;
background : #666699 ;
FONT-SIZE : 10PT ;
COLOR : #FFFFFF ;
}
保存を押して適用してくださいね。
e0075308_21521324.jpg

[PR]
by chocobopapa | 2006-01-25 19:07 | スキン編集

記事更新停止中です;;
by chocobopapa
    
since 2005.9.17
Count Down
Ranking

第10位

マイペース
SunSet Swish

第9位

Around The World
MONKEY MAJIK

第8位

恋のダウンロード
仲間由紀恵
with ダウンローズ

第7位

太陽の下
レミオロメン

第6位

Kiss Me Good-Bye
アンジェラ・アキ

第5位

Startin'/Born To Be...
浜崎あゆみ

第4位

SEXY BOY-そよ風に寄り添って-
モーニング娘。

第3位

純恋歌
湘南乃風

第2位

一剣
氷川きよし

第1位

サヤエンドウ
はだしのシンデレラボーイ
NEWS
Chocobo Style
    
以前の記事
    
カテゴリ
    
最新のトラックバック
美容
from 美容
Η(・∀・)イイ!!
from しんや
キッズコスメ
from キッズコスメ
負けても勝ち組w
from ドンパッチ
ホワイトツリー ビタフォ..
from 韓国コスメでべっぴん肌
スーヒャンスノー インテ..
from 韓国コスメでべっぴん肌
【化粧水】雪花秀 滋陰水
from 韓国コスメでべっぴん肌
韓国コスメ「雪花秀」に興..
from 韓国コスメが売れる理由
陸上 自衛隊のサイト集情報
from 陸上 自衛隊メンバー
横幅に戸惑った話 ~2年..
from ここから
    
フォロー中のブログ
    
その他のジャンル
    
ファン
    
記事ランキング
    
ブログジャンル
    
画像一覧
Copy Right Chocobo Style Since 2006