<   2005年 12月 ( 13 )   > この月の画像一覧
2005年 12月 30日
⑦ページの背景の色を変えてみましょう(CSS)
exciteブログワンポイント カスタマイズの第7回目です

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


今回はページの背景の色を変えてみましょう。

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

Ⅰ.CSS のかなり上のほうに^^;(3行目くらいに...)

BODY { BACKGROUND : #FFF; MARGIN : 0PX; PADDING : 0PX; }


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

もう皆様お分かりですね^^そうです。ここの#FFFを変更すればいいのです。

(カラーコード)をお好きな色に変えます。


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


編集前のプレビュー①~③+⑤+⑥のカスタマイズ適用

編集後のプレビュー 背景のカラーコードを#000033にしてみました。

BODY{ BACKGROUND : #000033; MARGIN : 0PX; PADDING : 0PX; }

[PR]
by chocobopapa | 2005-12-30 22:51 | スキン編集
2005年 12月 30日
⑥お気に入りサイトのリンクバナーを貼り付けてみましょう    (HTML)
exciteブログワンポイント カスタマイズの第6回目(エキブロ新聞様ご紹介special)です^^;

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

他のブログサイト様にご紹介を受けたときとか、お気に入りのブログサイト様のリンクをはりたい!でも、Exciteブログではバナーが貼れない!(そんな事はありません^^)

せっかくだらお気に入りサイトのバナーを張りたい!というかたいらっしゃいますよね^^(いないかな^^;)

というわけで今回はサイドメニューにリンクバナーを貼り付けてみましょう
(もちろん自分のサイトのバナーでもいいですよ)

準備Ⅰ.最初にお気に入りサイトさまのリンクバナーを手に入れます
     (ちゃんと許可を得てくださいね)

 *注意
  exciteブログではgif、jpgのみ使用可能です。
  画像のサイズは最大100KB迄となっています。
  リサイズ・画像変換に関しては今回はここでは省略します。
  わからない方はコメントくださいね。
 
準備Ⅱ.画像を “マイイメージアカウントにイメージ登録” から登録して下さい。
イメージのurlをコピーしておいてください。

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


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

HTML(全体) の真ん中のほうに^^;(24行目くらいに...)

<div id="LEFT">
<div class="PROFILE">
<div align="center"><$logoimage type=1$></div>
<$description$>
<$nick$>
</div>
<$calendar type=2$>
<div class="MN"><$menuleft$></div>
<$banner type=1$>
<$xml$>
</div>

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

サイドメニューのどこに入れるかによって文の場所が変わってきます。

①サイドメニューの一番上にリンクバナーを貼り付ける場合。
先ほど探した<div id="LEFT">の後ろに

 
 <div align="center"><a href="リンク先のurl" target="_blank">
<img src="upしたバナーのurl" vspace="5" border="0"></a></div>

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

②サイドメニューの一番下のExciteバナーの上に貼り付ける場合。
先ほど探した文の後半に<$banner type=1$>があります。この前に

<div align="center"><a href="リンク先のurl" target="_blank">
<img src="upしたバナーのurl" vspace="5" border="0"></a></div>

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

*他のサイト様はコピー&ペーストだと < を変換しないといけないようになっているところもあるようですが、私のサイトはコピー&ペースト対応にしています^^。ご利用ください

わからないようでしたらコメントくださいね。
e0075308_21521324.jpg

編集前のプレビュー①~③+⑤カスタマイズ適用

編集後のプレビュー
バナーはメニューの一番上に右のバナーを埋め込んで見ました。
e0075308_2219448.gif



<div id="LEFT"><div align="center"><a href="http://chocob.exblog.jp/" terget="_blank"><img src="http://pds.exblog.jp/pds/1/******/**/**/****.gif" vspace="5" border="0" ></a></div>

[PR]
by chocobopapa | 2005-12-30 12:50 | スキン編集
2005年 12月 29日
⑤ブログタイトルの背景に写真を貼り付けてみましょう      (CSS+HTML)修正です
exciteブログワンポイント カスタマイズの第5回目です^^;

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

間違いがありました。修正いたします。ご迷惑をおかけして申し訳ありませんでした。


今回はブログタイトルの背景に写真を貼り付けてみましょう。


準備Ⅰ.最初にブログタイトル部分のサイズを確認します。
  (1)スキン編集画面を開きます
  (2)HTML(全体)の一番上のほうに
  table width="800" border="0" ...という文があるのを探してください。
  ここのtable width=の後の数字がタイトルに使用する写真(画像)の幅になります。
  今回は800pxですね。
  
準備Ⅱ.写真をタイトル画面に合うようにリサイズします。
  幅は上で確認した大きさにしてくださいね。
  高さに関しては任意のサイズでOKです。(100px前後)

 *注意
  exciteブログではgif、jpgのみ使用可能です。
  画像のサイズは最大100KB迄となっています。
  リサイズ・画像変換に関しては今回はここでは省略します。
  わからない方はコメントくださいね。
 
準備Ⅲ.画像を “マイイメージアカウントにイメージ登録” から登録して下さい。
イメージのurlをコピーしておいてください。

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


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

CSS のかなり上のほうに^^;(9行目くらいに...)

DIV#TOP {
BACKGROUND : #6F8294;
BORDER-BOTTOM : 5PX SOLID #C1D6F8;
WIDTH : 800PX;
}

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

誤) (1)ここの、BACKGROUND : #6F8294 の後ろに、先ほどコピーしたurlを
url( ここに貼り付けてください) ; no-repeat ; という形で指定します。

正) (1)ここの、BACKGROUND : #6F8294 の後ろに、先ほどコピーしたurlを
url( ここに貼り付けてください) ; no-repeat ; という形で指定します。


 (2)WIDTH : 800PX; の後ろに 用意した画像の高さを指定する文を追加します。
  HEIGHT : 用意した画像の高さPX;

貼り付けた後は下の文のようになります。

DIV#TOP {
BACKGROUND : #6F8294
url(http://pds.exblog.jp/pds/..... .gif ) ; no-repeat ;
BORDER-BOTTOM : 5PX SOLID #C1D6F8;
WIDTH : 800PX; HEIGHT : 用意した画像の高さPX;
}

【参考】 壁紙を貼り付ける場合、その前のカラーコードは指定しなくてもいいのですが、万が一画像が表示されないときのために残しておいたほうがいいと思います。

HTMLにて高さ指定するとタイトルの位置などがおかしくなってしまうようです...現在調査しています。CSSカスタマイズのみで実施してください。m(_"_)m
Ⅴ.HTML(全体)をカスタマイズします

HTML(全体)の一番上のほうに

<table width="800" border="0" cellpadding="0" cellspacing="0" align="center">
<tr><td colspan="2" valign="top">
<div id="TOP">
<table width="800">
<tr><td align="left" width="800"><div

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

 (1)この赤字の<table width="800">の"800"のうしろに
HEIGHT="用意した画像の高さ"を追加します。
  *注意
   "800"とHEIGHTの間には半角のスペースを入れます。


貼り付けた後は下の文のようになります。

<table width="800" border="0" cellpadding="0" cellspacing="0" align="center">
<tr><td colspan="2" valign="top">
<div id="TOP">
<table width="800" HEIGHT="用意した画像の高さ">
<tr><td align="left" width="800"><div...
  

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

編集前のプレビュー ①~③のカスタマイズ済み

編集後のプレビュー
写真を貼る場合④の壁紙設定は行いません

画像は夜景を使って見ましたe0075308_19551452.jpg
[PR]
by chocobopapa | 2005-12-29 23:43 | スキン編集
2005年 12月 29日
④ブログタイトルの背景に壁紙を設定してみましょう(CSS)
exciteブログワンポイント カスタマイズの第4回目です^^;

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


今回はブログタイトルの背景に壁紙を設定してみましょう。


Ⅰ.自分お気に入りの壁紙を準備してください。各サイトの利用の手引きに従ってくださいね
 大きさは気にしなくていいです。隙間無く埋めてくれますので^^;(逆に大きすぎないほうがいいです)

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

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


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

CSS のかなり上のほうに^^;(9行目くらいに...)

DIV#TOP {
BACKGROUND : #6F8294;
BORDER-BOTTOM : 5PX SOLID #C1D6F8;
WIDTH : 800PX;
}

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

ここの、BACKGROUND : #6F8294; の後ろに、先ほどコピーしたurlを url ( ここに貼り付けてください) ;  という形で指定します。

貼り付けた後は下の文のように

DIV#TOP {
BACKGROUND : #6F8294;url ( http://pds.exblog.jp/pds/..... .gif ) ;
BORDER-BOTTOM : 5PX SOLID #C1D6F8;
WIDTH : 800PX;
}

【参考】 壁紙を貼り付ける場合、その前のカラーコードは指定しなくてもいいのですが、万が一画像が表示されないときのために残しておいたほうがいいと思います。

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

編集前のプレビュー ①~③のカスタマイズ済み

編集後のプレビュー
e0075308_18403779.gifこの画像を壁紙として適用

DIV#TOP {
BACKGROUND : #003366 url( http://pds.exblog.jp/pds/1/******/**/**/**.gif );
BORDER-BOTTOM : 5PX SOLID #C1D6F8;
WIDTH : 800PX;
}

[PR]
by chocobopapa | 2005-12-29 21:07 | スキン編集
2005年 12月 29日
③ブログタイトルの背景色を変えましょう(CSS)
exciteブログワンポイント カスタマイズの第3回目です^^;

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


今回はブログタイトルの背景の色を変えてみましょう。

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

Ⅰ.CSS のかなり上のほうに^^;(9行目くらいに...)

DIV#TOP {
BACKGROUND : #6F8294;
BORDER-BOTTOM : 5PX SOLID #C1D6F8;
WIDTH : 800PX;
}


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

ここの赤字で書いてある(カラーコード)をお好きな色に変えます。


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

編集前のプレビュー①、②のカスタマイズは済んだ状態です

編集後のプレビュー #330099で設定しました
[PR]
by chocobopapa | 2005-12-29 16:10 | スキン編集
2005年 12月 26日
スキンを変更しました
お正月に向けてスキンを和風にしてみました。

表示がおかしかったりしたらコメントくださいね
[PR]
by chocobopapa | 2005-12-26 22:58 | スキン編集
2005年 12月 25日
②ブログタイトルの色を変えてみましょう(CSS)
exciteブログワンポイント カスタマイズの第2回目です^^;

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


今回はブログのタイトルの色を変えてみましょう。(私の場合茶色のタイトルでマウスを乗せると桃色になります)

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

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


DIV.HEADER A:LINK {COLOR: #FFF; TEXT-DECORATION: NONE}

DIV.HEADER A:VISITED {COLOR: #FFF; TEXT-DECORATION: NONE}

DIV.HEADER A:HOVER {COLOR: #BBB; TEXT-DECORATION: NONE}


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



A:LINK というのは通常の表示されているタイトルの色を指定する文です。

A:VISITED というのはアクセス済みのときに表示されているタイトルの色を指定する文です。(通常はA:LINKと同じ色がいいと思います。)

A:HOVER というのはマウスが乗ったときに表示されるタイトルの色を指定する文です。

他に A:ACTIVE...というのがありますがこれはクリックされたときの一瞬の色ですので設定する必要は無いと思います。(今回のベースにしているスキンには記載はありません)


ここの赤字で書いてある(カラーコード)をお好きな色に変えます。


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

編集前のプレビュー  ①の編集は済んでいます

編集後のプレビュー 
 A:LINK と A:VISITED には #00FFFF(水色) を指定
 A:HOVER には #ccFF00(黄色)を指定
[PR]
by chocobopapa | 2005-12-25 18:44 | スキン編集
2005年 12月 22日
①ブログの左右に罫線を引いてみましょう^^(CSS+HTML)
exciteブログワンポイント カスタマイズの第1回目です^^;


ベーシック スキンのダークブルーをベースに書いていきます。スキン選択画面の一番最後のスキンです。


今回はブログの左右に罫線を引いて見ましょう。(私の場合青の3pxの実線です)

CSSおよびHTML(全体)をカスタマイズします。

Ⅰ.CSS の一番最後に下記の赤い文章を書きます(一番最初のドットを忘れないように)
  コピー&ペーストが楽かな^^

.container { border-left: 1px solid #000000; border-right: 1px solid #000000; }


Ⅱ.HTML(全体)の一番上に table width=...という文があるので、下記の赤い文章を追加して書きます。

<table width="800" border="0" cellpadding="0" cellspacing="0" align="center" class="container" >


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



【参考】
 CSSの値をさらにカスタマイズ

 ①1px の数字を大きくすれば太い線になっていきます。

 ②solid(実線)を dotted(点線) , dashed(破線) , double(二重線)に変える事が出来ます

 ③#000000カラーチャートをもとに変える事によって線の色を変える事が出来ます。

これでちょっとしたアクセントをつける事が出来ますね^^
e0075308_21521324.jpg

編集前のプレビュー
編集後のプレビュー この場合 5px solid #000099 です
[PR]
by chocobopapa | 2005-12-22 21:25 | スキン編集
2005年 12月 22日
基本の基本
exciteブログ ワンポイントカスタマイズ 基本の基本

exciteブログのカスタマイズは 【HTMLファイル】【CSSファイル】 で行います。

カスタマイズしてみたら、保存する前にプレビューで確認してみてくださいね。

問題無いようでしたら保存しましょう。


①まずは、自分のブログにLogin してくださいね^^;

②ログイン後に表示されるトップ画面から 「設定」 - 「スキン変更」 と押して、スキン編集画面に入ります。

③使いたい基本の形のスキンの編集ボタンを押して編集画面に入ります。

④ここからはワンポイントカスタマイズの内容を参考にして【HTMLファイル】 と 【CSSファイル】の編集を行います。

⑤編集が終わったら、保存する前に、プレビューで確認してください。
(exciteはこれが便利^^)

⑥問題無いようでしたら、保存してくださいね。
[PR]
by chocobopapa | 2005-12-22 19:05 | スキン編集
2005年 12月 22日
カラーコード
今後いろいろとお世話になるカラーコードです

#000000#000033#000066#000099#0000cc#0000FF
#003300#003333#003366#003399#0033cc#0033FF
#006600#006633#006666#006699#0066cc#0066FF
#009900#009933#009966#009999#0099cc#0099FF
#00cc00#00cc33#00cc66#00cc99#00cccc#00ccFF
#00FF00#00FF33#00FF66#00FF99#00FFcc#00FFFF


#330000#330033#330066#330099#3300cc#3300FF
#333300#333333#333366#333399#3333cc#3333FF
#336600#336633#336666#336699#3366cc#3366FF
#339900#339933#339966#339999#3399cc#3399FF
#33cc00#33cc33#33cc66#33cc99#33cccc#33ccFF
#33FF00#33FF33#33FF66#33FF99#33FFcc#33FFFF


#660000#660033#660066#660099#6600cc#6600FF
#663300#663333#663366#663399#6633cc#6633FF
#666600#666633#666666#666699#6666cc#6666FF
#669900#669933#669966#669999#6699cc#6699FF
#66cc00#66cc33#66cc66#66cc99#66cccc#66ccFF
#66FF00#66FF33#66FF66#66FF99#66FFcc#66FFFF


#990000#990033#990066#990099#9900cc#9900FF
#993300#993333#993366#993399#9933cc#9933FF
#996600#996633#996666#996699#9966cc#9966FF
#999900#999933#999966#999999#9999cc#9999FF
#99cc00#99cc33#99cc66#99cc99#99cccc#99ccFF
#99FF00#99FF33#99FF66#99FF99#99FFcc#99FFFF

#cc0000#cc0033#cc0066#cc0099#cc00cc#cc00FF
#cc3300#cc3333#cc3366#cc3399#cc33cc#cc33FF
#cc6600#cc6633#cc6666#cc6699#cc66cc#cc66FF
#cc9900#cc9933#cc9966#cc9999#cc99cc#cc99FF
#cccc00#cccc33#cccc66#cccc99#cccccc#ccccFF
#ccFF00#ccFF33#ccFF66#ccFF99#ccFFcc#ccFFFF


#FF0000#FF0033#FF0066#FF0099#FF00cc#FF00FF
#FF3300#FF3333#FF3366#FF3399#FF33cc#FF33FF
#FF6600#FF6633#FF6666#FF6699#FF66cc#FF66FF
#FF9900#FF9933#FF9966#FF9999#FF99cc#FF99FF
#FFcc00#FFcc33#FFcc66#FFcc99#FFcccc#FFccFF
#FFFF00#FFFF33#FFFF66#FFFF99#FFFFcc#FFFFFF

[PR]
by chocobopapa | 2005-12-22 12:23 | スキン編集

記事更新停止中です;;
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