タイトルに画像を挿入 # 18,Dec,2006 Monday - 13:58 # |[ブログカスタマイズ]テンプレート

タイトルに画像を挿入します。
これをやるとブログに魂が入った感じがしますね（ｗ

やり方はいつも通りに、
管理画面
↓
管理画面の設定
↓
[テンプレート作成/編集]の方式でテンプレートメーカ使用を選択
↓
テンプレート作成/編集
↓
TOPブロックの背景画像部の参照ボタンから画像を選択
↓
HTML編集のプレビューで確認してOKだったら、画像をアップロード（上部のボタン）

配置位置等は、後から編集できます。

このままだと、タイトルやサブタイトル（説明書き）が表示されたままです。

それで良い人は、いじる必要がないのですが、私の場合はみっともないので消します。
消し方は以下のようにスタイルシートに追記します。

/*ページタイトル文字部分の設定*/
#TopTitle {
padding: 10px 0px 0px 20px;
font-size:12px;
display:none;
}

--中略--

/*ページタイトルの下に来るブログの説明文書*/
#TopExplanation {
padding: 10px 0px 0px 20px;
display:none;
}

これで、タイトルやサブタイトルは消せます。

ただ、このままだとタイトルのブログへのリンクが切れた状態です。

タイトル画像を自分のブログにリンクさせるには、HTMLを書き換えてリンクを復活させます。

手順は、

<div id="TopTitle">
<a href="<!--$g_url-->">
<span class="TopTitleFont"><!--$g_title--></span>
</a>

青い部分を削除して、以下の用に記述します。

<img src="http://file.○○○.shinobi.jp/△△△.gif" border="0">

○○○は自分のファイルアップロード先のアドレス、△△△はタイトルに使いたいファイル名（このブログはgif形式のファイルを使ってますので拡張子はgifです）です。

スタイルシートで背景を設定したのではなく、HTMLでタイトルの位置に画像を置いただけです。
先ほどのスタイルシートのpaddingの値を修正しないとズレます（ｗ

/*ページタイトル文字部分の設定*/
#TopTitle {
padding: 0px 0px 0px 0px;
font-size:12px;
(display:none;)　※1
}

※1･･･今度は画像を見せなければいけないので、この部分は削除

これでOKです。