忍者ブログ
HOME > 忍者ブログテンプレートの記事 Admin RSS  
独自ドメインを無料で利用できる忍者ブログでカスタマイズ・テンプレート・アフィリエイト・アクセスアップSEOを徹底調査 
背景画像を透過して見られるテンプレート「透過フォト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 修正>
カレンダー部分のフォントカラー
コメント編集画面のレイアウト
記事・プラグインタイトルのボーダー
記事・プラグイン部分のマージン
ヘッダー下部のマージン
PR
リクエストのあったテンプレート(カラーチェンジ等の改変)をベータ版としてZIPファイルにてご利用頂けるようにする場合がございます。
公式テンプレートとして承認されたものではありませんので、自己責任でご利用頂ければと思います。
バグ等はご連絡頂ければ出来るだけ対応致しますが、お時間を頂く場合もありますので、ご了承ください。

利用方法は下記の通り

日めくりカレンダーを使った3Bインディゴブルーを公開しました。
このテンプレの共有申請に何回か落ちて、忍者ブログテンプレの開発意欲をなくし、半年以上放置していましたが、現在作成中の別サイトで同じようなテクニックを利用したので、試しに申請してみました。



シンプルな可変3ブロックを作りたかったのですが、画像を使わないとなかなか共有に承認してもらえそうにないので、日めくりカレンダーを使ってみました。

日めくりカレンダインディゴブルー

プラグインカテゴリー1-3が左、4と5が右サイドバーになります。

カレンダーについて
アメリカのブログを見ていると、記事投稿日が日めくりカレンダーになっているものが多く、MovableTypeのプラグインでもPHPカレンダーなどが出ています。忍者ブログでPHPを使った動的なページというのも難しいし、JavaScriptを使うのもテンプレートとしてはカスタマイズ性が落ちるので、とりあえず下記サイトなどを参考にCSSで作ってみました。
brainstormsandraves.com
Creating a Blog Entry Date Calendar Icon Look with CSS, Mostly
mahud's blog

個人的には月の表示を「Dec」のように英語表示したかったのですが、忍者ブログの独自構文ではないようなので、brainstormsandraves.comとは多少レイアウトを変えて上の帯の部分に投稿月、日めくり部分に「曜日(英語)」「投稿日」「投稿年」の順番で表示しました。ブラウザの文字表示を大きくするとレイアウトが崩れ、はみ出してしまうのが課題ですが、まずは使ってみようとUPしてみました。
カレンダ部分は月日別ページへのリンクとなっていますが、個人的にはこのページはあまり使わないので、記事ページへのリンクの方がいいかなとも思っています。

悩みはフォントサイズの指定方法です。
配布したものはピクセルで指定しましたが、上記参照サイトではemや%で指定しています。いろんな環境できちんと収まって欲しいのですが、どのように指定すべきかまだ自分の中で結論が出ていないのです。

実は既にチャコールシルバー・ラズベリーピンク・フォレストグリーンと合計4色作成済みですが、このインディゴブルーで初期トラブルがあった場合を考えて申請はしていません。
使って頂くのは構いませんので、ご希望があるようでしたらコメント等で連絡ください。
     

チャコールシルバーはこちらからダウンロード出来ます。
http://file.ninja-blog.com/CharcoalSilver.zip
設定方法の詳細はこちら → ZIP配布のテンプレートの利用方法

さて、このテンプレートの特徴は他に下記のものを取り入れています。
ネガティブマージンを使った幅可変(プラグイン固定・メイン可変)
記事編集ページへの直接リンク
パンくずリスト
カテゴリ・アーカイブページに記事タイトルリスト

ピンク on ブラック 3ブロック最近複数のサイトを並行的に立ち上げておりまして、テンプレ開発がおろそかになっていましたが、songriさんより、ピンク on ブラックの3ブロック化が可能かとの問い合わせを頂いたので、3ブロック化し共有申請したところあっさり承認されました。(「あっさり」というのはここのところ、他のテンプレが非承認続きでして...)
私が承認されたと気づく前にsongriさんから★をいただいてました。ありがとうございました。

プラグイン部分は1~3が左サイドバー、4、5が右です。

songriさんはもしかしたら、ご自分でカスタマイズされたかったのかもしれませんが、説明するのも大変でしたので、3ブロックで公開したものをベースにカスタマイズして頂ければと思います。 2ブロックからの変更点を抜粋しておきますので参考になれば幸いです。
  1. body フォントサイズ13px→15px
  2. mainBlock 幅770px→780px
  3. PluginBlock 幅200px→165px、フロート右→左
  4. PluginBlockRight 作成
  5. PluginTitle padding 10→0
  6. PluginContents padding-right 3→0
  7. EntryBlock 幅560px→440px、マージン他調整
  8. EntryTextBox マージン他調整
  9. Plugin_data マージン他調整
他微調整多数

そうそう。こういうときテキスト比較ソフトが便利です。
変更前のCSSと変更後のCSSのどこが変わったのか一目でわかるのです。
私はhtmlで配信される会議資料で前回からの変更点をチェックするのに友人から教えて貰って使い始めたのですが、CSSやhtml編集でも結構使えます。(そもそも会議資料をwebで配信するくらいなら、変更点くらい解るように箇条書きするか強調・色分けなどせいっと叫びたいですが。その点ブログ以前からHP作ってる人は更新履歴をしっかり作る癖があって話が合います。)
私は「ちゃうちゃう」、「DF.exe」なるフリーウェアを使ってます。
スノーマン(雪だるま)のテンプレートを共有テンプレートにアップしました。
まだ、京都では紅葉が真っ盛りの時期ですが、北から冬将軍が近づいてきています。
一足早く冬気分にしたい方は是非使ってみてください。

※当サイトで使っているものは、背景など詳細が若干異なる部分がございます。

プレビュー
ダウンロードページ コメント&★をいただけると励みになります。


[1]  [2
ブログ内検索
プロフィール
HN:
がりんぺいろ
性別:
非公開
自己紹介:
なんちゃってアフィリエイター
数年前から趣味のサイトをいくつか作っていましたが、軽い気持ちで置いたアフィリエイトが結構稼いでくれる。ここ2~3年はブログに夢中。といっても放置しているものが多い。
本業は硬い業種のサラリーマン。
バーコード
アクセス解析
忍者ブログで独自ドメイン・カスタマイズ 忍者ブログテンプレート Produced by がりんぺいろ
忍者ブログ [PR]
透過フォトver2.0 Designed by ninja-blog.com