--
--
--

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
2008
02
06

『colorfree』に、ヘッダロゴ画像を入れる

『colorfree』のトップ部分を、「背景画像+ブログ名(テキスト)」から、ロゴ画像に変更する方法です。
ロゴ画像をクリックして、ブログトップへリンクするタイプ
ロゴ画像は300px以下くらいがお勧めです。⇒出来上がり見本

下記の部分を、ロゴ画像のタグに入れ替えます。

<!--not_permanent_area-->

<div id="header">
<div class="l"></div>

<h1><a href="<%url>" accesskey="0" title="「<%blog_name>」トップへ"><%blog_name></a></h1>

<p class="setsumei">
<!--date_area-->
≫<em class="point"><%sub_title></em>
<!--/date_area-->
<!--category_area-->
≫<em class="point"><%sub_title></em>
<!--/category_area-->
<!--search_area-->
≫<em class="point"><%sub_title></em>
<!--/search_area-->
<!--tag_area-->
≫<em class="point"><%sub_title></em>
<!--/tag_area-->

<!--titlelist_area-->
≫全記事一覧
<!--/titlelist_area-->

<!--not_date_area-->
<!--not_category_area-->
<!--not_search_area-->
<!--not_tag_area-->
<!--not_titlelist_area-->
<%introduction>
<!--/not_titlelist_area-->
<!--/not_tag_area-->
<!--/not_search_area-->
<!--/not_category_area-->
<!--/not_date_area-->
</p>
<div class="l2"></div>
</div>
<!--/not_permanent_area-->

上記の部分を、下記に入れ替えます。

<p style="text-align:center;"><a href="./" title="TOPへ"><img src="[http://(画像URL).gif]"></a></p>



ブログタイトル(文字)の背景に画像をつけるタイプ
閲覧ウィンドウのサイズを変えても差し支えのないヘッダ画像を探すのがなかなか大変かもしれません⇒出来上がり見本
○テンプレートHTML手直しその1

<!--not_permanent_area-->
<div id="header">
<div class="l"></div>

<h1><a href="<%url>" accesskey="0" title="「<%blog_name>」トップへ"><%blog_name></a></h1>

<p class="setsumei">
<!--date_area-->
≫<em class="point"><%sub_title></em>
<!--/date_area-->
<!--category_area-->
≫<em class="point"><%sub_title></em>
<!--/category_area-->
<!--search_area-->
≫<em class="point"><%sub_title></em>
<!--/search_area-->
<!--tag_area-->
≫<em class="point"><%sub_title></em>
<!--/tag_area-->

<!--titlelist_area-->
≫全記事一覧
<!--/titlelist_area-->

<!--not_date_area-->
<!--not_category_area-->
<!--not_search_area-->
<!--not_tag_area-->
<!--not_titlelist_area-->
<%introduction>
<!--/not_titlelist_area-->
<!--/not_tag_area-->
<!--/not_search_area-->
<!--/not_category_area-->
<!--/not_date_area-->
</p>
<div class="l2"></div>
</div>
<!--/not_permanent_area-->


○テンプレートHTML手直しその2

<!--permanent_area-->
<h2 class="btitle">
<a href="<%url>" accesskey="0" title="「<%blog_name>」トップへ"><%blog_name></a>
</h2>
<!--/permanent_area-->


○テンプレートスタイルシート一部削除(影部分の画像を削除)

h1{(略)
background:url(http://blog-imgs-23.fc2.com/m/a/n/manannan/colorfree-kage1000.gif) top left no-repeat;
(略)}


○テンプレートスタイルシート一部変更(説明部分の文字色)

.setsumei {color:#fff;}

「#fff」にはブログ説明の文字色の色コードを入れてください。
○テンプレートスタイルシート追加(ブログ名背景の追加、文字色調整、サイズ指定。最後にでも)

#header{background:url([画像URL]) center top;
height:350px;}
h1 a:link{color:#fff;}
h1 a:visited{color:#fff;}

「center」の部分は、画像左寄せなら「left」,画像右寄せなら「right」,画像中央寄せなら「center」にしてください。「#fff」にはブログタイトルの文字色の色コードを入れてください。
スポンサーサイト
Comment
 


管理者にだけ表示を許可する


Trackback
Trackback URL

«  | HOME |  »

Manannan Mac Lir

共有テンプレート


Tree-Recent


Tree-Comment


Tree-TB


カテゴリ


Tree-Arcive


CalendArchive


ブログ管理メニュー(新)


タグリスト(旧


ユーザータグ


テンプレート構造解析


フォーラムリンク


最新コメント


リンク


バナー貼


カテゴリ


画像一覧(月別)


ブログ内検索


プロフィール


Tree-LINK


RSSフィード


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。