カテゴリー
HTML/CSS WordPress

サイトロゴを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倍程度に収まっていました。

カテゴリー
HTML/CSS

CSS: max-widthをIE6で使う

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

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

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

カテゴリー
HTML/CSS Web

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

snap-jimdo-logo.png

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

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

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

カテゴリー
HTML/CSS Web WordPress

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要素で括られることがなくなりました。

カテゴリー
HTML/CSS Web

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
標準キーボード バックライトキーボード 標準キーボード
アルミニウムユニボディ アルミニウムユニボディ ホワイトポリカーボネートシェル
カテゴリー
WordPress

WPテーマを変更

すっきりとしたWordPressテーマにしてみました。
corporatesandbox.jpg
WordPress Theme: Corporate Sandbox | Custom WordPress Theme Design
そのままだとコンテンツが見辛いのでスタイルシートを書き足しています。今回は、コンテンツ本文のフォントサイズを1px下げて13pxとしています。

引用と整形済みを以前のスタイルへ戻して、画像の配置を中央揃えにしてみました。

カテゴリー
Apple HTML/CSS

Xyle scope – ウェブページ解析ができる

サイトやローカルファイルを指定すると、CSS、HTML解析をしてくれます。
HTMLとCSSを照らし合せて見られるし、CSSの変更は左のブラウザ部分にリアルタイムに反映されるし、逆にブラウザ部分の要素をクリックすれば該当する部分のCSSを表示してくれます。

(Via Clippings – CSSとHTMLを綺麗に階層表示してくれて、CSSをリアルタイム編集できる『Xyle scope』)

ウェブページ解析は、WebKitに標準装備されているウェブ・インスペクタで十分と思っていましたが、このXyle scopeも使い勝手がいいように思いました。まだ、慣れの部分でウェブ・インスペクタが先行してますが、これから併用していきたいと思います。

カテゴリー
HTML/CSS Mac OS X

ウェブページをクリッカブルPDFにする

ウェブページのリンク情報を残してPDFドキュメントとして配布できると幸せになれるというお話。マック同士のやり取りだと、ウェブアーカイブにして配布すれば問題ないけど、配布相手の環境が分からないときにはPDFにして送るのが無難ではないでしょうか。
そこで、Leopardから搭載されたプリントダイアログで「PDFで保存」機能を使うとクリッカブルなPDFドキュメントとして出来上がります。
macosxhints.com – Create clickable PDFs in Safari and OmniWeb
A List Apart: Articles: CSS Design: Going to Print
しかし、サイトによってはプレビューしてみるとスタイルシート情報を失ってレイアウトがガタガタになってしまうところもあります。他人のサイトならいざ知らず、自分のサイトだったらイヤですよね。そんな時は、メディアタイプを「media=”all”」としてあげれば多少崩れますが何とかなるでしょう。もっとプリントに適したレイアウト、要素を厳選したい場合にはメディアタイプを「media=”print”」としてプリント専用のスタイルシートを書きます。少々手間ですが、それほど時間はかかりませんから挑戦してみましょう。私も、面倒だと思って今までズルズルと来てしまいました。 😉 重い腰を上げて、サイトトップページをそれなりの見栄えにしておきました。PDFドキュメントも用意しているのでご覧ください。

カテゴリー
Web

サイトトップページにインデックスを追加

jQueryをアップデートしたついでに、jQueryプラグイン「ColorBox – customizable lightbox plugin for jQuery」で実装練習をかねてサイトトップページに今まで書き溜めたドキュメントへのインデックスメニューを追加しました。まだ、「実装しました」くらいの出来映えなので温かい目で見てやってください。
サイトトップページを開くと、左側に「menu」と書かれたタブがありますのでクリックすると menu-index.html ドキュメントをインクルードしてインデックスが開くような仕組みにしてます。変更があっても1ドキュメントを書き換えるだけでいいので楽かなぁと採用してみました。ただ、iPhoneレイアウトも同じページで行っているので、iPhoneで読み込む際にJavaScriptが一緒に読み込まれてしまうので表示速度が落ちてしまいます。同居させるといろいろと制限ができてしまうので、別居させる方向で検討しなければならないのかもしれません。

カテゴリー
Apple

Espresso 1.0b1

icn_Espresso_128.png
Macrabbit からウェブ開発に関わる様々なドキュメントを編集できる Espresso パブリックベータがリリースされました。お気に入りのスタイルシートエディタ CSSEdit の開発元からリリースされるので期待していたアプリケーションです。しかし、期待していた仕上がりになってなくてちょっと残念です。
競合するオールインエディタとして、Panic の Coda があるわけですが、比較すると Coda の方が一歩も二歩もリードしているように思える。Coda はリリースされてから時間が経っているので改良され確実に進歩しているし、使い慣れているのでひいき目に見ているかもしれないけど Espresso は後発なので細部の使いやすさまで気にかけて欲しかったなぁ。
Espresso が Coda に勝っているところは、アプリケーション起動の速さくらいだろうか。まぁ、Espresso は船出をしたばかりなのでどのように化けるか分からないのでしばらくは見守っていこうと思う。