忍者ブログ
HOME > > [PR] > 忍者ブログテンプレート > 透過フォト2.0(共有テンプレート) Admin RSS  
独自ドメインを無料で利用できる忍者ブログでカスタマイズ・テンプレート・アフィリエイト・アクセスアップSEOを徹底調査 
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。


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

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

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

もちろん背景をご自身の画像へ変更してのご利用もOKです。(というかそれを前提に作っています)
変更方法は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などフォトレタッチソフトなどで画像サイズを圧縮・画質も抑える修正ができると表示が軽くなります。

自分なりに背景画像をいろいろ試してみたのですが、南国らしい抜けた空の色とマッチングがいいようなので、石垣空港でJTA機(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編集で83行目付近「#TopBlock」にある「background:#111;」を希望する色に指定してください。

透過度の設定
透過している部分はそれぞれアルファーチャンネルの数値を変更することにより、透過する度合いが変わります。
例えばプラグイン部分では、CSS301行目付近「.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現在はSafariFirefox3Google ChromeOPERAなどの最新版は対応済みです)
下記は左がFirefox3、右がInternetExplorer7でのスクリーンショットです。
角丸にならないのは寂しいですね。
ドロップシャドウも好きなので使ってみたのですが、Safariでは綺麗に陰が出るのですが、GoogleChromeで多少乱れるので今回は採用しませんでした。


カスタマイズ方法は、記事部分の各丸はCSS356行目付近「.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を使って記事の左に置いてみました。
これは色変更などでカスタマイズすると楽しめるかと思います。

投稿日の月は英語表記にしていますが、もちろん数字での表示も可能です。
html142行目付近で下記部分を見て頂き、「<!--$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>


投稿日の下の数字はコメント数です。不要であればhtml146行目付近の下記記載を全て削除すれば表示されなくなります。
<!--if_cm_receipt-->
<div class="CommentNum">
<a href="<!--$entry_link-->#comment"><!--$entry_comment_num--></a>
</div>
<!--/if_cm_receipt-->


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


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

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


その他のテンプレート
スノーマン
スノーマン
透過フォト
透過フォト

黄昏

ピンクonブラック
ひらめき裸電球
ひらめき裸電球

フラワー
3ブロック インディゴブルー
3ブロック インディゴブルー
PR

この記事にコメントする
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
5
透過フォト2.0について
透過フォト2.0を使わせていただいております。
どうしても自力でできなかったので質問させていただきたいのですが、左右のマージンをもっとつめて記事をもっとワイドに表示させたいのです。
どのようにしたら良いでしょうか?

お忙しいところ申し訳ありませんが、もしコメントに気づいていただけましたら教えていただけると嬉しいです。
ぽるか 2012/11/01(Thu)09:52:08 編集
Re:透過フォト2.0について
ぽるか 様 はじめまして。

透過フォトのご利用ありがとうございます。
記事部分のみを広げる場合は下記で対応できると思います。

CSSの中で下記3カ所変更ください。
Apxの場合
#mainBlock (53行目付近)
 width:780px; → width:Αpx;
#EntryBlock (363行目付近)
 width: 565px; → width: (A-780+565)px;
.EntryInnerBlock (370行目付近)
 width:520px; → width: (A-780+680)px;


(例)全体の幅を940pxにする場合

#mainBlock (53行目付近)
 width:780px; → width:940px;
#EntryBlock (363行目付近)
 width: 565px; → width: 725px;
.EntryInnerBlock (370行目付近)
 width:520px; → width:680px;
【2012/11/01 10:01】
3
右上
利用させていただいておりますありがとうございます。
暫く初心者らしく暫く大人しくしておりましたが、右上のプラグイン(?)4つ並んでいるやつを消したいのですが、どうすればできますか?

分かるように教えていただけたらと思います。
よろしくお願いいたします。
かい 2009/10/21(Wed)17:27:09 編集
Re:右上
かい様 はじめまして
お返事が遅くなり申し訳ございません。
試してみたのですが、簡単には削除出来ません。
(htmlで削除すると体裁が崩れてしまう)
現状仕事が忙しく若干お時間を頂くこととなりそうですので、ご理解ください。
解決方法が判明したら当コメント欄にアップさせて頂きます。
【2009/10/26 09:08】
2
もう一つお願いです。
無理なお願いかもしれませんが、先程のお願いに追加で、初期表示では、当ブログの右上にあるメニューだけを記事の部分に表示させて、そこで選んだメニューを入れ替え表示にさせたいのですが・・・
そうすると当然右側のプラグインも要らなくなります。

HP形式にしたいのです。ブログで作ると更新が楽なので。

他のテンプレートでもいいので製作していただければ嬉しいのですが。
ると 2009/04/25(Sat)03:52:59 編集
Re:もう一つお願いです。
ると 様 久しぶりのコメント・テンプレご利用ありがとうございます。
Fiatは閉鎖されるようで残念ですね。

1)記事・コメントタブの削除
簡易的な方法ですが下記変更で表示されなくなります。
完全に修正するにはhtml・CSSの各所を修正しないといけないので、必要とあれば時間をください。

・CSS編集で「.EntryInnerBlock」の項目に下記1行追記
margin-left: 28px;
・CSSで「.EntryCalenderBlock」の「display: block;」を下記に変更
display: none;

2)トップページの変更について
<!--if_toppage-->等の条件分岐でトップページを作成出来ます。
参考>独自構文解説書 http://blog.ninja.co.jp/Tag/5/

例えばメニュー部分を<!--if_toppage--><!--/if_toppage-->で囲み、
82行目の<div id="content">の前に挿入、
次の行に<!--if_not_toppage-->を1行挿入
491行目の<div id="FooterBlock">の前に<!--/if_not_toppage-->を1行挿入
するなどすれば設定可能です。

【2009/04/28 09:04】
1
またまたお願いです。
また新しくブログを作り、前回と同じこのテンプレートを使っています。

記事の右側の日付とコメント数のタグ(?)を削除したいのですが、どうすればよろしいでしょうか?
よろしくお願いします。
ると URL 2009/04/25(Sat)03:45:02 編集
[60]  [58]  [46]  [43]  [42]  [41]  [40]  [39]  [33]  [38
ブログ内検索
プロフィール
HN:
がりんぺいろ
性別:
非公開
自己紹介:
なんちゃってアフィリエイター
数年前から趣味のサイトをいくつか作っていましたが、軽い気持ちで置いたアフィリエイトが結構稼いでくれる。ここ2~3年はブログに夢中。といっても放置しているものが多い。
本業は硬い業種のサラリーマン。
バーコード
アクセス解析
忍者ブログで独自ドメイン・カスタマイズ 透過フォト2.0(共有テンプレート) Produced by がりんぺいろ
忍者ブログ [PR]
透過フォトver2.0 Designed by ninja-blog.com