ためしにこのブログの左上にも表示させてみましたが
今日はWEBページ上の任意の場所にバッジのような画像を表示させる方法です。
ブログにバッジを表示させる方法
-
まず画像を用意しましょう。画像は 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も使えますが周囲がギザギザになってしまうのんですよね。ページ背景との兼ね合いもあるのでなんとも言えませんが。。。
四角い画像ならなんら問題ないので季節の写真でも入れてみますか(笑)
もうひとつの方法
今回は背景画像としてバッジを表示させましたが、投稿内の画像と同じように画像を直接表示させてその画像に別サイトへのリンクを張ることもできます。
私のExblog で右上に表示されている画像をクリックすると今日のこの投稿にジャンプするようにしています。
追記2008-10-15
スキンを大幅に変更したので現在の私のexblogではこのカスタマイズ結果はご覧になれません。応用したものはページに左側に残してあります。
追記2009.4.18
左下に表示させる方法を Exblog に投稿しました。
ブラウザの左下に画像を固定する方法:Exblog Customize
当ブログでの関連したコメントはこちらです。
コメント