> >

設定

ブログバナーイメージの設定手順は次の通りです。

1. iBlog をブロガーモード(通常のモード)にする。
2. 左上の「ブログとカテゴリ」というペインにあるブログのフォルダをダブルクリックする。

   ブログの属性を設定するパネルが表示されます。その中に

   
   があります。
3. 「Choose Banner Image ...」ボタンを押してブログバナーイメージとして使用する画像ファイルを選択する。

   選択するとその画像の幅が「width」欄に、高さが「height」欄に、そしてプレビューが左の欄に表示されます。大きさを変更する場合は「width」欄と「height」欄にピクセル単位で値を指定してください。

4. 「保存」ボタンを押して変更をコミットする。

   ブログバナーイメージを未設定にするには「Remove Banner Image」チェックボックスにチェックを入れて「保存」ボタンを押します。

html ファイルへの反映

ブログバナーイメージが設定されるとテンプレートファイル BlogPage.txt の中の <$BlogBannerImage$> が次のように置き換えられます。

設定された画像ファイルが PNG ファイルに変換されてブログのプレビューフォルダに bannerImage.png として置かれます。width 属性や height 属性の値は上の設定で指定した値になります。

PNG ファイルに変換されてしまうのでアニメーション GIF はアニメーション効果が消えてしまいます。アニメーション GIF などその画像ファイルの形式に依存した機能が使用されている画像を設定することには不向きですので注意してください。

今回のバージョンアップではブログのトップページのテンプレートファイル BlogPage.txt にのみ <$BlogBannerImage$> が加えられています。他のテンプレートファイルで <$BlogBannerImage$> が使えるかどうかは調査していません。

表示への反映

iBlog のデフォルトのテンプレートセット LeftNavigation, RightNavigation では <$BlogBannerImage$> は body 要素の先頭にあり、その直後に id が banner になっている div 要素があります。このため表示は以下のようになります。

この例ではアイコンを設定してみたのですが、そうすると右側に余白ができてしまいます。ここは一定の幅がある画像を用いるのがよいでしょう。CSS で body 要素の幅をそれに合わせて指定しておけばページの最上位部で表示されるバナー画像となります。<$BlogBannerImage$> の位置をアレンジしてブログのイメージキャラクターなどのアイコンとして用いてもよいでしょう。

これまでバナー画像として割と多く見かけるのが banner ブロックの背景画像を用いる例です。淡色系の画像ならば問題ありませんが、濃い色が用いられているとそのブロックの文字が見えにくくなる場合があります。文字の大きさに合わせて文字が重なるところの色を調節しても、ブラウザで表示する文字の大きさはそのブラウザを使っている人の環境に依存するので、必ずしも効果があるわけではありません。バナー画像を用いるときはこの iBlog のデフォルトのように単独で表示した方がよいケースが多いかもしれません。