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

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

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 | スキン編集
<< 田舎の地酒研究所さんへ。 ブログの背景に「画像」又は「写... >>