「右クリックを禁止するブログパーツ」で画像を拡大

ちなみに以前投稿した手数の掛かる方法は記事はこちらです。
画像 (象) の上にマウスカーソルを移動すると写真が拡大されます。

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

公式ブログパーツ「右クリックを禁止するブログパーツ」で投稿内の画像を拡大させる手順

Demo

以下、拡大画像は連続して見ることができます。
画像上の右半分にマウスカーソルを移動し左クリックして下さい。

1. [ メニュー管理 ] → [ ブログパーツの管理はこちら ] をクリック

   

2. [ ブログパーツ一覧 ] をクリック

   

3. 「対応ブログパーツ一覧」のなかにある [ 右クリック禁止ブログパーツ ] をクリック

   

4. 「エキサイトブログ向上委員会 : ＜10/1追記あり＞右クリックを禁止するブログパーツをリリース」 の記事内中段にあるソースを左クリックしながら選択してコピー

   
   いちおう同じソースをここにも載せておきます。

   <script type="text/javascript" src="http://md.exblog.jp/js/rclick.js"></script>
   <ul>
   <li>このブログに掲載されている写真・画像・イラストを無断で使用することを禁じます。</li>
   </ul>

5. ブログパーツ管理のページに戻って手順 4. でコピーしたソースをテキストボックス内にペースト (貼り付け) して [ 登録 ] ボタンを押したのち、[ 保存 ]

   

   これでブログパーツの設置は完了しました。

投稿する際、画像を元画像よりも小さく表示させたい場合は画像サイズを指定しているタグ内にあるサイズ指定の数値を小さくすれば縮小されて表示されます。

注) 元画像をそのまま縮小表示させるためファイルサイズの大きな画像だと表示されるまでに時間が掛かることがあります。

あくまでも Lightbox 風な画像拡大表示であり、拡大画像を連続して見ることができないのがイタイところですね。

ただし、ブラウザのシェアの約半分を占めると言われているマイクロソフト謹製の Internet Explorer では再現されませんのでお気をつけください。

上の画像は Apple のオフィシャルサイト、 iPhone 4 に付いているカメラ機能についての説明ページをキャプチャーしたものですが、ページ中程の iPhone 4 フォトギャラリーに載っている写真にはすべて余白 (padding)、 細い線 (border) 、影 (shadow) がついています。
実際にご覧になりたい方は下記リンクからどうぞ。

» アップル – iPhone 4 – LEDフラッシュのついた5メガピクセルカメラで撮影する。

一部拡大するとこんな感じで。
(くどいようですが、ご覧のようにInternet Explorerでは再現されません)

これは一枚一枚画像加工を行って付けているものではなく、スタイルシートを使って余白 (padding)、細い線 (border) 、影 (shadow) が表示されるようにしています。

ということは、スタイルシート (CSS) が編集できるエキサイトブログ (Exblog) でも同じようにスタイルシート (CSS) に余白 (padding)、細い線 (border) 、影 (shadow) がつくような記述を追加すれば、、、まったく同じようなことができるということになりますね。

Demo とスタイルシートに追加する記述例 (Apple のサイトと同じ)

• 施工例



Demo

• スタイルシート (CSS) に追加する記述
  どこに追加したかすぐにわかるようにスタイルシート (CSS) の一番最後にコピペするといいと思います。表示が崩れた場合の修復もラクですし。

img.IMAGE_LEFT {
	padding: 8px;
	border: 1px solid #dadada;
	-webkit-box-shadow: rgba(0,0,0,0.5) 0 1px 7px;
	-moz-box-shadow: rgba(0,0,0,0.5) 0 1px 7px;
	background: #fff;
}
img.IMAGE_MID {
	padding: 8px;
	border: 1px solid #dadada;
	-webkit-box-shadow: rgba(0,0,0,0.5) 0 1px 7px;
	-moz-box-shadow: rgba(0,0,0,0.5) 0 1px 7px;
	background: #fff;
}
img.IMAGE_RIGHT {
	padding: 8px;
	border: 1px solid #dadada;
	-webkit-box-shadow: rgba(0,0,0,0.5) 0 1px 7px;
	-moz-box-shadow: rgba(0,0,0,0.5) 0 1px 7px;
	background: #fff;
}

青文字の LEFT、MID、RIGHT というのは画像アップロードの時に指定する画像位置で、

img.IMAGE_LEFT { ～ } と書かれているところは左寄せの写真に適用
img.IMAGE_MID { ～ } と書かれているところは中央揃えの写真に適用
img.IMAGE_RIGHT { ～ } と書かれているところは右寄せの写真に適用

するという記述になります。

したがって、最初の

img.IMAGE_LEFT {
	padding: 8px;
	border: 1px solid #dadada;
	-webkit-box-shadow: rgba(0,0,0,0.5) 0 1px 7px;
	-moz-box-shadow: rgba(0,0,0,0.5) 0 1px 7px;
	background: #fff;
}

だけ残し、それ以下の MID と RIGHT の記述を削除してスタイルシートに追加すると、左寄せの写真のみ余白 (padding)、細い線 (border) 、影 (shadow) が付き、中央揃えと右寄せの写真にはナニも変化が起こりません。

うまくいくかどうかは、どんなスキンでどんなスタイルシートを使っているのかにもよりますが、スタイルシートのバックアップを取ってから行えばさほどリスクのあるものではないので、よろしければお試し下さい。。。自己責任で

ホントにくどいようですが、Internet Explorer では見られません。

「だめだめブラウザなど使わずに Firefox、Safari、Google Chrome を使いましょう」と Internet Explorer 廃絶運動をしてみる

=== 以下、本投稿 ===

つい先日 Twitter (ツイッター) をはじめたので (遅すぎ? ) いろいろ検索していまして、Javascript も Flash も使えない Exblog (エキサイトブログ) にTwitter でのつぶやきを載せる方法はあるのか、ふと気になったので調べてみましたらありました。

TwitGIFは、Twitterのユーザー名を入力するだけであなたのつぶやきを簡単にアニメーションGIF形式のbadge（ブログパーツ）に変換してくれるジェネレーター

とのこと。

あっという間にこのようなアニメーション GIF を作ってくれます (クリックすると Twitter にジャンプ)

アニメーション GIF なので普通の画像と同じように扱えます。したがって Exblog でも使えるわけですね。目からウロコな方法、スバラシイ。

サイズも以下の 4 つが用意されているので載せる場所も選べます。

• Banner(W:468, H:60)
• OneLiner(W:468, H:30)
• SideBox(W:160, H:300)
• QVGA(W:320, H:240)

試しに私も自分の Exblog に貼ってみました。

• Live Demo : Exblog Customize

fc2ブログやlivedoorブログの場合

fc2 ブログや livedoor ブログをお使いの場合は、javascript が使えますので、Twitter にログインして [ 設定 ] → [ Web ] → (あなたのサイトにもTwitterを表示させよう) → [ 自分のサイト ] → [ Faves Widget ] で Widget の設定やサイズ、デザインなどを自分のブログに合わせコードを取得し、好きな場所に貼りつければ簡単に表示させることができます。

実際に Widget を貼ってみました。

• livedoor ブログ : ブログ研究所 – livedoor Blog（ブログ）
• fc2 ブログ : ブログ研究所

テンプレート内からサイドバーの場所や表示位置を正確に探し出すには多少知識が必要ですが、テンプレートのバックアップを取っておけば元に戻せますので Twitter のつぶやきをブログにも載せたいという方はチャレンジしてみてはいかがでしょうか。

「エキサイトブログで果たしてエキサイトするか#32008/2/7投稿
エキサイトブログで果たしてエキサイトするか#3.」 の中で背景画像を無料ダウンロードサイトやジェネレーターをいくつかご紹介しましたが、先日ネット徘徊していたとき楽しく背景画像が作れそうなジェネレーターを見つけましたのでアップしておきます。
柄は68種類、表面のテクスチュアは5種類、組み合わせは自由でどちらも縮小拡大可です。作業状態はすぐにプレビューされるので操作で悩むことはないと思います。

さっそく作って背景に使ってみました(笑)

背景画像が作れるジェネレーター

Tiled backgrounds designer
背景画像ジェネレーター.
Tiled backgrounds designer背景画像ジェネレーター.

WEBサイトやブログの雰囲気を変えたくなったときに使ってみてはいかがでしょうか。

さてさて、今日は 1 （イチ） が4つ並んだ日付なんですね。
いつもと変わらないんでしょうけど気分は悪くない 11時11分にアップしてみようか。

ちなみに今日は「配線器具の日」「ポッキー&プリッツの日」「サッカーの日」…etc なんですと(笑)
どれもみんななんとなくわかるのがいいですね。詳しくは下記のリンク先でどうぞ。

• 11月11日 今日は何の日～毎日が記念日～：日本記念日学会日本記念日学会:そんな学会があったの(驚)
  11月11日今日は何の日.

。。。では、楽しい一日でありますように

Demo exblog へ

参照サイト：

» lixlpixel CSS tooltips

CSSを編集してTooltipが表示されるようにする

1. [ スキン変更 ] → [ CSS（スタイルシート）編集 ] でCSS 内の最後に以下の記述を加える。
   最後じゃなくてもいいですがわかりやすいように最後にしておきます。

   /* Tooltip */ （アタマにこうやって記述しておくと削除するとき楽です）
   a.tip {
   	position: relative;
   }
   a.tip span {
   	display: none;
   	position: absolute;
   	top: 20px; /* 表示される位置 */
   	left: -10px; /* 表示される位置 */
   	width: 125px; /* 幅 */
   	padding: 5px; /* Tooltip内の余白 */
   	z-index: 100;
   	background: #000; /* 背景色 */
   	color: #fff; /* 文字色 */
   	-moz-border-radius: 5px; /* this works only in camino/firefox */
   	-webkit-border-radius: 5px; /* this is just for Safari */
   	text-decoration: none;
   }
   a:hover.tip {
   	font-size: 99%; /* this is just for IE */
   }
   a:hover.tip span {
   	display: block;
   }
   




2. リンクを貼るときに Tooltip を表示させたい場合には以下のように記述します。

   <a href="http://hogehoge.com/（←リンク先のURL）" class="tip">投稿上の文字列 <span>ここに説明文</span></a>

   青文字がTooltipを表示させる記述です。
   ちなみに通常のリンクはこういう記述ですね。違いがわかりますでしょうか？

   <a href="http://hogehoge.com/（←リンク先のURL）">投稿上の文字列</a>




3. あらかじめ青文字の部分を単語登録しておけば簡単に挿入できます。こんな感じで。

   class="tip"

   <span>ここに説明文</span>

なおリンクが貼ってある画像でも使えます。
他のブログ（Webサイト）でも使えますが javascript が使えるのであればそれを利用した方がいいような気がします。
説明文中は改行も使えますので改行させたい場合は<br />と記述してください。

投稿の中に記述するほどではないけれど
ちょっと説明しておきたいというときに使われてはいかがでしょうか。

【追記 12:35:36】
IE6 だとマウスをどかしても Tooltip が消えない & 説明文にアンダーラインが入りますねぇ。
IE7だと Tooltip は消えるけど説明文にアンダーラインが入りますねぇ 。まっいいか

http://tacogle.exblog.jp/

横1280 のモニターでブラウザを全画面にして見るとそこそこそれっぽいと思います。
全画面にするには F11 キーを押します。もう一度押せば元にもどります。

IE6 は下のタスクバーが表示されないので×、IE7 は通常表示されるステータスバーを一時的に非表示に。Firefox がベストか。

あなたの PC も Vista マシン  

キャプチャー画像から加工していったのですが作業中どれが本当の Photoshop のウィンドウかわからなくなることがあって思わず苦笑。さっきはブラウザ上のごみ箱アイコンをクリックしてしまいました。

あ～、ややこしや～ぁ、ややこしや～ぁ～。

では皆さんすてきな週末 & 連休を

10月9日：6個中0個 第415回抽選結果（みずほ銀行）
0個、、、予定通りだ なかばヤケ

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

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

1. まず画像を用意しましょう。画像は 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 画像に差し替えてあります。




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




3. 次にHTML編集のテキストボックス内に表示されているHTMLの一番上に

   

   <div id="badge"></div>
   

   と、記述します。
   なお青字の badge は別の文字列でも構いませんが、CSS （スタイルシート）に記述する文字列と一緒じゃないといけません。

   
   

4. 次に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 を貼り付けてください。

   
   

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




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

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

もうひとつの方法

今回は背景画像としてバッジを表示させましたが、投稿内の画像と同じように画像を直接表示させてその画像に別サイトへのリンクを張ることもできます。

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

私のExblog で右上に表示されている画像をクリックすると今日のこの投稿にジャンプするようにしています。

追記2008-10-15
スキンを大幅に変更したので現在の私のexblogではこのカスタマイズ結果はご覧になれません。応用したものはページに左側に残してあります。

追記2009.4.18
左下に表示させる方法を Exblog に投稿しました。
ブラウザの左下に画像を固定する方法:Exblog Customize
当ブログでの関連したコメントはこちらです。

今回はサムネイル画像（小さい画像） の上にマウスカーソルを持って行くとクリックしなくても画像が拡大表示されるカスタマイズです。
これは プチカスタマイズ #4 よりも簡単です。
← 象の上にマウスカーソルを持って行くと拡大されます。
これと同じものをエキサイトブログ(Exblog) の投稿内に載せた写真に適用させるにはどうしたらよいのでしょうか。

Exblog のDemo 投稿

オンマウスで画像を拡大表示させるカスタマイズ（方法）

1. CSS（スタイルシート）の最後に以下の記述を貼り付ける

a.pic-enlarge {
	display: block;
	float: left;
	margin: 0 7px 0 0;
}
a.pic-enlarge img{
	position: absolute;
}
a.pic-enlarge,
a.pic-enlarge img{
	width: 100px;
	height: 100px;
}
a.pic-enlarge:hover {
	border: 0;
	cursor: auto;
}
a.pic-enlarge:hover img {
	width: auto;
	height: auto;
}

pic-enlarge という記述は別の文字列にしても構いません。ただしすでにCSSで使われているものとかぶってはいけません。ここではかぶりそうにない文字列を使いました。仮に違う文字列を使った場合は手順2. のpic-enlarge のところも修正する必要があります。

2. 投稿本文中に画像を挿入する際は以下のように記述する

<a href="画像のURL" class="pic-enlarge" title="画像名（画像のタイトル）"><img src="画像のURL" title="画像名（画像のタイトル）" width="100" height="100" /></a>

3. 画像のURL を知るには

いつもやっているように画像をアップロードしたあとで [アップロード済み] のリンクをクリック。

アップロードした画像がポップアップウィンドウに表示されるのでポップアップした画像上で右クリックし、（IE6 & IE7 の場合は）コンテキストメニューの一番下にある [プロパティ] をクリック。プロパティのウィンドウが開くのでアドレス（URL） に表示されている文字列をコピー。
Firefox はポップアップした画像上で右クリックしコンテキストメニューの [画像のURLをコピー] をクリックするだけでURLがクリップボードにコピーされます。

追記：画像のURLが一部エンティティ化されているのでスラッシュ、アンダーバー、ドットを通常の文字にかえてURLとしました。

（例）エンティティ化されたURL

http://pds.exblog.jp/pds/1/200809%2F14%2F12%2Fe0131412%5F19265897%2Ejpg

（例）通常の文字列に打ち変え

http://pds.exblog.jp/pds/1/200809/14/12/e0131412_19265897.jpg

• %2F → / （スラッシュ）
• %5F → _ （アンダーバー）
• %2E → . （ドット）

具体的にはこのような変換になります。

といったように、比較的簡単に導入できます。。。ん ？ そうでもないかっ

1. 背景画像を用意

画像は小さめなものを用意し、その画像をrepeat させることでどんなサイズの写真にも対応できるようにします。私のサイトで使っている画像を例にとると背景画像自体は3px × 3px の下のようなとても小さいgif 画像です。


↑ココです。わかりますか？
拡大するとこんなgif 画像です。



この画像を連続して表示させると



こんな斜めストライプの背景画像ができあがります。
この背景画像上に投稿した写真が表示されます。

背景画像は自分で作ると大変なので、ストライプであれば
エキサイトブログで果たしてエキサイトするか#3 の投稿内で紹介している
「Stripe Generator」 もしくは「Background Image Maker」 という
ジェネレーターを使うといいでしょう。
模様のような背景画像を無料配布しているサイトも載せてありますので
ひととおり目を通してみてはいかがでしょうか。

2. 背景画像のアップロード

マイブログ設定のメニューからスキン変更のページを開き、「現在使用中のスキン」 のところにある「編集」 ボタンを押します。
次に「スキン編集」 ページ内の「HTML編集」 のところにある「マイイメージアカウントにイメージ登録」 をクリックします。



ポップアップした「イメージアップロード」ウィンドウを利用しPC 内に保存してある画像をアップロードします。ファイル名は grayframe.gif にしました（別に好きな名前で構いません）
アップロード後、「保存されたイメージリスト」 からアップロードした画像を見つけクリックして赤い線が引いてある「イメージURL」 （画像へのリンク）をコピーします。
WIDTH と HEIGHT は必要ありません。



コピーしたイメージURLはあとでスタイルシートを編集するときに必要になりますので
テキストエディタやメモ帳などにペーストしておいてください。

3. CSS編集 （スタイルシート編集）

イメージURL のコピーが終了したらポップアップしたウィンドウは閉じて、次に「HTML編集」 の下にある 「CSS編集」 に移ります。CSSを一番下までスクロールしたら、とりあえず下記のような記述を追加します。↓ は画像ですので、コピーする場合は画像の下にある <code> 内を選択してコピーしてください。



img.IMAGE_MID,
img.IMAGE_LEFT,
img.IMAGE_RIGHT {
	padding: 4px 4px 4px 4px;
	background: url(コピーしたイメージURLをここにペーストする) repeat;
	border-top: 1px solid #ebebeb;
	border-left: 1px solid #ebebeb;
	border-right: 1px solid #d7d7d7;
	border-bottom: 1px solid #d7d7d7;
}

Exblog は投稿内で画像をアップロードするときに 中央、左、右 という配置を指定しますが
その指定を行うと <img> タグ内に以下のようなclass 属性が付与されます。
（ <img> タグ内に自動的に追加されてしまうということ）

• 中央を指定すると class=”IMAGE_MID”
• 左を指定すると class=”IMAGE_LEFT”
• 右を指定すると class=”IMAGE_RIGHT”

バックグラウンドで自動的に付くそのclass 属性を利用して投稿内にある画像のみ枠がつくようにしています。
したがって、中央に配置する画像のみに枠をつけたいのであれば

img.IMAGE_MID {
	padding: 4px 4px 4px 4px;
	background: url(コピーしたイメージURLをここにペーストする) repeat;
	border-top: 1px solid #ebebeb;
	border-left: 1px solid #ebebeb;
	border-right: 1px solid #d7d7d7;
	border-bottom: 1px solid #d7d7d7;
}

このように記述すれば、中央の写真のみに枠がつき、左と右の写真には枠がつかないといったような表現も可能です。

その下にある

	padding: 4px 4px 4px 4px;

は、写真の回りにどのくらいの幅の枠をつけるか（背景画像をどのくらいはみ出させるか。正確には写真の回りにどのくらいの幅の余白を持たせるか）を指定しています。この場合は上下左右に4px ずつという指定です。太くしたければ数値を大きくすれば太くなります。

次の

	background: url(コピーしたイメージURLをここにペーストする) repeat;

は、背景画像の指定です。
背景画像はご自身の「マイイメージアカウントにイメージ登録」 して、そのURLを指定してください。くれぐれも他人のサイトで使われている画像に直リンクしないように。

最後の4行

	border-top: 1px solid #ebebeb;
	border-left: 1px solid #ebebeb;
	border-right: 1px solid #d7d7d7;
	border-bottom: 1px solid #d7d7d7;

は、無くても構いませんが、上と左に薄い色で1px の線、下と右にチョット濃いめの1px の線を引くことでなんとなく出っ張っている感じを出しています。カラーコードのところ（# から後ろの6 文字）を変えることでいろいろな色が使えます。

人とビミョーに違うExblog を作ってみたい方、どうぞお試し下さい。

最終型

• 画像
  
• CSS

  img.IMAGE_MID {
  	padding: 9px 9px 9px 9px;
  	background: url(http://pds.exblog.jp/pds/1/200809/11/12/08original.gif) repeat;
  	border-top: 1px solid #c5c5c5;
  	border-left: 1px solid #c5c5c5;
  	border-right: 1px solid #343434;
  	border-bottom: 1px solid #343434;
  }
  

  中央に配置する画像のみ枠が表示されるようにした。

Exblog の該当記事 http://tacogle.exblog.jp/8598804/

ついでにタイトルも「エキサイトブログで果たしてエキサイトするか」から
SEO対策も視野に入れ 「エキサイトブログ(Exblog) のプチカスタマイズ」 に変更しました。

どうして突然？、、、今ごろ、、、なぜ再開？

すでにお気づきの方もいらっしゃると思いますが、2週間ほど前から投稿タイトル下に投稿（単一ページ）が何回閲覧されたかカウントされるようにしました。
そして昨日、右のサイドバー内に「Top 10」 が表示されるようにしたところ、何故か「エキサイトブログで果たしてエキサイトするか #3」 が2位になっているのを発見しチョットやる気になったのであります(笑)
Exblog の場合、<head> の部分がいじれないのでFavicon を変更したり javascript を使ってのカスタマイズができないのでカスタマイズと言っても 「プチ」 からは抜け出せませんが。。。

今回はどこを 「プチる」 かと申しますと、右の写真のように画像の周辺に枠をつけるカスタマイズです。
ちょっとした枠があるだけで写真の感じが変わりますし、特にブログの背景色が 「白」 の方は、周辺が白い写真を投稿した時に画像のエッヂが背景になじんでしまってメリハリがなくなってしまうのを防ぐことができます。

ただ単に画像の四辺に任意の太さの枠線を引くだけなら、スタイルシートの中から
（私が使っているテンプレートのスタイルシートの場合は）

img {
	border: 0;
}

という記述を探し出し

img {
	border: 1px solid #000000;
}

と変更すれば、太さ1px の黒い（#000000）実線が（すべての）画像の四辺に引かれます。

が、すべての と書いたようにロゴ画像などにも線が入ってしまうのでそこが問題です。
また1px を5px とかにすれば太い線になりますが、線自体は単なるベタな色の線なのでオシャレな感じはありません。

そこで投稿内の写真の下だけに背景画像を読み込ませ、その背景画像が画像の四辺にはみ出るようにスタイルシート内に記述します。

作業内容としては、スキン変更 → HTML編集 にある「マイイメージアカウントにイメージ登録」 をクリックして画像をアップロードし、スタイルシート内に簡単な記述を追加するだけですので簡単です。

投稿サンプル

詳しい説明は次の投稿で。