エキサイトブログ (Exblog) のプチカスタマイズ #6

［最終更新日］2009年4月18日

ためしにこのブログの左上にも表示させてみましたが
今日はWEBページ上の任意の場所にバッジのような画像を表示させる方法です。

Exblog の投稿 : [カスタマイズ] ウィンドウの角にバッジを入れる
Exblog に投稿してある内容もあわせてお読みください

ブログにバッジを表示させる方法

まず画像を用意しましょう。画像は jpg、gif、png が使えますが、Exblog の「マイイメージアカウントにイメージ登録」には jpg と gif しかアップロードできませんので png を使いたい場合は別のサーバーへアップロードが必要になります。
今回は画像の作製にバッジのジェネレーター（バッジをWEB上で作れるサイト）を利用してみました。

Web 2.0 Badges - Useful collection of stylish web 2.0 badges and badge generator

使い方は、右に並んだバッジから好きなものを選んだのちText、Font、Font Size等を指定、[APPLY] ボタンを押すと反映されますので、画像上で右クリックして「名前を付けて画像を保存」をクリックしてPCのデスクトップなどに保存します（画像はjpgでした）
ちなみにFirefoxの「名前を付けて画像を保存」では保存できませんでした。
なお現在は見た目優先でjpg ではなく透過 gif 画像に差し替えてあります。

スキン変更のページにアクセスし1.で用意した画像を「マイイメージアカウントにイメージ登録」のリンクをクリックしアップロードします。アップロード後、[イメージURLコピー] ボタンを押して画像のURLを表示させコピーします。
あとでCSS に貼り付けますのでテキストエディターなどにコピペしておいてください。

次にHTML編集のテキストボックス内に表示されているHTMLの一番上に
```
<div id="badge"></div>
```
と、記述します。
なお青字の badge は別の文字列でも構いませんが、CSS （スタイルシート）に記述する文字列と一緒じゃないといけません。

次にCSS の最後に（別に最後じゃなくてもいいのですが、撤去するときにわかりやすいように最後としておきます）以下の記述を加えます。

#badge {
	position: absolute;
	top: 0;  /* 上からどのぐらいの位置に表示させるか、離したい場合は●● px と記述 */
	left: 0;  /* 左からどのぐらいの位置に表示させるか、右なら right と記述、離したい場合は●● px と記述 */
	width: 122px;  /* アップロードした画像の横幅 */
	height: 122px;  /* アップロードした画像の高さ */
	z-index: 99;
	background: url(http://pds.exblog.jp/pds/1/200809/30/12/badge.gif) no-repeat;
}

青字の badge が 3. で述べた「一緒じゃないといけない」と言った箇所です。
赤字の URL は 2. でコピーした URL を貼り付けてください。

表示させる位置はいろいろ変更出来ますので任意の数字に px （ピクセル）と付け加えて調整してください。

プレビューしてうまく表示されていたら保存して終了です。

HTML編集とCSS編集は簡単なので、問題は画像をどうするかですね。
Exblog の投稿にも書きましたが、Exblog は<head> 内をいじることができないので透過PNG画像を使った場合IE6（ブラウザ）ではちゃんと表示されません。透過GIFも使えますが周囲がギザギザになってしまうのんですよね。ページ背景との兼ね合いもあるのでなんとも言えませんが。。。
四角い画像ならなんら問題ないので季節の写真でも入れてみますか(笑)