またまたブログカスタマネタ・・。
開設したてはいろいろ気になっちゃうんですよね・・。
で、今回気になったのはヘッダ。

ナチュラムさんのブログでは最上部にヘッダが表示されます。
blog@naturumのロゴだったりちょっとしたお知らせが表示されるやつです。

こやつが表示されること自体は全然気にならないのですが、気になるのはその幅。
ブログの表示領域からはみ出して横イッパイに表示されます
このはみ出しが気になる気になる・・。



早速テンプレートをカスタマイズしました。
元テンプレートは例のごとく「期待膨らむ大物釣り(3カラム)」です。

まずはスタイルシートでブログの幅を確認。

#container{font-size:12px;
width:760px;
background-color:#ffffff;
margin:0px auto;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-top-color: #CCCCCC;
border-right-color: #CCCCCC;
border-bottom-color: #CCCCCC;
border-left-color: #CCCCCC;
text-align:left;
}

760pxの模様。
これを覚えておいて、次に「トップページ」「個別記事」「アーカイブ」の各HTMLから下記記述を探します。

<iframe src="/template/blog_header.html" width="100%" height="29"frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>

ここの width="100%" を width="760px" に変更して完了

スッキリ  

トップ画像は変更したけど、記事タイトルのアイコンが船（「期待膨らむ大物釣り(3カラム)」のデフォルトアイコン）のまま。
私、お金かかるので船釣りはやりません・・。

変えたい・・モーレツに変えたい・・。
早速スタイルシートを眺めてみる。
今度はgifで検索をかけていくと・・・ありました、怪しい箇所！

.title{
color:#191970;
font-size:12px;
font-weight:bold;
height:20px;
background-repeat: no-repeat;
background-position: left;
padding-left: 55px;
padding-top:10px;
background-image: url(http://admin.naturum.ne.jp/_img/fishing04/entry_icon04.gif);
background-position:1px 1px;
}

早速、使えそうな釣り関連のフリー素材をネットで探してみると・・・見つけました。

猫と釣り人

他にもたくさんのサイトがありましたが、私的にはここが一番でした。
で、シーバスの画像をダウンロードしてちょっと大きさを小さくしてからアップ！

次に、スタイルシートの上記箇所の"http://admin.naturum.ne.jp/_img/fishing04/entry_icon04.gif"を"/usr/kichi/xxx.gif"に変更。
※"kichi"は本ブログのID（？）です。
※"xxx.gif"はアップした画像の名前です。

バッチシ変更できました
  

さて、とりあえず一発目のブログ記事をアップしてひと段落・・

が、ソフト開発業を生業とする私としてはどうしてもブログをカスタマイズしたくなる・・。

ふむ・・まずはトップ画像を変えてみよー


管理画面のメニューから「テンプレート」を選択して・・・、
"使用中"になっているテンプレートの「カスタマイズ」を選択して・・、
すると、「テンプレートのカスタマイズ」画面が表示されて、使用されているスタイルシートやらHTMLが表示された。

よっしゃよっしゃ、ここをイジればいいんだな・・。
トップ画像は当然jpgだろうから検索かけたりして眺めていくと、スタイルシートに下記のような記述があった。
※ちなみに、使用していたテンプレートは「期待膨らむ大物釣り(3カラム)」です。

#banner,#subbanner{
background:#fff url(/_img/fishing04/fish004.jpg) left;
padding:0px 0px 0px 0px;
height: 220px;
}

怪しい・・。
ひとまず自分のブログのURLと上記の"/_img/fishing04/fish004.jpg"を繋げてブラウザからアクセスしてみると・・・ビンゴ！
現在のブログのトップ画像が表示された。

早速、手持ちのデジカメ写真を物色して適当な画像を探す。
で、現在のトップ画像の大きさと同じになるように写真を加工してからアップ！

次に、スタイルシートに記述されていた"/_img/fishing04/fish004.jpg"を"/usr/kichi/xxx.jpg"に変更。
※"kichi"は本ブログのID（？）です。
※"xxx.jpg"はアップした写真の名前です。

早速自分のブログを表示してみると・・・・バッチシ
※ちなみにプレビュー表示だと写真は表示されません。

自分のブログを眺めながらひとしきりニヤニヤした後、なんとなくナチュラムのブログサイトを見ているとこんなものを発見！

教えて！blog@naturum

まさか、と思って見てみると・・・ありました・・ほぼ同じ内容の記事・・

まぁ、こんくらいのカスタマならふつうどっかに情報ありますよねぇ・・。
でも悔しいからトラバしとこ・・。


2008年5月19日追記：

今気が付いたのですが、この方法だけだとトップ画像の右下あたりに"http://www.naturum.co.jp/"へのリンクが残ってしまいます。
見た目には何もないのですがその辺りにマウスカーソルを持っていくとカーソルが手の形になります。

これを消すには、テンプレートのカスタマイズから「トップページ」「個別記事」「アーカイブ」の各HTMLから下記記述を探し出して削除（またはコメント化）します。

<div class="logo">
<a href="http://www.naturum.co.jp/">
<img src="img/spacer.gif" alt="アウトドア＆フィッシングの専門店ナチュラム" />
</a>
</div>