2009年 04月 17日
ブラウザの左下に画像を固定する方法
左下に「Blogだゾウ」という画像が表示されていると思いますが、この投稿ではその方法について説明していきます。タスクバーの画像も同じ方法でブラウザの一番下に表示させています。
IE7、Firefox、Safari、Operaは正常に表示されます。
Google Chromeは下に15pxほどの隙間ができます。
IE6 では表示されません。
それでよろしければ先へお進みください。
1. 画像を用意します。
ここでは こんな画像を用意しました。
width(横)105px、height(高さ)141pxの jpg 画像です。
画像のまわりにある枠は画像に含まれません。
2. スキン編集のページを開き [HTML編集] のところにある マイイメージアカウントにイメージ登録 というリンクをクリックして用意した画像をアップロードします。
画像のURLをコピーしてテキストエディタ等に貼り付けておくか、メモしておいてください。
3. [HTML編集] に表示されているご自身のブログのHTMLの一番下に以下の記述をコピペして下さい。一番下じゃなくても大丈夫ですが、ブラウザ上に表示されている場所が下なので一番下にしておきます。
なお、HTML編集とCSS編集は必ず元のHTMLとCSSをコピーしてテキストエディタ等で保存しておきましょう。何かあったときすぐに元に戻せます。
test_da_zou というところの記述はアルファベットなら何でもOKです。たとえば左下にあるので left-bottom-image などとしてもいいかもしれません。
この赤字部分の記述は[CSS編集]でも使いますので覚えておいてください。
4. [CSS編集] に表示されているご自身のブログのCSS(スタイルシート)の一番下に以下の記述をコピペして下さい。元に戻すときにわかりやすいようにCSSの一番下に貼り付けておきましょう。
test_da_zou は手順3で指定した文字列と同じものを記述してください。違っていると画像が表示されません。
5. プレビューボタンを押して画像が表示されているか確認してください。画像が表示されない場合はどこか記述ミスがあります。もう一度最初からよく確かめてみましょう。
間違いやすいところは
などです。
作業手順を何回確認しても間違いがないのに画像が表示されない場合はコメントしていただければ表示されない原因を確かめられるかもしれません。
IE7、Firefox、Safari、Operaは正常に表示されます。
Google Chromeは下に15pxほどの隙間ができます。
IE6 では表示されません。
それでよろしければ先へお進みください。
1. 画像を用意します。
ここでは
width(横)105px、height(高さ)141pxの jpg 画像です。
画像のまわりにある枠は画像に含まれません。
2. スキン編集のページを開き [HTML編集] のところにある マイイメージアカウントにイメージ登録 というリンクをクリックして用意した画像をアップロードします。
画像のURLをコピーしてテキストエディタ等に貼り付けておくか、メモしておいてください。
3. [HTML編集] に表示されているご自身のブログのHTMLの一番下に以下の記述をコピペして下さい。一番下じゃなくても大丈夫ですが、ブラウザ上に表示されている場所が下なので一番下にしておきます。
なお、HTML編集とCSS編集は必ず元のHTMLとCSSをコピーしてテキストエディタ等で保存しておきましょう。何かあったときすぐに元に戻せます。
<div id="test_da_zou"><span></span></div>
test_da_zou というところの記述はアルファベットなら何でもOKです。たとえば左下にあるので left-bottom-image などとしてもいいかもしれません。
この赤字部分の記述は[CSS編集]でも使いますので覚えておいてください。
4. [CSS編集] に表示されているご自身のブログのCSS(スタイルシート)の一番下に以下の記述をコピペして下さい。元に戻すときにわかりやすいようにCSSの一番下に貼り付けておきましょう。
#test_da_zou {
background-image: url(ここにアップロードした画像のURLを記述する);
background-repeat: no-repeat;
position: fixed;
bottom: 0;
left: 100%;
width: 105px; /* 画像の幅 */
height: 141px; /* 画像の高さ */
margin-left: -100%;
}
background-image: url(ここにアップロードした画像のURLを記述する);
background-repeat: no-repeat;
position: fixed;
bottom: 0;
left: 100%;
width: 105px; /* 画像の幅 */
height: 141px; /* 画像の高さ */
margin-left: -100%;
}
test_da_zou は手順3で指定した文字列と同じものを記述してください。違っていると画像が表示されません。
5. プレビューボタンを押して画像が表示されているか確認してください。画像が表示されない場合はどこか記述ミスがあります。もう一度最初からよく確かめてみましょう。
間違いやすいところは
- アップロードした画像のURLが間違っている。ブラウザのアドレスバーにURLを貼り付けアクセスしてアップロードした画像がブラウザ上に表示されなければURLが間違っています。
- 手順4. のここにアップロードした画像のURLを記述する というところURLが間違っている。http:// から記述する必要があります。
- 手順3 と手順4 の test_da_zou という記述が一致していない。手順3. に書きましたが、別に test_da_zou じゃなくても構いません。ただし、CSS内ですでに使われている文字列はダメです。
- 使用しているブラウザが Internet Explorer 6.0 である。
などです。
作業手順を何回確認しても間違いがないのに画像が表示されない場合はコメントしていただければ表示されない原因を確かめられるかもしれません。
by photoclip | 2009-04-17 17:43 | カスタマイズ