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

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


  • 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 | カスタマイズ

Exblogからトラックバックのテスト

管理人が自分でトラックバックのテストをしています。
スルーしてください。

Beach Resort Photoclip 管理人のトラックバックテスト

強力なスパムフィルターを入れているので WordPress で構築されたブログ以外のトラックバックをことごとくはじいてしまうみたいだ。

とりあえずプラグインを無効にしてみた。

Pocket Frogs、なんちゃって改め「明日のカエル交配システム」 ::: 東南アジアのリゾートホテル写真集 | Beach Resort Photoclip
[PR]

# by photoclip | 2011-02-08 21:47

Twitterのブログパーツ登場したんだ

近頃、放置気味のエキサイトブログでありますが
いつのまにかTwitterのブログパーツが登場していたんですね。
。。。きっと多くの要望が寄せられたのでしょうね。

@+IDのつぶやきを
「表示する」「表示させない」が選択できたらもっといいのに(つぶやきw)

私の活動拠点はこちらです(^^;)

e0131412_1730255.jpg

» Home | 東南アジアのリゾートホテル写真集+Blog
» Exblogのカスタマイズ集 | 東南アジアのリゾートホテル写真集+Blog
[PR]

# by photoclip | 2010-07-30 17:23

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

左下に「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 | カスタマイズ

Tacogle Earth

e0131412_953169.jpg


e0131412_9532350.jpg


e0131412_9533673.jpg

[PR]

# by photoclip | 2009-04-14 09:57 | 凧写真