背景画像を透過して見られるテンプレート「透過フォト2.0」を共有テンプレートに公開しました。
プレビュー
ダウンロードページ　コメント＆★をいただけると励みになります。

以前公開しました透過フォトのバージョン２になります。

透過には今回もアルファーチャンネルを使っていますので、透過部分の色・透過度のカスタマイズも可能になっています。
前回のものとの主な変更点はヘッダー・フッター・プラグインを黒ベースにしたのと、日付とコメントの表示方法、角丸、パンくずリスト、Adminエリア、RSSアイコンです。
なお、各丸は画像ではなく、CSSでborder-radiusを利用しているので、非対応ブラウザ(IE6など)ではスクウェアに表示されてしまいます。

もちろん背景をご自身の画像へ変更してのご利用もＯＫです。（というかそれを前提に作っています）
変更方法はCSSのbodyで、「background-image: url(***)」の***部分に画像のURLを入れてください。
ご自身の画像への変更方法の詳細は透過フォトのカスタマイズ方法をご参照ください。
ただし、テンプレ作者への著作リンクは削除しないでください。

背景画像はいくつか用意しましたのでよかったらご利用ください。
（下記背景画像に関しては、完全なロイヤルティフリーではなく、透過フォト2.0及び透過フォトをご利用の方に限り、当該ブログの背景用として許可するものとします。）
CSSのbody部に下記記載があります。例えば花画像を使いたい場合は、飛行機画像の下の行の文頭に「/*」、文末に「*/」を追記し、花画像の下の行の文頭「/*」と、文末「*/」を削除すれば変更できます。
（CSS内の「/*」－「*/」間はコメント扱いになるのです。）

/*飛行機画像*/
background-image: url(http://file.template100.blog.shinobi.jp/jta3.jpg);
/*花画像*/
/*background-image: url(http://file.template100.blog.shinobi.jp/bbg_fl2.jpg);*/
/*林画像*/
/*background-image: url(http://file.template100.blog.shinobi.jp/bbg_026.jpg);*/
/*山画像*/
/*background-image: url(http://file.template100.blog.shinobi.jp/bbg_mountain.jpg);*/

http://file.template100.blog.shinobi.jp/jta3.jpg	http://file.template100.blog.shinobi.jp/bbg_fl2.jpg
http://file.template100.blog.shinobi.jp/bbg_026.jpg	http://file.template100.blog.shinobi.jp/bbg_mountain.jpg

ワイドディスプレイを考えると幅が1000PX以上の画像をお使いになると見栄えがいいと思いますが、最近のデジカメで撮影した10Mピクセル以上の写真をそのまま使うと重くなるので、Photoshop・GIMPなどフォトレタッチソフトなどで画像サイズを圧縮・画質も抑える修正ができると表示が軽くなります。

自分なりに背景画像をいろいろ試してみたのですが、南国らしい抜けた空の色とマッチングがいいようなので、石垣空港でＪＴＡ機（B737-400だったかな）を撮影した画像をデフォルト（初期設定の背景）として使ってみました。
フワッと浮かぶ雲を海や草原などで撮影しても綺麗に見えます。
北海道の美瑛や富士山などの山岳、ビーチなどの写真をマイピクチャや素材集から捜してみてください。

その際、画像左側がゴチャゴチャしていない写真の方が記事投稿日部分が見やすくより見栄えすると思います。
下記画像のように元画像は左側にヤシの木があったのをPhotoshop等で左右反転し、左側の背景をシンプルにして利用するなどの工夫すると見やすくなります。
残念ながら下記画像は版権があり、配布できないのでご了承ください。


下記サイトなど大きな画像のフリー素材を利用するのもいいでしょう。
（リンクが必要になるなど各サイトの著作権の扱いをご確認の上ご利用ください。）
画像サイズ・画質の調整をして大きくても80KB程度のサイズにすることをオススメします。

ゆんフリー写真素材集
http://public-domain-photos.com/（商用可英文）
http://www.imageafter.com/（商用可英文）
Large Pictures（英文）
http://www.sxc.hu/（商用可英文 要登録）
http://www.freerangestock.com/（商用可英文 要登録）

<09.01.26 修正>
公開後発見したツメの甘い部分を若干修正しました。
修正箇所は管理者コメントの色、コメント入力部分の背景色、IEでの表示修正他です。
なお、デフォルトの背景画像も飛行機画像に変更しました。

<09.01.27 修正>
マージン設定により投稿日をポコっと左に突き出るようにしました。
コメントNO.を表示するようにしました
ヘッダー・プラグインにグラデーションを設定しました。
<09.01.29 修正>
記事部分にボーダーを設定
パンくずリストのマージン・高さ微調整

<09.02.05 修正>
カレンダー部分のフォントカラー
コメント編集画面のレイアウト
記事・プラグインタイトルのボーダー
記事・プラグイン部分のマージン
ヘッダー下部のマージン

透過部分のカスタマイズ
透過部分のベースカラーの設定
ヘッダー、プラグイン、フッター、記事リスト、日付・コメント数が#000
記事、コメント部分、ヘッダー上部のメニューが#FFF
にそれぞれなっていますので、これを変更すると色合いが変わります。
背景に使う画像の色合いで随分イメージが変わるので、その都度透過部分のカラー・透過度を調節したほうがしっくり来ると思います。

例えばヘッダーの色を変えたい場合は、CSS編集で８３行目付近「#TopBlock」にある「background:#111;」を希望する色に指定してください。

透過度の設定
透過している部分はそれぞれアルファーチャンネルの数値を変更することにより、透過する度合いが変わります。
例えばプラグイン部分では、ＣＳＳ３０１行目付近「.PluginInnerBlock」にある下記記載「opacity」と「filter:alpha(opacity=**)」の数値を変更してください。
「opacity」を0.9、「filter:alpha(opacity=**)」を90にするとあまり透過しなくなります。
記事やプラグイン部分の透過度を高くすると、画像やブログパーツなどが見づらくなりますのでご注意ください。
特に記事部分は透過無しにしたほうが見やすいと思われます。デフォルトでは背景もうっすらと見える程度の設定にしていますが、お好みで調整してみてください。

opacity: 0.7;
filter:alpha(opacity=70);

IEではグラデーションをかけることもできます。09.01.19更新以降にダウンロードされた方はヘッダー・プラグインに設定してあります。
CSSの透過部分で下記に変更すると左側が70%、右側が30%で透過度が変わります。

opacity: 0.7;
filter:alpha(style=1, opacity=70, finishopacity=30);

各丸のカスタマイズ
画像を使うときれいな角丸ができるのですが、ブラウザ対応など手間がかかるので「radius」による設定にしました。
これは、IE7などではラウンドにならない（IE8から対応してます）ので申し訳ないのですが、非常に簡単な方法なので、カスタマイズ向きかなと。（CSS3に関する対応なので、09/01現在はSafari、Firefox3、Google Chrome、OPERAなどの最新版は対応済みです）
下記は左がFirefox3、右がInternetExplorer７でのスクリーンショットです。
角丸にならないのは寂しいですね。
ドロップシャドウも好きなので使ってみたのですが、Safariでは綺麗に陰が出るのですが、GoogleChromeで多少乱れるので今回は採用しませんでした。


カスタマイズ方法は、記事部分の各丸はCSS３５６行目付近「.EntryInnerBlock」に下記のような記載があります。
radiusに続く数値がラウンド半径になります。
top-left-radius:0pxにしているので、左上は直角を意味します。
それぞれの数値を変更して、お好きな各丸デザインにカスタマイズしてください。

-webkit-border-top-left-radius:0px;
-webkit-border-top-right-radius:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;

-khtml-border-radius-topleft:0px;
-khtml-border-radius-topright:10px;
-khtml-border-radius-bottomleft:10px;
-khtml-border-radius-bottomright:10px;

-moz-border-radius-topleft:0px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;

各丸のカスタマイズ方法はMandarin Design: CSS Opacity and Transparency（英文）などが解りやすいです。

カテゴリ・アーカイブページの記事一覧表示
カテゴリ・アーカイブページの記事一覧表示
をご参照ください。

記事投稿日
日めくりカレンダーの画像を使おうかとも思ったのですが、色調の調整などに手間取り現状では透過のテキストをFloatを使って記事の左に置いてみました。
これは色変更などでカスタマイズすると楽しめるかと思います。

投稿日の月は英語表記にしていますが、もちろん数字での表示も可能です。
html１４２行目付近で下記部分を見て頂き、「<!--$entry_month-->」を「<!--$entry_mon--> 」に変更してください。
（参考）忍者ブログヘルプ　$entry_mon、$entry_month

<div class="EntryCalenderBlock">
<div class="EntryCalender">
<A href="<!--$entry_date_link-->"><!--$entry_month-->
<span style="font-size:2em; font-weight:bold;"><!--$entry_day--></span>
<!--$entry_year--></a>
</div>

投稿日の下の数字はコメント数です。不要であればhtml１４６行目付近の下記記載を全て削除すれば表示されなくなります。

<!--if_cm_receipt-->
<div class="CommentNum">
<a href="<!--$entry_link-->#comment"><!--$entry_comment_num--></a>
</div>
<!--/if_cm_receipt-->

記事部分の枠
背景に白ベースの画像を使うと記事部分の境界がよく解らなくなります。それはそれでおもしろいのですが、記事部分をもう少し目立たせたい場合は罫線を設定するといいと思います。
（09.01.29の更新でデフォルトで設定しました。）
ＣＳＳ３５６行目付近の「.EntryInnerBlock」内に下記１行を追加してみてください。

border: 1px solid #999999;

背景をランダムに換えるカスタマイズ方法
背景をランダムに変更するカスタマイズをご参照ください。

★このテンプレートをカスタマイズしていただいている皆様★
カスタマイズのヒントにご覧ください(順不同)

• 
  sail for the mighty ocean
• 
  お料理行進曲-mezasuha jyagaimo!? ver.2-
• 
  Musik Everyday
• 
  慶應霞会


• 
  のんびり書く日記
• 
  smileless smile
• 
  イタリア旅行夢街道
• 
  コルニーユ爺さんの顛末


• 
  呉竹 -くれたけ-
• 
  ラリーは続くよ、どこまでも…
• 
  minoriあってこその人生
• 
  リカルド･イゼクソン・ドスサントスレイチを応援するサッカー好きのブログ


• 
  NACHT MUSIK 3RD
• 
  今日もヘタレは平常運転(ΘΘ)ρ
• 
  torrentでトレンド!
• 
  コベヤで冒険ということ


• 
  Diary
• 
  ドリルは男のロマン
• 
  名前の無い診療所
• 
  こんなブログどうよ? by ゲン!


• 
  のんびり行こうよ！　～夢のログハウス生活～
• 
  Multi Way

その他のテンプレート

スノーマン	透過フォト	黄昏
ピンクonブラック	ひらめき裸電球	フラワー
３ブロック インディゴブルー