サイトロゴをRetina対応

久しぶりにサイトに手を入れました。

Macbook Pro Retinaにしてからというもの、自分のサイトを見るたびにロゴがにじんで見えるようになって目の焦点が合わない気持ち悪い見栄えになったのでRetina画面に対応させました。

新しいロゴはこちら。あんまり代わり映えしないものです。

Thematic top logo 2x

今回は、スタイルシートのメディアクエリーを利用して、デバイス別に違う画像を表示するようにしました。Retina対応デバイスでは上記の新しいロゴが表示されるようにしてます。それ以外のデバイスは旧ロゴが表示され、これまでと変わりません。

どんな感じで設置しているかというと

#blog-title a {/* Retina以外のデバイスで表示 */
	background-image: url(image.png);
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min-device-pixel-ratio: 2) {
	#blog-title a {/* Retina対応デバイスで表示 */
		background-image: url([email protected]);
		background-size: 100px 100px;	
	}
}

画像サイズが単純計算で4倍になる予定だったんですが、旧ロゴが10 KBだったのに対して新ロゴは175 KBへと17倍以上のサイズアップとなってしまいました。これからRetina対応サイトを作成する際には、予想以上のサイズアップが予想されそうです。

追記:新ロゴの画像サイズですが、大きな勘違いをしてました。作成に使ったイラストレータの画像サイズを参照してました。すいません。PNG画像サイズは16 KBと4倍どころか1.6倍程度に収まっていました。

CSS: max-widthをIE6で使う

私はこんな使い方をしてます。

img {
  max-width: 100% !important;
  height: auto !important;
  width: expression(this.width > 540 ? 540: true); /*for ie6*/
}

これはウェブログへ画像を配置するときに画像サイズがコンテンツボックスを上回る時はサイズを調整して収まるようにするものです。

Jimbo – ホームページ作成サービス

snap-jimdo-logo.png

Jimdo(ジンドゥー)」はドイツ生まれのホームページ作成サービス。HTML や CSS などの専門知識なしでとても簡単にデザイン性の高いページが作れるのが特徴。

(Via 「Jimdo Design コンテスト」が開催中: 虹色の林檎はどんな味?)

これはいい!! ホームページ作成ソフトを買ってきてやるまでもないサイトを作成するのにいいんじゃないだろうか。小難しいHTMLやCSSの知識を習得することなく、テンプレートを独自仕様へ簡単に変更できてホームページを作成できます。なんといってもUI(ユーザインターフェイス)がわかりやすい。これ、大切だと思うんだよね。

まずは、自分のプロフィールページを作ってみるのはいかがかな? 🙂

ホームページを作成しよう! – 簡単ホームページ作成サービス – Jimdo

Markdown記法でのStyle要素の扱い

ウェブログを運営している人で、Markdown記法を利用している人は多いと思います。私もWordPressでプラグインを入れて、この記法を利用してます。マークアップする手間が省けてとても重宝してます。

ただ、エントリーでその場限りのスタイルシートを適用したい時に、インラインで書くにはプロパティが多すぎて見渡しにくかったりスタイルを適用できないなどがあってエントリー中にstyle要素をたまに使うことがあるのですが、style要素をブロック要素と認識できなくてp要素で括られることになってしまいます。

そこで、p要素で括られないようにプラグインをカスタマイズしてみました。

# Tags that are always treated as block tags:
var $block_tags_re = ‘p|div|h[1-6]|blockquote|pre|table|dl|ol|ul|address|form|fieldset|iframe|hr|legend|style’;

1748行目の$block\_tags\_reに「style」を書き加えたところ、p要素で括られることがなくなりました。

table要素の見た目

スタイルシートでtable要素の見た目を整えてみた。

2.0GHz 2.4GHz 2.0GHz
Intel Core 2 Duo Intel Core 2 Duo Intel Core 2 Duo
2GB DDR3 メモリ 2GB DDR3 メモリ 2GB DDR2 メモリ
160GBハードディスク 250GB ハードディスク 120GB ハードディスク
NVIDIA GeForce 9400M NVIDIA GeForce 9400M NVIDIA GeForce 9400M
標準キーボード バックライトキーボード 標準キーボード
アルミニウムユニボディ アルミニウムユニボディ ホワイトポリカーボネートシェル