[template] Birdcall

FC2ブログ用テンプレート : birdcall
プレビューはメニュー内のDesign Selectにて「Birdcall」を選択してください。


冬向けのシンプルテンプレート。
XHTML 1.0 Transitional、プラグインON/OFF対応。幅可変（上限・下限あり）。


テンプレートの編集はご自由にどうぞ★
カスタマイズに関しては特に制限は設けておりません。
ただし、編集後のテンプレートを共有する等の場合は、事前に連絡していただきたいですm(_ _)m

HerbaとFavillaとCSSと。

「Birdcall」をベースに「Herba」のテンプレートを更新しました。
画像差し替えただけなので楽チン。

Favillaをいろいろと調整していたのですが、なにやらIE6用に設定している疑似max-width・min-widthプロパティとその子孫要素のoverflowプロパティの相性が悪いのか、画面サイズを変更してるとIEがフリーズするという困った自体に。調べてみたら他にもそういった症状例があるみたいなんで、もうちょっと調整が必要ぽいです（もしかしたらBirdcallでも発症するかも…）。

あと、いままでユニバーサルセレクタ(*)でスタイルを初期化するという方法をとってきたのですが、なにやらこれはもう時代遅れだとか…。一年くらい前だとまだ主流だったはずなのにいつの間にやら時代に乗り遅れたオッサンになってしまったようです。おぢさん悲しい…。
まぁ、まだ一つしかテンプレートを共有してないので、いっそこれから新しいもの取り入れて、ナウなヤングに馬鹿ウケな流行CSSでバッチグーな感じみたいなーを目指そうと思います。←どんだけー

反動

Birdcallは画像のインパクトが大きめなテンプレートだったので、その反動なのかシンプルなテンプレートを作りたくなりました。
ということで、MeaCulpaとWillとKenon（大昔に作ったテンプレート）を6:3:1位の割合で混ぜたようなテンプレートを作成。


テンプレート名は「Favilla」。
Favillaっていうのはラテン語で灰という感じの意味らしいです。
（レクイエムの中の一節に「solvet sæclum in favilla」：世界は灰燼に帰すだろう というのがあったので、そこから拝借）

スタイルを適用するには、スタイル切り替えスクリプトから、「Favilla」を選択してくださいませm(_ _)m


ベースとなったCSSがMeaCulpaである上にコンセプトもMeaCulpaを踏襲したものなので、あまり代わり映えしないですね…。

「birdcall」登録申請しました

ということで、birdcallを共有申請しました。
最後の最後にエントリータイトルの画像変えたりちょこっとCSSいじったりしちゃいましたが、多分大丈夫でしょう。
昔はテンプレート画像はスクリーンショットから作っていましたが、今回はちょっと趣を変えてみました。勝手に作ってさらにそれで登録しておきながらいうのもなんですが、やっぱりセンスない。眠い中こういうことしちゃダメだなー。夜中に書いた作文を次の日の朝に見直すくらい恥ずかしい気がします。

今宵もまたIE対策…

IE7・Safariでさらっと確認しましたが大丈夫そうでした。一安心。

あと、前々からおっかしいなー？と思っていたIE6でのコメント入力フォームでの挙動。何が変だったかというと文字を入力するとフォームのサイズがかっくんかっくん変わるのです。普段Firefox使ってるのであまり気にしないようにしてたのですが、せっかく新しいテンプレートなんだし、ということでとりあえず原因を調べてみました。

http://cssbug.at.infoseek.co.jp/detail/winie/b085.html
これでした。
やっぱりCSS解釈のバグだったのね…。
仕方がないのでスターハックでIE6以下にはフォームのサイズを固定するようにしました。
全く手のかかるブラウザですこと。

↑のurl表示で気づいたかもしれませんが、url短縮スクリプトを導入してみました。
ただ、プラグインなんかと干渉するかもしれないのでテンプレートには組み込みません。あくまで個人利用ということに。


明日あたりにテンプレート登録申請したいと思います。今日はもう眠くてダメです…zzz

最終段階へ。

家の中にあまり使っていないWindowsXPが入ったノートパソコンがあったのを思い出したので、それにInternetExplorer7とWindows版Safariを入れてちょこちょこテストをしたら登録申請したいと思います(｀・ω・´)

ちなみにメインマシンのOSはいまだにWindows2000なのです…。
なんだかんだ言って2000が一番使いやすくてしっくりきます。業務用っぽい無骨な感じも好印象。
ただ最近はXP以降のOSじゃないと動作しないアプリケーションが増えてきて以前よりも不便さを感じる機会が多くなってきました。そろそろバージョンアップしようかなぁ…。

あと、ブログのスタイルシート切り替えスクリプトを変更しました。
不具合は無くなったかな？

仕様変更完了です。

先に述べていた仕様変更がとりあえず完了しました。

まず「1.画面幅を可変に」について。
IE6に対してはto-Rさんのスクリプトを用いるとしていましたがこれを取りやめ、CSS内でexpression（CSS内でjavascriptを実行できるIEの独自拡張）を用いて擬似的にmax-width、min-widthを指定することにしました。IE7ではmax-width、min-widthプロパティに対応しているので、スターハックを用いることでIE6に対してのみスクリプトが動作するようにしています。


「2.タイトル部分の画像を一つに」については、タイトルエリア部の背景に画像を設定、タイトル部・ブログ紹介部の黒っぽい部分は透過PNGを用いる方法を取りました。ただしIE6は透過PNGに対応していないので、これまたスターハックを用いて、IE6以下に対してはCSSフィルタで透過する方法にしています。


こんな感じでCSSハックを多用することになってしまいました。あまりスマートな方法じゃないかも(´・ω・｀)

ちょっと仕様変更します…。

早く登録したいとか言っておきながらいきなり仕様変更したくなりました。
仕様変更予定なのは以下の2点。

1.画面幅を可変に。
やはり画面幅固定というものが自分の性に合いませんでした…。
ただ、可変といってもCSSでmin-width、max-widthを指定し、上限・下限を設ける手法を取りたいと思います（上限がないとタイトル画像のサイズなどで困ったことになるので）。min-width、max-widthに対応していないIE6以下では、to-Rさんのスクリプトを利用して対応したいと思います。なお、javascriptを切っている場合のために、画像も多少の修正を行いたいと思います。


2.タイトル部分の画像を一つに
今はタイトルエリア・タイトル部・ブログ紹介部の3つの画像を使っていますが、これを一つの画像にまとめます。透明化などの処理はCSSで。
タイトル画像を一枚に統一することで、各ユーザー毎で画像を変更したりする際の作業量が格段に減るというのが利点ですね。


仕様変更後はjavascriptの使用量がちょっと増えます。重くならないといいのですが。

そろそろ登録申請したい。

ある程度テスト開始から時間もたち、自分が持っているブラウザでは動作確認・修正もそこそこに終わったので、そろそろテンプレートを登録申請したいところ。
今はCSS部分の解説コメントを充実させようとしているのですが、かなり時間がかかりそうで憂鬱に。カスタマイズ情報とか最初から書いておかない方が良いのかなぁ。そもそも使ってもらえるかも分からないしね（←ネガティブ）

テンプレートの数も増えてきて、登録申請してから登録までにもかなり時間がかかってしまうようになったみたいなので、できるだけ早く申請できるようにがんばりたいと思います。使ってもらえると嬉しいな（｀・ω・´）

スタイル切り替えを導入してみた

MeaCulpa後期から作っていたテンプレートは全てHTMLが共通でした。つまりテンプレート作成といっても画像とCSSだけ作っていたようなようなもんなのです。じゃあこれを生かして何ができるか？ということで、スタイル切り替えスクリプトを導入してデザインを変えられるようにしてみました。
もともと、HTMLを共通化することで作業の効率化を図るという目的の他に、こういうのができたら面白いなーというのがあったのですが、今更になって実現です。

ただ、テストしてる段階で何回かスタイルが適用されなかったりするのが気になるところ。
javascriptは組んだことがないヘタレなので切り替えスクリプトは借り物ということもあり、少し困り中。がんばってもうちょっと設定いじくってみますー。（javascriptも勉強しなきゃね…）