「ほっ」と。キャンペーン
趣味のこと............嬉しかったこと!楽しかったこと!心に残った思いを記事にしていきます ☆
カテゴリ:スキン編集( 19 )
このブログのCSS編集ソース/タイトル画像挿入&本文背景画像挿入

*このブログの『 CSS編集ソース』です

画像以外は、コピペで使えます
コチラのスキンはエキサイトブログ このブログはオリジナルスキン『HTMLベーシック(ブラック)』を使用してカスタマイズしています。

『詳細情報2列のレイアウト(右) / excite/ 2008年 08月 21日』





/* excite blog skin css */

BODY{ BACKGROUND : #000000; MARGIN : 30;PADDING : 0;
BACKGROUND-IMAGE :URL(http://pds.exblog.jp/pds/1/200707/23/92/[1]DSC_8152_Copy2.jpg) ;
BACKGROUND-ATTACHMENT:FIXED;
BACKGROUND-REPEAT:NO-REPEAT;
BACKGROUND-POSITION: RIGHT;}
BODY,TD,DIV,LI{ FONT-SIZE : SMALL; FONT-FAMILY : VERDANA,ARIAL,SANS-SERIF; LINE-HEIGHT : 150%; COLOR : #FFF; WORD-BREAK : BREAK-ALL; }


A:LINK{ COLOR: #D69F36; TEXT-DECORATION: NONE }
A:VISITED{ COLOR: #D69F36; TEXT-DECORATION: NONE }
A:ACTIVE{ COLOR: #D69F36; TEXT-DECORATION: NONE }
A:HOVER{ COLOR: #FFF602; TEXT-DECORATION: UNDERLINE }

DIV#TOP {BACKGROUND:#000; BORDER-BOTTOM : 10PX #CC0000 SOLID;
MARGIN-BOTTOM : 30PX;
TEXT-ALIGN : LEFT;
}

DIV#LEFT {
WIDTH : 100%;
MARGIN-BOTTOM : 50PX;
TEXT-ALIGN : LEFT;
}

DIV#RIGHT {
WIDTH : 150PX;
MARGIN : 0PX 0PX 80PX 40PX;
TEXT-ALIGN : LEFT;
OVERFLOW : HIDDEN;
}

DIV.HEADER {
WIDTH : 900PX;
PADDING : 0PX 0PX;
FONT-FAMILY : Times New Roman;
FONT-SIZE : 33PT;
LINE-HEIGHT :100PX;
/*FONT-WEIGHT : BOLD;*/

text-align: left;
text-indent:0.5em;

background-image : url(http://pds.exblog.jp/pds/1/200802/10/92/DSC_0626.jpg);
height:284px;
width:900px;

background-repeat: no-repeat;
}
DIV.HEADER A:LINK {COLOR: #990000; TEXT-DECORATION: NONE}
DIV.HEADER A:VISITED {COLOR: #990000; TEXT-DECORATION: NONE}
DIV.HEADER A:HOVER {COLOR: #888; TEXT-DECORATION: NONE; BORDER-BOTTOM: 1PX SOLID #FFF}

DIV.URL {
FONT : 8PT/100% VERDANA,TAHOMA ;
LETTER-SPACING : 1PX;
MARGIN : 6PX 0PX 20PX;
TEXT-ALIGN : LEFT;
}

DIV.URL A:LINK {COLOR: #FFF; TEXT-DECORATION: NONE}
DIV.URL A:VISITED {COLOR: #FFF; TEXT-DECORATION: NONE}
DIV.URL A:HOVER {COLOR: #AAA; TEXT-DECORATION: NONE; BORDER-BOTTOM: 1PX SOLID #FFF}

DIV.USERMENU {
FONT : 9PT;
TEXT-ALIGN : RIGHT;
MARGIN-BOTTOM : 7PX;
}

DIV.USERMENU A:LINK {COLOR: #FFF; TEXT-DECORATION: NONE}
DIV.USERMENU A:VISITED {COLOR: #FFF; TEXT-DECORATION: NONE}
DIV.USERMENU A:HOVER {COLOR: #888; TEXT-DECORATION: UNDERLINE;BORDER-BOTTOM: 1PX SOLID #FFFFFF}

DIV.PROFILE {
WIDTH : 150PX;
PADDING : 0PX 0PX 10PX;
LINE-HEIGHT : 150%;
OVERFLOW : HIDDEN;
}

DIV.MN {
WIDTH : 150PX;
LINE-HEIGHT : 150%;
}

DIV.MNTTL {
WIDTH : 150PX;
BORDER-BOTTOM : 1PX #333 SOLID;
FONT : 9PT/150% VERDANA;
PADDING : 2PX 0PX 0PX;
MARGIN : 25PX 0PX 10PX;
}

DIV.MEMOBODY {
WIDTH : 150PX;
OVERFLOW : HIDDEN;
}

DIV.POST {
WIDTH : 100%;
MARGIN-BOTTOM : 60PX;
}

DIV.POST_HEAD {
BORDER-BOTTOM : 1PX #CCC SOLID;
MARGIN-BOTTOM : 15PX;
PADDING-BOTTOM : 3PX;
OVERFLOW : HIDDEN;
}

DIV.POST_BODY {
WIDTH : 100%;
TEXT-ALIGN : LEFT;
MARGIN-BOTTOM : 30PX;
LINE-HEIGHT : 1.5;
OVERFLOW : HIDDEN;
}

DIV.POST_BODY A{ BORDER-BOTTOM: 1PX DOTTED #D69F36 }
DIV.POST_BODY A:LINK{ BORDER-BOTTOM: 1PX DOTTED #D69F36 }
DIV.POST_BODY A:VISITED{ BORDER-BOTTOM: 1PX DOTTED #D69F36 }
DIV.POST_BODY A:ACTIVE{ BORDER-BOTTOM: 1PX DOTTED #FFF602 }
DIV.POST_BODY A:HOVER{TEXT-DECORATION: NONE; BORDER-BOTTOM: 1PX SOLID #FFF602}

DIV.POST_TTL {
FONT-SIZE: 13PT;
FONT-WEIGHT : BOLD;
COLOR : #800000;
}

DIV.POST_TAIL {
FONT : 8PT/150% TAHOMA;
MARGIN-TOP : 10PX;
TEXT-ALIGN : RIGHT;
PADDING-BOTTOM: 20PX;
BORDER-BOTTOM-WIDTH : 5PX;
BORDER-BOTTOM-STYLE: DOUBLE;
BORDER-BOTTOM-COLOR: #FF0000;
}

DIV.COMMENT {
TEXT-ALIGN : LEFT;
BORDER : 1PX #444 SOLID;
BACKGROUND : #111;
PADDING : 10PX 15PX;
MARGIN : 20PX 0PX 20PX;
}

DIV.COMMENT_BODY {
MARGIN : 6PX 0PX 20PX;
LINE-HEIGHT : 140%;
OVERFLOW : HIDDEN;
}

DIV.COMMENT_TAIL {
MARGIN : 8PX 0PX 5PX;
FONT : 8PT/150% VERDANA, TAHOMA;
COLOR : #AAA;
}

DIV.COMMENT_INPUT {
MARGIN-TOP : 20PX;
BORDER-TOP : 1PX #AAA DOTTED;
PADDING-TOP : 20PX;
}

DIV.COMMENT_LINE {
BORDER-TOP : 1PX #AAA DOTTED;
MARGIN : 10PX 0PX 15PX;
}

DIV.TRACK_TOP {
LINE-HEIGHT : 170%;
}

DIV.ARCHIVE_HEAD {
FONT-WEIGHT : BOLD;
MARGIN-BOTTOM : 10PX;
}

DIV.ARCHIVE_BODY {
MARGIN : 20PX 0PX;
LINE-HEIGHT : 160%;
PADDING-BOTTOM : 100PX;
}

IMG.IMAGE_TOP {
MARGIN-BOTTOM : 15PX;
}

IMG.IMAGE_LEFT {
MARGIN-RIGHT : 15PX;
MARGIN-BOTTOM : 15PX;
}

IMG.IMAGE_RIGHT {
MARGIN-LEFT : 15PX;
MARGIN-BOTTOM : 15PX;
}

IMG.IMAGE_MID {
MARGIN-TOP : 15PX;
MARGIN-BOTTOM : 15PX;
}

IMG.BOOKMK {
MARGIN : 10PX;
BORDER : 0PX;
}

IMG.USERMENU {
MARGIN-LEFT : 8PX;
}

IMG.LOGO {
MARGIN-BOTTOM : 10PX;
}

DIV.BANNER {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/02/5/banner_5.gif);
WIDTH : 150PX;
HEIGHT : 50PX;
MARGIN : 30PX 0PX 10PX;
}

DIV.BANNER_WIK { MARGIN : 20PX 0PX;}

.SMALL { FONT-SIZE : 11PX; }
.DATE {FONT : BOLD 8PT/150% VERDANA, TAHOMA; }
.TIME {FONT : 8PT/150% VERDANA, TAHOMA; TEXT-ALIGN : LEFT; }
.AUTHOR { FONT : BOLD 9PT; }

.TXTFLD{FONT-SIZE:9PT;COLOR:#000; BORDER:1PX SOLID #666678; BACKGROUND:#FFF; }

DIV.CAL_TOP {}

DIV.CAL {
MARGIN : 20PX 0PX 20PX;
WIDTH : 150PX;
TEXT-ALIGN : CENTER;
}

DIV.CAL_HEAD {
WIDTH : 150PX;
FONT : 8PT/150% VERDANA;
TEXT-ALIGN : CENTER;
PADDING : 4PX 0PX;
MARGIN-BOTTOM : 10PX;
}

DIV.CAL_BODY {
WIDTH : 150PX;
TEXT-ALIGN : CENTER;
}

DIV.CAL_BOTTOM {}

.CAL{ FONT : 7PT/170% VERDANA; TEXT-ALIGN : CENTER; }
.CAL_DAY{ FONT : BOLD 7PT/170% VERDANA; TEXT-ALIGN : CENTER; }
.CAL_SUN{ FONT : BOLD 7PT/170% VERDANA; COLOR : #D36654; TEXT-ALIGN : CENTER;}
.CAL_SAT{ FONT : BOLD 7PT/170% VERDANA; COLOR : #3572A1; TEXT-ALIGN : CENTER;}
.CAL_TODAY{ FONT : BOLD 7PT/170% VERDANA; BACKGROUND : #333; COLOR : #EEE; TEXT-ALIGN : CENTER; }
.CAL_TR {}

DIV.XML { FONT : 8PT/150% VERDANA; TEXT-ALIGN : CENTER; }





*詳細

1.

background-image : url(http://pds.exblog.jp/pds/1/200802/10/92/DSC_0626.jpg);

この部分はブログタイトル(ブログ名)のバック画像です
CSS、33列目近く、ここにイメージアップロードした画像のurlを入れます

(http://pds.exblog.jp/pds/1/200802/10/92/DSC_0626.jpg)

これです/カワセミの画像(わたしの場合)
サイズはWIDTH=900(横幅) HEIGHT=284(縦)


2.

BACKGROUND-IMAGE :URL(http://pds.exblog.jp/pds/1/200707/23/92/[1]DSC_8152_Copy2.jpg) ;

この部分は記事背景です
文章の背景に『花の赤いつぼみ』の画像が挿入されています
CSSの2列目かな?

ここのurlもイメージアップロードに登録したものを挿入します
サイズはWIDTH=500(横幅) HEIGHT=335(縦)


画像サイズは画像編集ソフト(フォトショップなど)で加工しています
(ブログタイトル画像:900×284ピクセル/本文背景:500×335ピクセル)



大まかな感じになりますが、画像挿入&このテンプレートになります




説明がわかりづらく、申し訳ございません......号泣








にほんブログ村 写真ブログへ






[PR]
by y-sakanaya | 2012-12-26 22:34 | スキン編集
ブログで流れる文字
*ブログ内で、流れる文字を追加します。


コチラを好みのHTML編集部分に追加して下さい。







私の場合はこのような感じです。

只今、スキン編集に夢中です..........




<font size=3 color=A9A9A9A><Marquee>只今、スキン編集に夢中です..........</Marquee></font>



「只今、スキン編集に夢中です..........」の部分は、お好きな文章を入れて下さい。

注)<は半角<になおして下さい!
(本文中にも使用出来ます.........本文もHTML編集ですので)


★<font size=3 color=A9A9A9A></font>で文字の大きさと、色指定をしています。


font size=3=文字の大きさ

color=A9A9A9A=文字の色指定





*私が追加した部分はコチラです。
スキン編集のHTML編集部分を弄くります。


</DIV>
<font size=3 color=A9A9A9A><Marquee>只今、スキン編集に夢中です..........</Marquee></font>

<DIV ID=LEFT>




*色々な動きを指定出来ます!
機会がありましたら、UPしまね。




*スキン編集はあくまでも自己責任と言う事で行って下さい
宜しくお願い致します。

失敗した時の為、最初のHTML編集部分とCSS編集部分をコピーしておいた方が良いですよ!!!


[PR]
by y-sakanaya | 2007-09-21 20:34 | スキン編集
記事タイトルの下にラインを追加!(HTMLベーシックのブラック用)
*本日はスキン編集です。


スキン編集で「HTMLベーシック」のブラックを選んだ場合、記事タイトル下のラインが見えません。
そこで、記事タイトルの下にラインを追加します。




*HTMLベーシックのブラック、CSS編集のこの部分を探します。


DIV.POST_HEAD {
MARGIN-BOTTOM : 15PX;
PADDING-BOTTOM : 3PX;
OVERFLOW : HIDDEN;
}



ここにスタイルを追加しますよ!

BORDER-BOTTOM : 1PX #FFF SOLID;

コチラを追加します。(カラーは白)



★このようになります

DIV.POST_HEAD {
BORDER-BOTTOM : 1PX #CCC SOLID;
MARGIN-BOTTOM : 15PX;
PADDING-BOTTOM : 3PX;
OVERFLOW : HIDDEN;
}



*プレビューをクリックして見ると..........


c0114492_2021585.jpg





このような感じ!




*HTMLベーシックのブラック以外は、タイトル記事の下にラインがあります。




*スキン編集はあくまでも自己責任と言う事で行って下さい
宜しくお願い致します。

失敗した時の為、最初のHTML編集部分とCSS編集部分をコピーしておいた方が良いですよ!!!


[PR]
by y-sakanaya | 2007-09-21 20:22 | スキン編集
エキサイトブログでSoundを!........ 気に入ったMusicを流します。
本日は、エキサイトブログに音楽を追加する方法です。

お好きな音楽をジャンルから選び(限定されますが;大汗)、ブログにSoundを追加します!!

簡単ですよ〜!
私も試験的に設置してみました。
もちろん、無料です。




*最初に、このページへ!

http://www.blog-tunes.com/


*ここで登録をします。

c0114492_2126847.jpg


★「無料会員登録はコチラ」から、会員登録を済ませます。





c0114492_21283626.jpg


★ここ(右にあります)から「MUSIC」をクリック!




c0114492_21305377.jpg


★このページが開きますので、好きなジャンルをクリック!




c0114492_21322539.jpg


★私が選択したのはコチラです。(本館用)

このページにコードがあります!
私は「コード1」を使用しました。

このコードをコピーします。
(エキサイトでは<embed>は使えませんので、後ほど何とかします;大汗)


貼付ける場所は「メモ帳」か「本文」です。
HTML編集の出来る場所でしたら何とかなると思います.............





*こんな感じで!

c0114492_21454287.jpg



★メモ帳に貼付ける時に、コードを少し弄っています。
と言っても、エキサイトで使えるようにテキストを少し削っています。


*コードを消した部分はコチラです。


c0114492_2154156.jpg



★元のコードです!
この部分の最後を弄ります。

wmode="transparent"></embed>

の部分の「></embed>」を削除して下さい。



★最終的にこのようになります。


c0114492_21574833.jpg




注)メモ帳欄の一番下がベストだと思います。
途中でコードを切っているので、メモ帳欄に他のソースが入っていると反映しない事が.........
(私も悩みました;大汗)
スペースを調整して見て下さいね!


勿論!記事本文にも設置出来ますよ〜




*ボリューム、音楽のon,offはコードで指定出来ます。

c0114492_2244846.jpg



★v=30は音量ですので、数字を小さくすれば音が下がります。(お好みの音量にして下さい上は100まで!?)

★s=onは音楽が流れ続けます。(ブログを開いたときから)
s=offにするとブログを開いても音楽が流れません!
設置した場所のバナーの「on.off」をクリックすると音楽を止めたり流したり出来ます。





*以上です!
ん〜Macの環境ですので..........Windowsではどうでしょうか!?(大汗)
[PR]
by y-sakanaya | 2007-09-10 22:14 | スキン編集
タイトル下をアレンジ!
c0114492_21381081.jpg
このような感じで増やしてみましょう!


トップ|投稿|設定 (ログインしている場合)の次に、好みのURLを追加します。



*HTML部分のここを弄くります。


<DIV CLASS=USERMENU><$adminmenu type=1$>
(<>は半角<>ですよ〜)

この後にスタイルを追加します!



*このような感じです。

| <a href="http://**********/">本館入り口</a> | <a href="*********/スキン編集/">スキン編集</a> | <a href="http://www.exblog.jp/logout.asp">Log Out</a> | <a href="http://www.exblog.jp/center/my_valley.asp">RSS</a>






*最終的にHTML部分はこのようになります!

<DIV CLASS=USERMENU><$adminmenu type=1$> | <a href="http://******/">本館入り口</a> | <a href="http://*******.exblog.jp/tags/スキン編集/">スキン編集</a> | <a href="http://www.exblog.jp/logout.asp">Log Out</a> | <a href="http://www.exblog.jp/center/my_valley.asp">RSS</a></DIV>


「<」は半角「<」に直して下さい。



*上記は私の場合です。

| <a href="http://**********/(表記したいページURL">出したいページ名</a> |



★| <a href="http://www.exblog.jp/logout.asp">Log Out</a> コチラは便利です!
すぐ!ログアウト出来ます!!(私はブログを二つ持っているので;大汗)

★| <a href="http://www.exblog.jp/center/my_valley.asp">RSS</a>コチラも便利です!
リンクしているブログの更新情報が一発で見れますよ〜!!


後はお好みで追加して下さいませ。







*スキン編集はあくまでも自己責任と言う事で行って下さい
宜しくお願い致します。

失敗した時の為、最初のHTML編集部分とCSS編集部分をコピーしておいた方が良いですよ!!!






[PR]
by y-sakanaya | 2007-09-09 21:54 | スキン編集
タイトル画像の変更!.......コチラの方が良いかも!!
*CCS編集の「DIV.HEADER」 の部分を探します!

「{」以下に新しいスタイルを追加しますよ〜
({ に続いているスタイルは削除します)


こんな感じになります。

WIDTH : 900PX;
PADDING : 0PX 0PX;
FONT-FAMILY : serif;
FONT-SIZE : 33PT;
LINE-HEIGHT :100PX;
/*FONT-WEIGHT : BOLD;*/

text-align: left;
text-indent:0.5em;

background-image : url(タイトル画像!マイイメージにUpした画像);
height:高さpx;
width:横幅px;

background-repeat: no-repeat;



*説明です

WIDTH : 900PX;はブログ(タイトル)の幅。

text-align: left; はタイトルの文字の位置(この場合は左寄せ)

text-indent:0.5em;はタイトル文字の左右の位置(動かす幅)

LINE-HEIGHT :100PX;はタイトル文字の縦の位置(動かす幅)

FONT-FAMILY : serif;はタイトル文字の書体(この場合は明朝)

FONT-SIZE : 33PT;はタイトル文字の大きさ

height:高さpx;は画像Upする写真の縦の長さ

width:横幅px;は画像Upする写真の横の長さ







*ん〜、私!これからチョット試行錯誤します.........大汗
Macでしか見れないので、Windowsでの環境はどうでしょう!?ぬはっ!!





*スキン編集はあくまでも自己責任と言う事で行って下さい
宜しくお願い致します。

失敗した時の為、最初のHTML編集部分とCSS編集部分をコピーしておいた方が良いですよ!!!


[PR]
by y-sakanaya | 2007-09-09 21:11 | スキン編集
リンクバナーの作り方!
*今回は、「リンクバナー」を作ってみます。



とっても簡単ですよ!
指定のブログURLと画像URLを貼付けるだけです。


*テキストはコチラです。


<a href="http://**************"><IMG SRC=http://pds.********************jpg></a>


注)  <>は<>に変換して下さい。
ブログに反映してしまうので、全角「<>」にしています。



*<a href="http://**************">の部分、http://**************は表示したいブログのURLを入れます。

*<IMG SRC=http://pds.********************jpg>の部分、http://pds.********************jpg.......コチラはリンクバナーの画像URLです。
スキン編集の「マイイメージアカウント」に登録した画像のURLを入れましょう!!




<このようになります!!>












*画像サイズはお好みで!
今回の場合、横110px.縦78~80pxでしょうか...........調節をしてみて下さいね〜!!!!!


「メモ帳」、「本文」で使えますよ!!!




*スキン編集はあくまでも自己責任と言う事で行って下さい
宜しくお願い致します。

失敗した時の為、最初のHTML編集部分とCSS編集部分をコピーしておいた方が良いですよ!!!

[PR]
by y-sakanaya | 2007-08-12 21:38 | スキン編集
記事タイトルの前に「ワンポイント画像」を使います!
*記事タイトルの前に、画像を挿入します!



このような感じです...........


c0114492_213881.jpg





*記事タイトル前に、「画像(写真)」がUpされています。
CSS編集の、この部分を探して下さい!




DIV.POST_TTL {
FONT-WEIGHT : BOLD ;




*ココに新たにソースを付け加えます!



DIV.POST_TTL {FONT-SIZE: 13PT;
FONT-WEIGHT : BOLD ;
BACKGROUND-IMAGE :URL(http://pds.exblog.jp/pds/****************.jpg) ;
PADDING-LEFT: 30PX ;
BACKGROUND-REPEAT: NO-REPEAT ;
COLOR:#A0522D;FONT-FAMILY:serif;
}




*画像サイズ..........WIDTH=30 HEIGHT=29!横幅30ピクセル、縦29ピクセル。




面倒ですが、「プレビュー」をクリックしながら調整をして下さいね!!!




c0114492_2113784.jpg





この画像を縮小しました!

[PR]
by y-sakanaya | 2007-08-05 21:13 | スキン編集
記事タイトルの色と文字の大きさ!背景色をつけましょう!
*記事タイトルの色と文字の大きさ!背景色を指定します。




*CSS編集のこの部分を探します。


DIV.POST_TTL {
 FONT-WEIGHT : BOLD;
 }




*ココに新たなスタイルを追加します


文字の大きさ=FONT-SIZE: 13PT;(13の部分を変更します!大きい数字ほど文字が大きくなります)

色=COLOR : #FFC000;(#******で色指定)

記事タイトル背景色=BACKGROUND:#151515;(#******で色指定)




*このようになります!



DIV.POST_TTL {
FONT-SIZE: 13PT;
       BACKGROUND:#151515;
FONT-WEIGHT : BOLD;
COLOR : #800000;
}






*はい!このような感じですよ〜!

c0114492_22111752.jpg







*お好みでどうぞ!!!!





*スキン編集はあくまでも自己責任と言う事で行って下さい
宜しくお願い致します。

失敗した時の為、最初のHTML編集部分とCSS編集部分をコピーしておいた方が良いですよ!!!

[PR]
by y-sakanaya | 2007-07-30 22:12 | スキン編集
カレンダーの背景に写真(画像)を使いましょう!
*CSS編集です!

カレンダーの背景に「写真(画像)」を挿入します。




*CSS編集のこの部分を探します。



DIV.CAL_BODY {
WIDTH : 150PX;
TEXT-ALIGN : CENTER;
{


*この部分にスタイルを追加しますよ!




background-image:url(http://pds.exblog.*************.jpg);
background-repeat:no-repeat;
background-position:bottom;




*http://pds.exblog.*************.jpgは、マイイメージアカウントに登録をした画像です。
サイズは横100〜150ピクセル、縦100〜150ピクセルの正方形又は長方形が良いと思います。



*最終的に、このようになります。




DIV.CAL_BODY {
WIDTH : 150PX;
TEXT-ALIGN : CENTER;
background-image:url(http://pds.exblog.jp/pds/************);
background-repeat:no-repeat;
background-position:bottom;
}




*はい!カレンダーの背景が出来ました!






*このようになります。

c0114492_21563710.jpg







*スキン編集はあくまでも自己責任と言う事で行って下さい
宜しくお願い致します。

失敗した時の為、最初のHTML編集部分とCSS編集部分をコピーしておいた方が良いですよ!!!

[PR]
by y-sakanaya | 2007-07-30 21:36 | スキン編集