この講座にそってgeeklogをカスタマイズをしてきた場合を例にすると、
現在はこのようなヘッダーになっています。
今回は、このオリジナルロゴマークを450pixel×60pixelの画像に変更してみたいと思います
【ヘッダーロゴの変更とCSS調整】
１、ヘッダー画像を置き換える
このサンプル画像をgeeklogのオリジナルロゴマークと置き換えます。
①
FTPソフトを使って/htdocs/layout/adeliaebiz_cool/images/customに画像をアップします。
アップしたファイルの名前を、ここでは「450-60.gif」として説明していきます。
※参考サーバーは概要と必要な環境で紹介したオビタスターです
※geeklogのテーマはgeeklogテーマの変更でインストールしたしたadeliaebiz_coolです
②
管理者専用メニューから≪テーマエディタ≫をクリックし、
編集中のテーマを選択してから「ヘッダ」を選びます。
真ん中辺に、次のように書かれている場所があるので、太字のところを変更します
<!-- ヘッダコンテナ -->
<div id="header">
<p class="site_slogan"></p>
<h1 class="site_name"><a href=""><img src="/images/custom/logo.gif" width="134" height="49" alt=""></a></h1>
logo.gifのところに、先ほどアップした画像のファイル名（例として450-60.gif）を、
また、今回のサンプルは450×60pixelのサイズなので、134を450に、49を60にそれぞれ変更します
画像は変更されたのですが、下の部分が切れていますね・・・
これはheight="49"をheight="60" にしたため、11pixel画像が高くなっているからこうなってしまいます。
【Ａ】の幅（高さ）を変えなくてはなりません。
③
テーマエディタの編集するファイルを custom.css にして、少し下げるとこのようなタグがあります
/*----- ヘッダコンテナ -----*/
div#container div#header {
position: relative;
height: 121px;
画像の高さは49から60（プラス11）に変わったので、
コンテナの高さは余裕をつけて121を145（プラス24）にしてみます。
同じように、グローバルナビゲーションの位置もプラス24下げましょう。少し下の
/*-- グローバルナビゲーションコンテナ --*/
div#container div#navigation {
position: absolute;
top: 74px;
の74というところも98に変更して≪保存≫をクリックしましよう。
新しいロゴ画像がきっちりと納まりましたね。しかし、右の方になにやら隠れているようです。
これはサイト内を検索するためのものですが、デフォルトでサイドバーに設定されているのに
なぜ表示されているのでしょう・・・
必要無いのでこのエリアを非表示にしましょう。（クリックすると画像は拡大します）
④
もういちどテーマエディタ「ヘッダ」を選択して、下図の位置にHTMLのコメントアウトタグを配置しして≪保存≫しましょう
コメントアウトタグとは、その二つで挟まれた間を無効にするものです。
コピペ用コメントアウトタグ：上の部分⇒ <!-- 下の部分⇒ -->
geeklogヘッダーロゴマークの変更が完成しました。
同じような要領で、自分の好きなロゴマークに変更してください。
クリックすると画像は拡大されます
次のステップへ ≫【geeklogサイドバーのカスタマイズ】
最終更新日： 2011年1月30日(日) 09:48 JST|1,125 閲覧件数 
yuki
himawari
