東南アジアのリゾートホテル写真集+Blog.

カテゴリ:カスタマイズ( 12 )

右クリックを禁止するブログパーツを利用して画像を拡大する


  • 600×400 の画像をなにもせずに投稿内に表示させた場合


  • e0131412_1120395.jpg


    編集ページ上での記述:
    [IMAGE|e0131412_1120395.jpg|201105/02/12/|left|600|400]

    赤文字が元画像のサイズ。


  • 600×400 の画像を 200×133 (同じ縦横比) で表示させたい場合


  • e0131412_1120395.jpg


    編集ページ上での記述:
    [IMAGE|e0131412_1120395.jpg|201105/02/12/|left|200|133]

    青文字が縮小表示させたサムネイルのサイズ。

    青文字の数値を投稿内で表示させたいサイズに打ち替えれば縮小されて表示されます。

    注) 縦横比を元画像にあわせないと天地や左右が圧縮された状態で表示されます。また、元画像をリサイズして表示させているので、ファイルサイズが大きい画像は表示されるまでに時間がかかる場合があります。


右クリックを禁止するブログパーツの設定手順


なお、上記の画像周辺にある影は
スタイルシートを編集することで表示させることができます。
(ブラウザが Internet Explorer の場合は表示されません)

その詳しい手順は エキサイトブログ (Exblog) のプチカスタマイズ#9 ::: 東南アジアのリゾートホテル写真集 に載せてありますのでよろしければあわせてお読み下さい。
[PR]

by photoclip | 2011-05-02 12:11 | カスタマイズ

ブラウザの左下に画像を固定する方法

左下に「Blogだゾウ」という画像が表示されていると思いますが、この投稿ではその方法について説明していきます。タスクバーの画像も同じ方法でブラウザの一番下に表示させています。

IE7、Firefox、Safari、Operaは正常に表示されます。
Google Chromeは下に15pxほどの隙間ができます。
IE6 では表示されません。

それでよろしければ先へお進みください。

1. 画像を用意します。

ここでは
e0131412_1627243.jpg
こんな画像を用意しました。
width(横)105px、height(高さ)141pxの jpg 画像です。
画像のまわりにある枠は画像に含まれません。

2. スキン編集のページを開き [HTML編集] のところにある マイイメージアカウントにイメージ登録 というリンクをクリックして用意した画像をアップロードします。

e0131412_16374266.jpg

画像の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%;
}

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 である。


などです。

作業手順を何回確認しても間違いがないのに画像が表示されない場合はコメントしていただければ表示されない原因を確かめられるかもしれません。
[PR]

by photoclip | 2009-04-17 17:43 | カスタマイズ

ExblogでLightboxは使用不可

タイトルそのままですが、ExblogではJavascriptを自由に使うことができないためWEBページ上にオーバーレイをかけて写真や画像を表示させるLightboxは使うことができません。
極端なハナシ、<head> ~ </head> の部分をいじることができないので何もできないと言った方が正しいかも。
もし、Lightbox等を使いたい場合はfc2ブログもしくはlivedoorブログを利用されてみてはいかがでしょうか。

私が管理しているWEBサイト(東南アジアのリゾートホテル写真集)のアクセスログを見ていましたら検索キーワード 「exblog lightbox」 で立ち寄られた方がいらっしゃったようなのでこちらに投稿しておきました。
[PR]

by photoclip | 2009-04-11 13:02 | カスタマイズ

Tooltips (簡単な説明文) をポップアップさせる

リンクにマウスカーソルを乗せたとき簡単な説明文が表示されるようにする。

下記のリンク上にマウスカーソルを移動してみてください。

Beach Resort Photoclip 東南アジアの
リゾートホテル写真集とブログ


画像でも使えます。
東南アジアの
リゾートホテル写真集とブログ




※注意
書かれた場所、たとえば左端とか右端とか下ギリギリとかにリンクがあるとケラレてしまう(=Tooltips の一部分が欠けてしまう)こともあるようです。


手順はのちほど「東南アジアのリゾートホテル写真集のBlog エキサイトブログ (Exblog) のプチカスタマイズ #8」に投稿します。
[PR]

by photoclip | 2008-10-23 12:02 | カスタマイズ

PhotoshopCS3風スキン

2カラム右サイドバーの配置は変えずリニューアルしました。
いままでやったカスタマイズ

は似たような感じで残しています。

毎日Windows版CS3を使っている人は吐き気がするかも(笑)
[PR]

by photoclip | 2008-10-10 09:03 | カスタマイズ

[カスタマイズ] ウィンドウの角にバッジを入れる

ウィンドウの角にバッジが表示されるようにしてみました。
画像さえ作ってしまえばスキンにちょっと記述を加えるだけで済みます。

Exblogの「マイイメージアカウントにイメージ登録」はjpgとgifにしか対応していないのでpng画像はアップロード出来ません。
仮にPNG-24 の画像を使ってバッジの下に半透明の影を出したい場合は別のサーバーにアップロードしスタイルシート内にその画像へのURLを記述することになります。
あとIE6は透過PNG画像が正常に表示されないのでその点が気になる方は透過GIF画像を使うことになります。IE6で透過PNG画像が正常に表示されるようにする方法はあるのですが<head>内がいじれないので無視しました。

IE6で見た場合
e0131412_17434295.jpg

Firefoxで見た場合
e0131412_17441951.jpg


設置方法はのちほど「東南アジアのリゾートホテル写真集のBlog」に投稿します。
[PR]

by photoclip | 2008-09-30 17:54 | カスタマイズ

[カスタマイズ] 画像にオンマウスすると拡大

香港


写真上にマウスカーソルを持って行くとサムネイル画像が拡大するカスタマイズ。これはけっこう簡単にできます。
サムネイル画像自体が縦位置横位置に左右されないように(一定になるように)元画像を100pxの正方形に変形させています。
縦横100pxの画像のわりに画像が表示されるまで時間が掛かるのは元画像を読み込んでサムネイルを表示しているからです。

手順は エキサイトブログ (Exblog) のプチカスタマイズ #5 ::: 東南アジアのリゾートホテル写真集 に載せています。
[PR]

by photoclip | 2008-09-13 17:41 | カスタマイズ

写真に画像を使った枠をつけるカスタマイズ その2

中央に配置した写真のみ枠がつくようにしました。
e0131412_11471914.jpg

e0131412_165304.jpg

e0131412_16532426.jpg

手順はBeach Resort Photoclip:東南アジアのリゾートホテル写真集 + Blog の
エキサイトブログ (Exblog) のプチカスタマイズ #4+にアップしてあります。
[PR]

by photoclip | 2008-09-11 17:10 | カスタマイズ

写真に画像を使った枠をつけるカスタマイズ

e0131412_11471914.jpg


スタイルシートをちょっといじるだけで
上のように写真に画像を使った枠をつけることができます。
カスタマイズ方法はBeach Resort Photoclip のブログ上で。
[PR]

by photoclip | 2008-09-11 11:59 | カスタマイズ

最初はこんなスキン

e0131412_2081623.jpgかなり制約がありますが
いじれるところもそれなりにいじれるようです。
もうちょっとやります。
[PR]

by photoclip | 2008-02-08 19:48 | カスタマイズ