最適化をしたい

今使っているベースHTML・CSSはもう一年以上前に作ったもので、その間何ヶ月もテンプレートに関わっていなかった期間もあるため、自分で書いたソースにもかかわらず詳細を把握しきれていませんでした。
そんなこともありちょっとソースコードを見直してみたのですが、自分があまり使わない部分の手を抜いていたり、ツギハギだらけだったりで結構汚いソースになってました。
ということで、ここらでベースHTML・CSSの一新を図りたいと思います。こういうのはテンプレートの数が少ないうちにやらないと後々もっと大変なことになりそうなので…(´ω｀；)
個人的に、トップページと個別ページの差を作りやすいベースHTMLにしたいなと思っていますが、できるかどうかはわかりません。あともうちょっと他の人にも理解しやすいHTMLにしなきゃとも思ってますが、こちらもできるかどうかは（以下略）。

コメントでの絵文字使用の不具合修正

公開中のすべてのテンプレートで、コメントで絵文字を使おうとした際、一部絵文字をクリックすることができないという不具合がありました。
（InternetExplorer6では通常使用できる模様。Firefoxなどで不具合発生）
そのため、公開中のすべてのテンプレートを更新しています。
更新内容は次の通りです。

修正前

div.comment ,
div.trackback {
    padding-bottom  : 1.5em;
    width           : 100%;
    overflow        : hidden;
}

修正後

div.comment ,
div.trackback {
    padding-bottom  : 1.5em;
    width           : 100%;
}

テンプレートによって細かい記述は違いますが、要するに「overflow」に関する記述を削除しました。
昔書いた部分が問題の原因になっていたようです…。

大失敗

共有に登録申請しておいたAmarisなのですが、さっき登録文を修正しようと思い共有申請のページを開いて元の登録文をコピーしようとしたところ、手元が狂い、まさかの「削除」クリック。何という失態('-'；)

明後日あたりには登録されるペースだったので激しくショックです。
先にSuspireを登録申請しておいたので次に登録されるのはそっちになりました。むむー。

ソースコードのHTML化(08/05/01更新)

NefertではソースコードやらHTMLやらCSSやらの表示には、ソースコードHTML化コンバーター「唐辛子」を利用しています。
「唐辛子」はソースコードをコピー&ペーストして変換ボタンを押すだけでOKという手軽さと、変換後はCSSファイルで見た目を調整できるという自由度が魅力。ソースコードを見やすくするスクリプトを使う方も多いですが、あんまりゴテゴテさせたくなかったのでこちらを使うことにしました。

Nefertで使っているソースコード用CSSはこんな感じです。

pre.code {
    border          : 1px dotted #aaa;
    background-color    : #f5f5f5;
    background-image    : url("http://blog73.fc2.com/r/rimse/file/code_background.png");
    background-repeat   : no-repeat;
    background-position : left top;
    padding         : 30px 2% 25px;
    width           : 95%;
    font-size       : 12px;

}
@media screen {/* この中をMacIEは無視する */
pre.code {
    overflow        : auto;
    *overflow-x     : auto;
    *overflow-y     : hidden;
}
}
pre.code.html {
    background-image    : url("http://blog73.fc2.com/r/rimse/file/html_background.png");
}
pre.code.css {
    background-image    : url("http://blog73.fc2.com/r/rimse/file/css_background.png");
}
pre.code.javascript {
    background-image    : url("http://blog73.fc2.com/r/rimse/file/javascript_background.png");
}
pre.code span.tag       { color: #00f; }
pre.code span.attr      { color: #000; }
pre.code span.value     { color: #900; }
pre.code span.str       { color: #090; }
pre.code span.num       { color: #090; }
pre.code span.keyword   { color: #00f; }
pre.code span.rem       { color: #909; }

ソースコードのカラーリングは唐辛子標準のものを使用。
手動でpreのclassにhtml、css、もしくはjavascriptと記入すれば、上部の文字が「HTML」、「CSS」、「Javascript」になります。指定無しだと「CODE」。
もし使いたいよーという方がいらっしゃいましたらご自由にどうぞ(*＾-')ｂ→source.css

CertaPaxが登録されたものの…

こっそりと登録申請していたCertaPaxが共有に登録されました。
が、ブログ管理画面のトップには表示されずに流れてしまった模様。なんてこった…
前々から思っていたのですが、新規登録される共有テンプレートが増えてきてもせめて登録された初日くらいは管理画面のトップから見ることができるようにしてほしいものです。どう考えてもトップから流されちゃうと目に入る機会が減ってしまうので…。

ちなみに、Amarisもこっそり登録申請しています。

[template] certapax

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


空の画像を使ってシンプルにまとめました。
XHTML 1.0 Transitional、プラグインON/OFF対応。幅可変（上限・下限あり）。


この作品は、クリエイティブ・コモンズ・ライセンスの下でライセンスされています。

使用している画像の原著作者は以下の通りです。
タイトル・背景 : ShippoShappo

ブログランキング・テンプレート部門に参加しています。
よろしくお願いします。

IE6用max-width・min-width

[Attention]
この記事の情報は「やってみたらできた」というメモ程度の内容です。Javascriptについての知識もあまり持ち合わせていないため、深い考察などもできていません。ご了承ください。
[Attention]



「Nefert」で配布しているテンプレートは、今のところ全て幅可変（上限・下限あり）となっています。

幅可変のレイアウト、いわゆるリキッドレイアウトは、表示するウィンドウサイズに合わせて自動的にレイアウトが変化するため、画面が大きい環境でも小さい環境でも（それなりに）うまく表示されるというのが利点です。ただし、リキッドレイアウトは「画面幅がどれくらい大きくなるか分からないので、用意する画像も必要以上に大きくなってしまう」という弱点もあります。

その弱点を補い、リキッドレイアウトの利点を生かすために用いられるのが、max-width、min-widthというCSSのプロパティです。

このプロパティは、それぞれ要素の最大幅・最小幅を指定することができます。
max-width、min-widthを指定することで、画面が小さい時には余裕を持たせて表示し、画面が大きいときには大きくなりすぎないように幅を抑制するといった柔軟な表示が可能になります。また、max-widthを指定することで、用意する画像サイズも必要以上に大きくならないようにすることができます。

ただし、max-width、min-widthプロパティは、IE6では対応しておらず、使うことができません。

そこで、IE6に対してはjavascriptのexpressionメソッドを用いて擬似的にmax-width、min-widthプロパティを適用させています。

まず、IE7やFirefox、Opera、Safariなどの既に対応しているブラウザに対しては、そのままmax-width、min-widthを指定しています。

#wrapper {
    min-width : 600px;
    max-width : 900px;
}

IE6に対してはスターハック（IE6以下でのみ読み込まれるようにするCSSハック）を用いてexpressionメソッドを使用します。

* html #wrapper {
    width : expression(
                (document.documentElement.clientWidth > 800)? "800px" :
                (document.documentElement.clientWidth < 500)? "500px" :
                "auto"
            );
    height : 1%;
}

やっていることは、「表示領域の幅が800px以上だったらwidth : 800px;に、500px以下だったらwidth : 500px;するよ。それ以外は自動的に変化していいや」ということです。
「max-width IE6」という風に検索すると、「document.documentElement.clientWidth」ではなく「document.body.clientWidth」で同様の方法を紹介しているページが多数あります。これはIEの互換モード・標準モードの違いのようです（前者が標準モード、後者が互換モード用の記述）。
最初、互換モード用の記述を使ったのですが、画面サイズを変更するとある条件下でブラウザがフリーズするという状況に陥ったので、標準モード用の記述を使うようにしました。

ちなみに、max-width、min-widthで直接指定している値とexpressionで指定している値が違うのは、IE6は内容にあわせて指定したサイズよりも幅が大きくなってしまうというバグがあることを考慮した結果です。

max-width、min-width導入時の参考になれば幸いです。

参考にしたページは以下の通りです。感謝(*'-'*)
http://d.hatena.ne.jp/nagaton/20070603/1180862831
http://youmos.com/reference/cssjavascriptmin-width_max-wid

border-styleのブラウザ間の差（私的メモ）

ブラウザのレンダリングエンジンの違いによって、同じCSSでも微妙に表示に差が生じるというのは良くあることですが、個人的に気になったborder-styleのブラウザ間の違いをまとめてみました。


クリックで元サイズ表示。

メインマシンがWindows2000なので、XP以上にしか対応していないInternetExplorer7やらSafari(Windows版)やらは今回は除外しています。スクリーンショット撮影サービス使えばメインマシン上でも撮影できますが、簡単に言うと面倒だったので…。

比較的よく使われる値は「solid」「dashed」「dotted」でしょうか。「solid」に大した差が無いのは当たり前として、「dashed」はブラウザ間の差はほぼ無し。「dotted」はブラウザ間の表示の差が大きいようです。
InternetExplorer6では「dotted」は「dashed」とほぼ同じ表示になってしまっている（これはおそらくborder-widthが1pxの場合）ほか、Firefox・Opera間でもドットの間隔にわずかながら差が生じています。
ほんの些細な差とも言えますが、こだわる人にとっては少し面倒な問題ですね。

最近はボーダーに1ピクセルごとにドットが打たれた点線（ )を使いたいがために、border-styleプロパティでの指定ではなく、backgroundで背景にボーダーの画像を指定するようになりました。ただこれだと要素の四方のうちの一方のみにしかボーダーを指定できないというどうしようもない弱点もあり、最終的にborderプロパティも使うことに。そうすると最初からborderプロパティで全部指定した方が良いんじゃないかと思ってしまいます。うーん。


結論：気にしないのが一番。


追記部分にはテストに用いたHTMLを載せておきますね(*'-')ノ。

→ [border-styleのブラウザ間の差（私的メモ）]の続きを読む

[template] favilla

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


シンプルでありながら単純すぎないデザインを目指しました。
XHTML 1.0 Transitional、プラグインON/OFF対応。幅可変（上限・下限あり）。

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

ブログランキング・テンプレート部門に参加しています。
よろしくお願いします。

画像差し替え版

先日作成したSuspireの画像差し替え+微調整したものを２種類作成しました。というのも人をデザインのメインに据えると、受ける印象は個人的趣向に思いっきり左右されてしまうので、無難なデザインも用意しておきたかったのです。まぁ、どれにしても完全に画像のおかげで成り立っている感じ…。この変更に伴い、テンプレート名なども変更しています。

Suspire : だるそうな猫
DeltaStone : コンクリート造りの建物
Pathos : おねーさん（元「Suspire」)

なお、今後のテンプレートはクリエイティブ・コモンズ・ライセンスの元で配布しようと思います。
基本的には「表示-非営利-継承」で配布し、使用する画像のライセンスなどで指定がある場合はそれにあわせることになります。

モノクロ病

勢いにのってまた新しいテンプレート「Suspire」を作ったのですが、久しぶりにモノクロ病が発症しました。

モノクロ病とは…
カラーコーディネートがめんどくさくなり、全部無彩色で揃えたくなるもの。制作中は、「シンプルだから良いんだ」と自分に言い聞かせている。結果として画像頼みのテンプレになりがち。あくまで俺語。

もうちょっと詰めていく必要がありますねー…。

新テンプレ「Amaris」と「Favilla」続報

CertaPaxをベースに新しいテンプレート「Amaris」を作成しました。
今回は初めてFlickrから画像を拝借。クリエイティブコモンズはありがたいなぁ。
Amarisでの工夫の一つが、エントリータイトル部の矢印のアイコンです。これはGIFの透過を利用して、画像を差し替えなくても色を変更できるようにしてあります。仕組みは簡単で、矢印の形に背景を透過させることで、背景色を変更すれば矢印の色も変化する、というもの。
これで少しはカスタマイズしやすいかも。

ついでに、長いこと放っておいたfavillaを共有に登録申請してきました。
最近の傾向からすると登録されるまでちょっと時間がかかりそうですね。

[template] herba

クリックでテンプレートのプレビューができます。

FC2ブログ用テンプレート : herba
リラックスできる緑色をつかって、Birdcallをアレンジしました。
XHTML 1.0 Transitional、プラグインON/OFF対応。幅可変（上限・下限あり）。
3カラム版はこちら。

★ カスタマイズ情報
・タイトルエリアの画像を変更する
・カラムの幅を調整する
・最新エントリーの上部にプラグイン3を表示する
・（Tips）タイトル画像の左右が切れてしまったときは…
ここにないカスタマイズに関しては、コメントして頂ければ対応致します(*＾-')ｂ


ブログランキング・テンプレート部門に参加しています。
よろしくお願いします。

→ [[template] herba]の続きを読む

新テンプレート作成

新テンプレート「CertaPax」を作りました。
ただし、画像を作るのが面倒だったので、reraの画像をちょっと編集して使い回し。
ということで、reraのアレンジと言っても良いかもです。さすがにめんどくさがりすぎたかな…。

今回はちょっと文字サイズを大きめにして、見やすさ重視してみました。
どんなもんでしょうかね〜。