忍者ブログで独自ドメイン・カスタマイズ透過フォト（共有テンプレート）

Sep
26
2007

透過画像を用いてきれいな画像を背景いっぱいに表示できるテンプレートです。

<09.01.23>
透過フォトバージョン２．０を公開しました。

071009以前にダウンロードされた皆様へ
InternetExplorerでコメント投稿が出来ないケースがあるとの報告がありました。
現在公開しているものは修正されていますので、再度ダウンロードして頂くか、ご自身で直されるばあいは透過フォトにおけるブログパーツに関しての記事を参照し、CSSを変更後、ブログを開いて「F5」キーを押してチェックしてみてください。

初期設定では沖縄県宮古島の珊瑚でいっぱいのビーチを使っていますが、ご自身で撮影したお気に入りの写真に簡単に変更できますので、オリジナルなブログにカスタマイズしてください。
ダウンロードページ　コメント・★をいただけると励みになります。
プレビュー

背景画像の変更方法
１．画像のアップロード
はじめに管理画面の「便利ツール」－「ファイルアップロード」を選択し、「アップロードするファイルの選択」にある「ファイルの選択」行の「参照...」から背景画像をアップロードします。
横幅が800ピクセル以上の画像を選んだ方が大きく表示されるのできれいです。ちなみに初期設定の画像は1618PX×614PXですが、このくらいの大きさだと22Wディスプレイなどで見ると、とても迫力のある表示になります。（ナローバンドの方には表示が遅くなってしまいますが。）

２．画像ファイルのURLをコピー
アップロード後、「ファイル一覧」に画像が表示されるので、その右にある「記事を書く」を右クリックし、「新しいウィンドウで開く」を選択してください。
記事の内容に<a href="http://file.●●.blog.shinobi.jp/●●.gif" target="_blank"><img src="http://file.●●.blog.shinobi.jp/Img/×××/" border="0" alt="" /></a>などと表示されますので、<a href="に続く画像のアドレス(上記青地部分)をドラッグし、ブラウザ(InternetExplorerなど)の「編集」メニューで「コピー」を選んでください。

３．ＣＳＳの編集
コピーが出来たら、今開いているウィンドウ（またはタブ）を終了し、忍者ブログ管理画面上部にある、「テンプレート設定/編集」をクリックしてください。
「透過フォト」テンプレートの右にある「編集」をクリックします。
画面右下がCSSの編集画面になりますが、その10行目から始まる「body」部分に「background:」という項目があります。(11行目付近)その行の「url(」に続く
「http://file.××/beach_bg.jpg」部分をドラッグし、ブラウザの「編集」－「貼り付け」（ペースト）をクリックしてください。アップロードした画像のアドレスに変更されるはずです。
最後に画面左上にある「テンプレート保存」をクリックし、「上書き保存」（または新規作成でも可）をすれば終了です。

画像変更後、タイトルやサイト説明部分のフォントカラーを調整すると見やすくなります。

クマノミ画像の削除方法
プラグインの下方にクマノミの画像が出てきます。背景に合わない場合などは次のように削除してください。

HTML編集で、321行目前後にある下記の記述を削除してください。
<div id="UnderPluginBlock"> </div>

元の画像に戻す場合
元画像のURLが不明になった場合は再度テンプレートをダウンロードすることをおすすめします。

ファビコンについて
IE6では表示されませんが、ファビコン

を設置しています。
削除されたい方はhtml編集で下記１行を削除・変更してください。
<Link rel="SHORTCUT ICON" href="http://file.template100.blog.shinobi.jp/nimo.ico">
なお、ファビコンの設置に関しての詳細はこちらをご参照ください。

タイトル部分の画像の大きさの変更方法
070928移行にテンプレートをダウンロードしていただいた方は、記事および・プラグインが水平線の前後で始まるようになっていると思いますが、この高さを変更する方法です。

特にオリジナルフォトに変更している場合、ここを調整して、写真の一番おいしいところが隠れないようにするといいと思います。
CSS編集（管理ページ－テンプレート設定/編集－右下のCSS）で78行目前後に下記記載があります。
height;につづく数値を下げると画像表示部分が小さくなり、逆に数値を大きくすると画像がたくさん出てきます。

#TopBlock {
width:770px;
height:320px;
text-align: left;
border: none;
}

ただし、特にSXGA、ワイドディスプレイなど大きいディスプレイを使っている方は、下げすぎるとA4ノートPCサイズなどの一般的なディスプレイにおいてスクロールしないと記事部分が見えなくなってしまいますのでご留意下さい。

画像を全部見られるようにしたい場合
CSS編集で#FooterBlockを下記のように変更（１行追加）してみてください。
各ページで一番下までスクロールすると画像が画面いっぱいに見られるようになります。
#FooterBlock {
clear:both;
margin-bottom: 600px;
}

＜備考＞
初期設定でpngの透過画像に対応していないIE6以前のブラウザも表示できます。
ただし、98ME以前のOSとIE6の組み合わせで表示できない場合があるようですが、解決方法が見つかりましたら修正致します。
MAC環境では動作チェックしておりません。

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

きれいな背景画像で作成されたら、是非コメント欄にご報告ください。

【更新履歴】
070928　写真が見られるよう記事・プラグイン部分を水平線レベルまで下げました。
070926　プラグイン部分とメイン部分の開始位置をそろえました。

その他のテンプレート

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

忍者ブログテンプレート Comment(18) Edit

この記事にコメントする

素晴らしいテンプレートありがとうございます

素晴らしいテンプレートありがとうございます。
ブログが楽しくなりそうです。

ゆる 2009/08/17(Mon)22:26:18 編集

Re:素晴らしいテンプレートありがとうございます

喜んで頂けて何よりです。
最近テンプレ作る時間が無くてすいません。

【2009/08/18 08:14】

テンプレありがとうございます

とても素敵なテンプレをありがとうございます!
カスタマイズの仕方も親切に掲載されているので、簡単にカスタマイズすることができてとても感謝しております
今までの中で一番カスタマイズが楽しいテンプレでしたw
素敵なテンプレに親切なカスタマイズの方法をありがとうございましたm(_ _)m

arnis URL 2009/01/16(Fri)23:52:53 編集

Re:テンプレありがとうございます

arnis 様　はじめまして。
テンプレの使用＆コメントを頂き有り難うございます。
ブログのカスタマイズは楽しいですよね。
最近は自分のサイト制作に忙しく、テンプレ作りは構想は沢山あってもなかなか公開出来ないのですが、このようなコメントを頂くとテンプレ作りも進めないとという気になります。
今後もいいカスタマイズが出来たら教えてください。

【2009/01/19 08:30】

ありがとうございました。

ごめんなさい。
せっかくコメントいただいたのに、色々いじってたら削除してしまいました

また遊びに来て下さいね。

マリン URL 2008/07/12(Sat)10:54:41 編集

はじめまして・・

がりんぺいろさんの透過プレートをいただいてから・・何度となく写真を変えましたが・・
今が一番気にいってます・・・
でも透過しないのは残念なんですが・・

でもわからないことだらけでしたが・・
なんとか出来てよかった・・・
ご丁寧な説明で・・ありがとうございましゅ＾＾

yoko URL 2008/04/05(Sat)23:49:09 編集

無題

お返事有難うございます。
OSはMACのTigerXです。縮小方法は、単純にフォトエディターでファイルのサイズを下げています。おそらくデジカメの撮影時のモードによるのだとおもいますが、同じ大きさの写真でもファイルサイズが異なるのです。使用しているソフトは、HP Photosmartエディットです。

宜しくお願いいたします。

wacky URL 2008/01/06(Sun)02:46:21 編集

Re:無題

wacky様　お返事が遅くなり申し訳ございません。
ここ１０年ほどMACから遠ざかっておりまして的確なアドバイスになるか確認していないのですが。
http://www.apple.com/jp/downloads/macosx/imaging_3d/
で見る限り、DropFix 2.0 などサイズ指定して縮小できるソフトがあります。
現在の背景画像は604*453ですので、元画像を上記フリーウェアなどで横幅800px程度に指定して縮小してみてはいかがでしょうか

【2008/01/09 06:33】

透過フォトの拡大

はじめまして！
やっと自分の写真が背景に使える素敵なテンプレートを発見したと小躍りしています。

もともとの背景写真サイズが3M以上あり、アップロード出来る大きさにしたところ、とても小さい画像になってしまいました。この画像を、元の大きさではなく、拡大して背景にすることは可能なのでしょうか。もし可能でしたら、是非その方法を教えてください。

wacky URL 2008/01/05(Sat)15:45:34 編集

Re:透過フォトの拡大

wacky様はじめまして！
まず拡大は画質が落ちるので避けた方がいいと思います。
512kbで出来るだけ大きい画像サイズになるよう圧縮するのがいいと思いますが、wacky様はどのように縮小したか教えていただけますか？
出来れば、OSも併せて教えていただけると回答しやすいです。

【2008/01/05 20:20】

教えていただきありがとうございました。

画面のやり方がいまいちわからず・・・。
申し訳ございませんが、変えさせていただきました。
本当に申し訳ございません!!

ウリ坊 2007/10/10(Wed)17:12:23 編集

Re:教えていただきありがとうございました。

いえいえ。
わざわざコメントありがとうございます。
いろいろお手間を取らせてしまったようですいません。
透過画像はどうしてもIEの不具合との戦いになってしまって、自分で使うだけならまだしも、多くの方の様々な環境・設定に対応するのは本当に難しいです。
透過を使うとかなり楽しいサイトが作れるのは確かなのですが、テンプレートとして広く配布するのは難しいことが勉強になりました。

【2007/10/10 21:31】

残念ながら

ブログペットとの相性が悪かったようで、とりあえずはずしたらちゃんと機能しました。

教えていただいたとおりにしてコメント欄が使えれば一番良かったのですが・・・

色々丁寧なご指導ありがとうございました。

orange 2007/10/06(Sat)22:55:48 編集

Re:残念ながら

遅ればせながらIE7でチェックしてみました。
やはりいくつか相性の悪いブログツールがあるようです。
ブログツールをはずすと問題がないようですので、JavaScriptを利用したブログツールの後、透過画像をIEで利用するためのJavascriptがうまく動作しなくなっているようです。
解決方法がないわけではないので、テスト後にお知らせ致します。

【2007/10/07 10:33】

ご丁寧に・・・

確認していただきありがとうございます。

＜最新コメント＞より下方にクリックできないのです。
今日もCSSとにらめっこ状態でしたが、background-image: url(http://file.template100.blog.shinobi.jp/aquaBG.png);　　←この部分を消してみたら透過にはならないのですが、なぜか？コメント欄には入れるのです。
とりあえずこの状態の方が便利だと言われたので、透過できないままで使わせていただきます。

OSはXPでブラウザはExplorer7.0です。

背景用にあれこれ画像を探すのが楽しくて、大好きなテンプレートなのでなんとか透過して使わせていただきたいのですが・・・

これからも素敵なテンプレートをご紹介してくださると嬉しいです。

orange 2007/10/05(Fri)23:54:09 編集

Re:ご丁寧に・・・

>確認していただきありがとうございます。
いえいえ。ご迷惑をお掛けしてしまっているわけですから、私の出来る限りのことはさせて頂きたいと思っています。
私の理解している範囲では原因として考えられるのは２つ
1.IE7でうまくpngが透過しない
2.フリーエリアのブログペットなどとの相性
まず、１の対策としてIE7でもJavaScriptが動くように下記の通り変更してみてください。これでだめだとブログツールがじゃまをしている可能性が高いので、ブログツールをはずしてみてください。

透過pngに対応出来ないIE6とIE5.5用のJavaScriptですが、IE7で使うことも問題ないようですので、下記変更を試してみてください。（私の環境ではまだチェックできていませんので、変更前のhtmlとcssをバックアップした後に変更下さい）
■htmlの修正
（修正前：削除）
<script type="text/javascript" src="http://file.template100.blog.shinobi.jp/iepngfix.js">
（修正後）


■CSSの修正
（下記２カ所削除）
※ html .PluginBlock {
behavior: expression(IEPNGFIX.fix(this));
}
※ html #EntryBlock {
behavior: expression(IEPNGFIX.fix(this));
}

【2007/10/06 02:47】

私もコメント欄が・・・

初めまして、素敵な透過テンプレートを使わせていただいてます。
背景を色々変えられるのが嬉しいです♪

CSSを修正してコメント自体は書き込めるのですが・・・コメント欄にどうしても入れません。

アドバイスよろしくお願いします。

忍者ブログさんが、早く更新してくださればいいんですけど。

orange URL 2007/10/04(Thu)21:48:03 編集

Re:私もコメント欄が・・・

はじめまして　重ね重ね申し訳ありません。
orange様のブログを確認してみましたが、CSS修正はＯＫのようですし、異常は確認できませんでした。（XP＆IE6、Firefoxでチェック）
F5キーを押してもだめでしょうか？
>コメント欄にどうしても入れません。
というのは具体的にどのページからどのコメント欄をクリックできないのでしょうか？
よろしければ、OS（VISTAorXPor2000）とブラウザ（InternetExplorerなど）とともに教えて頂けますか？

【2007/10/05 10:57】

コメント欄の不具合

もう修正できたのでしょうか？更新日が変わっていないのですが？

プリン 2007/10/04(Thu)13:15:35 編集

Re:コメント欄の不具合

私からは修正申請を９／３０に忍者ブログに出しているのですが、10/4の14時現在ダウンロードページは更新されていません。
ただ、プリン様のページはCSSの対応をされているようですので、ブログにコメントさせて頂いたとおり、プラグインのフリーエリアに何か不具合を生じる原因があると思われます。プラグインのhtml編集の部分をご確認下さい。
忍者のダウンロードページで、「最終更新日」が現在9/28となっていると思いますが、これが１０／４以降になった段階で対応済みのものとお考え下さい。

【2007/10/04 13:59】

オランダチューリップ

オランダで撮ったお気に入りのチューリップ写真をブログに使いたいとずっと思っていたのですが、今まで叶わずにいました。おかげさまで理想のブログが出来上がりました。ときどき記念の写真に入れ替えていこうと思います。解説もわかりやすくてありがたいです！

kitty-chan URL 2007/10/02(Tue)18:06:20 編集

Re:オランダチューリップ

kitty-chan様
チューリップきれいですね。オランダは行ったことがないのですが、すてきなところだと聞きます。
これからいろいろな背景を見ることを楽しみにしています。

【2007/10/02 23:22】

無題

元に戻して修正後にアップをし直して見ます。

プリン 2007/10/01(Mon)23:33:06 編集

コメントは書ける

もう一度新しくダウンロードしたものに
下記の変更をしてみたらコメントは書ける様になりましたがやはりページの中央のコメント欄に入ることができません。ダウンロードが早すぎたのでしょうか？

プリン 2007/10/01(Mon)18:06:53 編集

コメントが書けなくなりました。

何度もすみません！
教えて頂いたとおりにやってみましたがだめだったので新しくダウンロードをしてみたのですが
Ｐの真ん中のコメント欄に入れないしコメントを書くことが出来ません。
私も気に入っているので使いたいのですが
宜しくお願いいたします。

プリン 2007/10/01(Mon)17:57:26 編集

コメント欄

はじめまして。
素敵なテンプレートお借りしています。

お聞きしたいのですがテンプレートを変えてから、
コメント欄に入力が出来なくなっています。
変える前の記事には出来ます。

今、写真と記事の高さを変更していますが
試しに、何もいじらず使ってもコメント出来ません。

とても気に入っているので、出来れば使い続けたいのです。
よろしくお願いします。

ku-nyan URL 2007/10/01(Mon)12:09:02 編集

Re:コメント欄

ku-nyan様
ご迷惑をおかけし、申し訳ございません。
下記プリン様の対処方法をご覧ください。
なお、ku-nyan様のブログにもコメントさせていただいたCommentBlockの変更だけでもおそらく直ると思います。

【2007/10/01 13:19】

無題

昨日はありがとうございました。
コメントを残して頂き感動しました。
ひとつお聞きしたいのですが、過去のコメント欄や続きの中に入ることが出来ないのですが、どうしたらいいでしょうか。最新記事から３ｐ位は
入れるのですがそれから先が入れません。
申し訳ありませんが宜しくお願い致します。

プリン 2007/09/29(Sat)13:00:19 編集

Re:無題

正常に動作していない部分があるようで、申し訳ありません。
私の環境（XP・FIREFOX＆IE6.02）でプリンさんのブログをチェックしてみましたが、正常に動いているようです。おそらくInternetExplorerにおいてPNGファイルとの相性により、リンクが背景画像に隠れてしまっているものと思われます。（JavaScriptにて対処したつもりでしたが）
対処法として、CSSにて下記２点修正をしていただき、ブログを開いて「F5」キーを押してチェックしてみてください。
１．CommentBlockを下記のように変更（１行削除）
.CommentBlock{
padding:10px;
}
２．TrackbackBlock（１行削除）
.TrackbackBlock{
padding:10px;
}
３．bodyに下記２行追記
position:relative;
z-index:5;

念のため、ＯＳおよびブラウザの種類、バージョンを教えていただけると助かります。

【2007/10/01 13:23】

無題

綺麗にｱｯﾌﾟ出来ました。素敵なﾃﾝﾌﾟﾚｰﾄをありがとうございます。

プリン URL 2007/09/28(Fri)20:37:20 編集

Re:無題

プリンさんはじめまして。レイアウトばっちりですね。

【2007/09/28 21:42】