iBlog
バナーに画像を使う方法
MLなどで質問が上がっていますが
意外と扱われていないようなので、簡単ですが紹介してみます。
分かる人には簡単すぎてエントリになっていないのでしょうかね。
ComComでもスルーしてました。(笑）
★
方法その1（タイトルテキストを画像の上に表示する場合）
1.当然ですが、タイトル用の画像を用意して
Blogサイトのどこかに適当なフォルダ（imagesなど）を作って
そこにアップしておきます。
2.CSSファイルを編集します。
CSSファイルは
ユーザ/Application
Support/iBlog/Stylesheetsにあるので
使うCSSを直接テキストエディタで編集します。
（ユーザはお使いのユーザ名です）
#banner
{
font-family:verdana, arial,
sans-serif;
color:#008000;
font-size:medium;
font-weight:normal;
padding:15px;
background:#ccff66;
text-transform:none;
letter-spacing:
.2em;
background-image:
url(画像までのパス);
background-repeat:
no-repeat;
}
の中にオレンジ部分のように追加して下さい。どこでもいいです。
画像までのパス 例（http://hagemasu.com/images/title.jpg)
httpから始まる、絶対パスでの記述のがいいです。
このように、バナーエリアに背景画像として入れてしまうのがポイントです。
そのままでは、エリア内に並んでしまいますので
繰り返したくない場合は
background-repeat:
no-repeat; を追加してください。
padding:15px; の値を変えて幅や余白などお好みにあわせて下さい。
Blogメニューよりリセット後プレビューで確認して下さい。
（ネット接続状態でないと画像は見れません）
以上でできあがり〜 簡単です。
-------------------------------------------------------------
方法その2（タイトルテキストを画像の上に表示しない場合）
1.タイトル用の画像を用意して
Blogサイトのどこかに適当なフォルダ（imagesなど）を作って
そこにアップしておきます。
2.テンプレートファイルを編集します。
テンプレートファイルは
リソースメニューからテンプレートの管理を選択して
新規テンプレートセットで新しくテンプレートを作成します。
出来たテンプレートファイルの6種類全部を編集します。
<div
id="banner">
〜〜〜略〜〜〜
</div>
となっている部分を
<div
id="banner">
<img
src = "画像までのパス"
width="幅" height="高さ" border="0" alt="Titleimage"
/>
</div>
画像までのパス 例（http://hagemasu.com/images/title.jpg)
httpから始まる、絶対パスでの記述のがいいです。と直接画像を指定してしまいます。
Blogメニューよりリセット後プレビューで確認して下さい。
（ネット接続状態でないと画像は見れません）
以上です。
上記でたいていいいと思いますが、うまく行かない場合は質問して下さい。
