ロゴやトップ画像をRetinaディスプレイ/IPS液晶に対応させました。

4retina

cdbk.net CREATIVESのサイトをスマートフォンに加えて、タブレットやMacBook ProなどもRetina / IPS液晶になり、見ると滲んでしまうという状態が続いてしまっていたので、Retinaディスプレイなどに対応した画像に差し替えorCSSの変更を行いました。

対応させる方法として、実際の表示サイズよりも大きなサイズの画像(約2倍程度)を用意し、CSSなどでサイズ指定を行い、縮尺表示を行っています。写真の場合はサイズがそのままファイルサイズになってしまうため、機種などを判定して差し替えるといった方法をとる場合が多いですが、文字など色数が少ない画像を使っている場合はそれほどファイルサイズも大きくならないので、実サイズより大きなものをそのまま使っています。

そのほか制作フローを簡単な図でコンテンツに追加したりしました。

jQueryを使ったトップページイメージ用プラグイン「Slide interface」

Slide if cap

以前作った「fallslider」を再設計して新たに作りました。

特設ページも開設しました。

再設計し、画像だけでなくHTMLコンテンツへの対応もできるようになり、順を逐って説明が必要なものなどにも使うことができます。

使い方は、
ページにjQuery(1.4.2以上)、プラグインJSファイル(slide_if.js)、CSSファイル(slide_if.css)を設置して、表示したい部分に

<div id="slide_if">
	<div id="slide_if_view">
		<div id="slide_scene_a"></div>
		<div id="slide_scene_b"></div>
	</div>
	<ul id="scene_list">
		<li>表示させたい画像などをリストないに記載</li>
		<li>上限は指定していないので追加可能。</li>
	</ul>
</div>
<br clear="all" />

上記ソースを記述。liに表示したいもの(画像など)を追加することでスライドアニメーションを設定できます。
機能面は完成次第、順次追加していきます。

またグレードをあげたバージョンでブロック要素での構成を可能にしたいと考えております。
→現行バージョンで対応しました。

要望などあればコメントorメッセージorTwitterなどにいただければ幸いです。

このブログのデザイン、トップレイアウトを変更。


このブログのデザイン、トップページのレイアウトを変更しました。

トップは記事が見えるのではなく、一枚画像のサムネイルが並ぶ形にしてCSS3によるシャドウなどをいれています。

これからHTML5が本格的になるとCSSは現状メインの2.1から3にシフト。ちょっとしたアニメーションやエフェクトが簡単に付けられるようになるので一足早くこのブログにも導入。ということで今後も少しずつ取り入れていきます。

そして、実験的に広告を取り去ってみました。
一部記事に入れているものは残っていますが、しばらく広告はとります。

ポートフォリオサイトのトップ模様替え(追記)

タチコマの登場。
2007winter.jpg
そろそろ年も暮れるということでポートフォリオサイトのトップを変更。
タチコマが走ってます。(今までなかったけれどもあえてシャレってことで・・・)
JailbreakしたiPod touch。メモがとれたり、メールができたり・・・
SSHを使えばiPod touchにデータ転送もできる(メールでも・・・)
これで通話ができれば携帯電話よりも断然いい・・・
面白いアプリなど見つけたときは紹介していきます。
そしてタチコマバージョンのトップにもある秘密が・・・
パロディーでごめんなさい。
ちなみにこのタチコマはヨドバシカメラで600円ぐらいでした。