趣味のこと............嬉しかったこと!楽しかったこと!心に残った思いを記事にしていきます ☆
タグ:スキン編集 ( 19 ) タグの人気記事
タイトルに画像を使いましょう!(タイトル自体に一枚の画像を使います!)
*本日は、タイトルに画像を使います。
以前紹介した方法は、背景として画像(写真)を挿入しました。
エキサイトで用意されたタイトルに背景を付けただけです。

今回は、自分好みに仕上げます。
このような感じになりますよ!!

c0114492_9475292.jpg



メリット...............自分の好きなように文字やタイトルロゴを付けられる。
 文字の配置も自由に!!


デメリット.............タイトルロゴでは無く、タイトル画像全体にカーソルが及ぶ。
 サーバーなどに問題があった時、又は画像が表示されない事態に対処出来ない。
 PCが重いと表示されるまで時間がかかり、ブログタイトルがわからない。
 後、画像ソフトが必要になるかもしれません。



このような感じでしょうか。
コチラはとても簡単です!!!!!
「HTML編集」でパパッと出来ますよ〜



*それでは、早速!説明します。

まずは好きな画像を選び、画像ソフトなどで「タイトル」や「文字」を入れて、ブログサイズに合わせて下さい。


私が作ったのはコチラです。(以前、使った物ですが;大汗)

c0114492_9583032.jpg

c0114492_9592388.jpg



*コチラの画像をマイイメージアカウントにイメージ登録しておきます。





『さぁ!編集部分にイキマスヨ!!』




*「HTML編集」の、この部分を探します。


<CENTER>


<DIV ID=TOP>
<DIV CLASS=HEADER><$header$></DIV>
<DIV CLASS=URL><$blogurl$></DIV>
<DIV CLASS=USERMENU><$adminmenu type=1$></DIV>



*一番!最初の部分です。

この中の<DIV CLASS=HEADER><$header$></DIV>を弄ります。


『<$header$>』がタイトルなので、消してしまいましょう!!!
その部分に、新たなスタイルを追加します。

<a href="http://*******.exblog.jp/"><IMG SRC=http://pds.exblog.jp/pds/*****************.jpg
WIDTH=*** HEIGHT=***>



*<a href="http://*******.exblog.jp/">はブログURLを入れます。

*<IMG SRC=http://pds.exblog.jp/pds/*****************.jpg
WIDTH=*** HEIGHT=***>

コチラはマイイメージ登録をした、先程の画像URLです。(タイトルを作りましたよね!)



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

<CENTER>


<DIV ID=TOP>
<DIV CLASS=HEADER><a href="http://********.exblog.jp/"><IMG SRC=http://pds.exblog.jp/pds/**********/DSC_9216_Copy_1_****
WIDTH=*** HEIGHT=***></DIV>

<DIV CLASS=URL><$blogurl$></DIV>




*注意!!!!!
今回は「HTML編集」を弄くりました。
「HTML編集」........この部分を投稿しようと本文内に記入すると、ブログの記事に反映してしまいます。(大汗)

ですので.............



<DIV ID=TOP>
<DIV CLASS=HEADER><a href="http://********.exblog.jp/"><IMG SRC=http://pds.exblog.jp/pds/**********/DSC_9216_Copy_1_****
WIDTH=*** HEIGHT=***></DIV>

<DIV CLASS=URL><$blogurl$></DIV>




<DIV ID=TOP>などの、最初の「<」は半角「<」に修正をして下さい。

例)  <*******> こうなっているので、<*********> このようにします!!!
 全部そうなっていますので、修正をして下さい..........スミマセン。










*CSS編集部分で高さと幅を指定しておきました。(一応........スイマセン素人なもので;号泣)


DIV#TOP {
BORDER-BOTTOM : 10PX #D2B48C SOLID;
MARGIN-BOTTOM : 30PX;
WIDTH:900px;HEIGHT:366px;
TEXT-ALIGN : LEFT;
}


*WIDTH:900px;HEIGHT:366px;と言う部分を新たに追加しました。





*はい!以上です!!!
こちらの方が、簡単なような気がします。
宜しければチャレンジしてみて下さい。




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

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

[PR]
by y-sakanaya | 2007-07-27 10:14 | スキン編集
ブログの背景に「画像」又は「写真」を挿入しましょう!
*本日は、ブログの背景(ページ)に画像を挿入します。




最初にCSS編集のコノ部分を探します。

/* excite blog skin css */

BODY{ BACKGROUND : #151515; MARGIN : 30;PADDING : 0; }
BODY,TD,DIV,LI{ FONT-SIZE : SMALL; FONT-FAMILY : VERDANA,ARIAL,SANS-



*最初の部分ですね!

BODY{ BACKGROUND : #151515; MARGIN : 30;PADDING : 0; }


*コノ部分にスタイルを追加します。

BACKGROUND-IMAGE :URL(http://pds.exblog.jp/pds/1/200707/23/92/[1]**********.jpg) ;
BACKGROUND-ATTACHMENT:FIXED;
BACKGROUND-REPEAT:NO-REPEAT;
BACKGROUND-POSITION: CENTER;


*コチラを加えますよ!
このようになります。

BODY{ BACKGROUND : #151515; MARGIN : 30;PADDING : 0;
BACKGROUND-IMAGE :URL(http://pds.exblog.jp/pds/1/200707/23/92/[1]********.jpg) ;
BACKGROUND-ATTACHMENT:FIXED;
BACKGROUND-REPEAT:NO-REPEAT;
BACKGROUND-POSITION: CENTER;}



*BACKGROUND-ATTACHMENT:FIXED;は写真など、スクロールしても固定されて見えます。
FIXEDの部分をSCROLLにすると、写真も一緒にスクロールしますよ!


*BACKGROUND-REPEAT:NO-REPEAT;は写真の繰り返しです。
コレをしないと、サイズの小さい写真では何枚も表示されてしまいます。
それはそれで面白いかもしれません。
NO-REPEATの部分を下のアルファベットに置き換えてみて下さい。


REPEATは写真などを繰り返して表示。

REPEAT-Xは横に繰り返して表示。

REPEAT-Yは縦に繰り返して表示。

NO-REPEATは繰り返して表示しません。





*BACKGROUND-POSITION: CENTER;}は写真や画像の位置を指定します。

CENTERの部分を変えて、位置を決めます。


LEFTは左に配置。

RIGHTは右に配置

CENTERは中央に配置

TOPは上に配置。

BOTTOMは下に配置。


*組み合わせも出来ます!

RIGHT TOPにすると右上に配置します。
単語の間には半角スペースで区切って下さいね。



あっ!!!!背景に使う写真や画像は、背景色に合わせた方が良いと思います。

背景が黒でしたら、使う画像や写真の背景も黒.......白でしたら白みたいな感じです。




はい!以上です!!!








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

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

[PR]
by y-sakanaya | 2007-07-24 10:44 | スキン編集
ぬはっ!本文の背景........インパクトがぁ!!!見難い!?
むむっ.........本文の背景に画像を..........


見辛いですかね。(大汗)
とりあえず、このままにしておきます。(爆汗)
[PR]
by y-sakanaya | 2007-07-22 22:53 | スキン編集
タイトル文字の移動と文字の太さ(ウエイト)の変更。
*タイトルの文字を移動してみます。
続けて、文字の太さも変更しますよ!!!



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




DIV.HEADER {
FONT : BOLD 22PT/100% Courier New,TAHOMA;
}

DIV.HEADER A:LINK {COLOR: #000; TEXT-DECORATION: NONE}
DIV.HEADER A:VISITED {COLOR: #000; 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;
}




*この中からココを弄ります。

DIV.HEADER {
FONT : BOLD 22PT/100% Courier New,TAHOMA;
}



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

FONT-SIZE : 50PX; FONT-FAMILY:serif,Courier New,TAHOMA; FONT-WEIGHT:BOLD;
TEXT-ALIGN : CENTER;


*「FONT」内をわけてみました。

FONT-SIZE : 50PXは文字の大きさ
FONT-FAMILY:serif,Courier New,TAHOMAは文字の種類
WEIGHT:BOLDは文字の太さ
TEXT-ALIGN : CENTERは文字の位置です。


*WEIGHT:BOLDは文字の太さ

文字の太さを説明します。

NORMAL=普通

BOLD=太く

BOLDER=もっと太く

LIGHT=細く

LIGHTER=もっと細く


私のPCではBOLDEとBOLDは一緒の大きさのような気がします。(大汗)
(LIGHTとLIGHTERも..........)




*TEXT-ALIGN : CENTERは文字の位置

位置の説明です。

LEFT=左に

CENTER=中央に

RIGHT=右に





*最後に「ブログURL」も移動しましょう!

この部分を弄ります

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

*ココに新たなスタイルを加えますよ!

TEXT-ALIGN : CENTER;

コチラを加えます。(先程と同じような感じです)



*このようになります!

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


はい!OK!!「中央」にURLを移動しました。





以上です!お疲れ様でした!!!




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

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

[PR]
by y-sakanaya | 2007-07-22 12:22 | スキン編集
記事と記事の間に「線」を入れます。
最初に「CSS編集」のこの部分を探します。



DIV.POST_TAIL {
FONT : 8PT/150% TAHOMA;
MARGIN-TOP : 10PX;
TEXT-ALIGN : RIGHT;



コレの最後に追加します。

PADDING-BOTTOM: 20PX;
BORDER-BOTTOM-WIDTH : 3PX;
BORDER-BOTTOM-STYLE: DOUBLE;
BORDER-BOTTOM-COLOR: #D2B48C;


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

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



*少し付け加えて説明します。

BORDER-BOTTOM-WIDTH : 3PX;
BORDER-BOTTOM-STYLE: DOUBLE;
BORDER-BOTTOM-COLOR: #D2B48C;


こちらの「3PX」の部分は、線の太さです!
「DOUBLE」は二重線です。
例)
DOTTEDは点線
DASHEDは破線
SOLIDは実線です。

「#D2B48C」の部分は色指定です。




*プレビューを押して、確認をしてみて下さいね!



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

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

[PR]
by y-sakanaya | 2007-07-22 12:01 | スキン編集
あぁ..........どうでしょう!?
c0114492_10421087.jpg



*Mac「Safari」ではこのように見えます。

Windowsではどのように見えますでしょうか!?..........どこか崩れていたりいますでしょうか!?
(心配です........笑&汗)

tyuuka-syubouさんへ
[PR]
by y-sakanaya | 2007-07-21 10:45 | スキン編集
タイトル文字の大きさと文字色の変更
さぁ!始めます。




*タイトルの文字の大きさを変更します!

CSS編集の、次の部分を探します。





『DIV.HEADER {
FONT : BOLD 22PT/100% Courier New,TAHOMA;
}

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


この部分の『FONT : BOLD 22PT/100% Courier New,TAHOMA;』を弄ります。
前回、「タイトル文字のフォント」を変えた部分です。

この部分に『FONT : BOLD 22PT』とあります。
22PTの数字を変えます。
私は「33PT」にしました!(PXでも構いません、大きさが異なります)






*次に文字色(カラー)です!!


『DIV.HEADER A:LINK {COLOR: #000; TEXT-DECORATION: NONE}
DIV.HEADER A:VISITED {COLOR: #000; TEXT-DECORATION: NONE}
DIV.HEADER A:HOVER {COLOR: #888; TEXT-DECORATION: NONE; BORDER-BOTTOM: 1PX SOLID #FFF}』


ココを弄ります。


現在は「黒(#000)」です。
カーソルを乗せると「灰色!?(#888)」に変わります。
ですので、色を指定しましょう!!!

『DIV.HEADER A:LINK {COLOR: #000; TEXT-DECORATION: NONE}』

#000の部分を赤するのでしたら「#FFF」

『DIV.HEADER A:LINK {COLOR: #FFF; TEXT-DECORATION: NONE}』
このようになります。



*『DIV.HEADER A:VISITED {COLOR: #000; TEXT-DECORATION: NONE}』

次の箇所も「#000」を「#FFF」に変更。(ココまでは同じ色にします)



*最後の行

『DIV.HEADER A:HOVER {COLOR: #888; TEXT-DECORATION: NONE; BORDER-BOTTOM: 1PX SOLID #FFF}』


ここはカーソルを乗せた時に色を変えたいので、違う色にします。
「#888」の部分を「白(#FFF)」にします。

アンダーラインは「BORDER-BOTTOM: 1PX SOLID #FFF」の部分の「#FFF」 。
白なので、お好きなカラーコードを入れます。(例 #FFFF00)←黄色です。

「1PX」の数字を変えると、アンダーラインの太さが変わります。
「5PX」など、結構太いです.........






このような感じで、変更をしてみて下さい。


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

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

[PR]
by y-sakanaya | 2007-07-21 10:22 | スキン編集
タイトルの文字を変えてみます!

『DIV.HEADER {
FONT : BOLD 22PT/100% Courier New,TAHOMA;
}』


*CSS編集の、上記!この部分を探します。


『Courier New,TAHOMA』の前に『serif,』を加えますよ!!


*このようになります。
(コピペしても結構です『』は抜いて下さいね!)

『DIV.HEADER {
FONT : BOLD 33PT/100% serif,Courier New,TAHOMA;
}』


*Courier New,TAHOMA;を残しておくのは、もしかしたら「serif」(明朝体)がパソコンに入っていない方の為です。(殆どのPCには、明朝系は入っていますね;大汗)


明朝系は「serif」
ゴシック系は「sans-serif」
筆記系は「cursive」

とりあえず、見せたいフォントを優先的に並べると良いですよ!

例) cursive,serif,Courier New,TAHOMA;

*必ず「,」で区切りを付けて下さいね!!!

私のPCでは「筆記体」は表示されません........号泣
明朝系にしています。





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

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

[PR]
by y-sakanaya | 2007-07-21 09:52 | スキン編集
エキサイトブログの「タイトル」に画像を挿入しましょう!(スキン編集です)
本日は、スキン編集をしたいと思います。


タイトルの背景に「画像」を挿入します!!!




「CSS編集」で出来ますが、私のPCがMacなので、Windowsの場合の画面がわかりません........大汗

*私のPCでは上手くいったのですが、スキン編集......あくまでも自己責任と言う事でお願い致します。

「HTML編集」と「CSS編集」を最初に「コピー」しておく事をオススメします!








*それでは!始めましょう!!




c0114492_205491.jpg
*最初に「設定」→「スキン変更」をクリックします!
「HTMLベーシック」を選びました。
「編集」をクリックします。





c0114492_2055253.jpg
*色は「ホワイトホワイト」..........。





c0114492_20563864.jpg
*私は横幅「横幅900px」の写真を使いましたので、コチラでブログのサイズを変更します。
(最終的に幅が合いませんでしたが、調整しました!後で補正が出来ます)





c0114492_2058043.jpg
*「本文横幅」を750pxに設定しました。





c0114492_20585369.jpg
*次に「画像」を登録します!
マイイメージアカウントにイメージを登録をクリック!

タイトルに使用したい「画像」を「マイイメージ登録」をします。(コレは大事です!)
画像ソフトでサイズを調整して下さい。
注)違う「タイトル画像」の方法もあります!近々Upしますね!!





c0114492_2059842.jpg
*私がイメージ登録した画像です。
http://pds.exblog.jp/pds/1/200707/18/92/DSC_0015_Copy.jpg
WIDTH=900 HEIGHT=380

コチラが表示されます!このURLをコピーしますよ!






c0114492_20592377.jpg
*CSS編集のこの部分を探して下さい!
上の方にあります。





c0114492_2059408.jpg
*こんな感じで追加します。

追加した部分は......

BACKGROUND:#FF0000 url(http://pds.exblog.jp/pds/1/*******/18/92/DSC_0015_Copy.jpg); no-repeat;



注!)「http://pds.exblog.jp/pds/1/200707/18/92/DSC_0015_Copy.jpg
WIDTH=900 HEIGHT=380」の「WIDTH=900 HEIGHT=380」は削除して下さい!
正しく画像が出ません.........多分........私が未熟かなぁ〜大汗)

後ほど新たに「横幅」と「高さ」を指定追加します!!!


*........#FF0000は、もしも画像が出ない時に「色」をブログに出す保険です。
(#FF0000は赤ですよ!バックの色が:白:なので#FFFFFF←白のコードが本当は良いです。)





c0114492_20595248.jpg
*あはっ!高さ「HEIGHT」が合っていません........画像が切れています。(大汗)
高さ「HEIGHT」を指定します!!!





c0114492_2101011.jpg
*一応..........「横幅」も指定しました。



DIV#TOP {BACKGROUND:#FFFFFF url(http://pds.exblog.jp/pds/1/200707/18/92/DSC_0015_Copy.jpg); no-repeat;
BORDER-BOTTOM : 5PX #CC0000 SOLID;
MARGIN-BOTTOM : 30PX;
         * 〜この間〜*
TEXT-ALIGN : LEFT;
}


上記のところにWIDTH:900px;HEIGHT:380px;を追記します!





c0114492_2102458.jpg



*はい!こんな感じで!「画像」を挿入出来ました!!!!!


タイトルの「フォント」と「トップ/投稿/設定」の色は次回に..........
&URLの色も........大汗








*最後に...........この大きさのタイトル画像(900px)ですと、本文とロゴ、メニュー欄の合計サイズが合いませんでした。(大汗)

「WIDTH:900px;HEIGHT:380px;」の部分を「WIDTH:980px;HEIGHT:380px;」にするとバッチリ!合いましたよ!!!
(私のPC環境ですが.......Macです:大汗)

本文部分とロゴ&メニュー欄の間が「50px!?」あるのですね..........その他も!?(滝汗)
難しいです。(号泣)



<追記>
タイトル画像を横幅900から880にしてみました。
[PR]
by y-sakanaya | 2007-07-18 21:05 | スキン編集