作業の覚え書き

Web 制作 Memo

By

写真を効果的に魅せるjQueryプラグイン

jQueryを使って写真を効果的に魅せることのできるプラグインを集めてみました。

SlidesJS
シンプルなスライダー

Slicebox – 3D Image Slider
ルービックキューブのような面白い動きをするスライダー。

Parallax Slider
・背景も動くパララックスなスライダー。

BlocksIt.js
・コンテンツをPinterst風に表示させるプラグイン

bxlider
・多彩なカスタマイズが可能なスライダー

Adaptive Thumbnail Pile Effect
・カードを並べて広げるような楽しい動きをするギャラリープラグイン

Slideshow with jmpress.js
・エフェクトが印象的なスライダー

GalleryView
・サムネイルをクリックすると動くなどカスタマイズできるスライドギャラリー

Slider Kit
ドット、ナンバリング、サムネイル縦・横、サムネイルのみなどインデックスのオプションが選べるスライダー

The Lof JSiderNews

・サムネイルあり、リンクも出せるテキストありのスライダー[ダウンロードページ]

A small map
・複雑な図形や地図もマウスオーバー可能なプラグイン

By

スマートフォンサイト制作のためのメモ

PC上でスマホサイトを見るには?
PHPでスマートフォンのUA判別
PC版とスマートフォン版サイトを自動振り分けする方法
PC 用 Web サイトを CSS のみでスマートフォンに対応する

スマートフォンサイト集めました。
優れたiPhoneサイトデザイン集 – iPhoneデザインボックス
スマートフォンサイトをデザインする上で知っておくべき10のTIPS

By

GoogleMapのカスタマイズ

GoogleMapのカスタマイズについて丁寧に解説されているサイトがあるので、参考に頑張ってみよう。

Google Maps APIのおさらい。

Googleマップをイラストマップみたいにしたい。

By

インラインJavaScriptでロールオーバー

なるべく更新の手間が省けて、JavaScriptの処理が遅いブラウザに負担をかけないロールオーバーは、画像を読み込む場所に直接JavaScriptを書くことだ、との話を聞いたので試しに実装してみた。

<a href=”index.html”><img src=”01_off.jpg” alt=”Home” onmouseover=”this.src=’01_on.jpg'” onmouseout=”this.src=’01_off.jpg'” onmouseup=”this.src=’01_off.jpg'” onkeyup=”this.src=’01_off.jpg'” /></a>

最後のonmouseupは、タッチ端末などマウスオーバーが動作しない環境でのチラつき(一瞬画像が消える)現象への対策。(そういえばWindows8のタッチパネルでマウスオーバってどうなるんだろう?)
それじゃあマウスオーバー用の画像でいいじゃないかと onkeyup=”this.src=’01_on.jpg としてみたが、一瞬のチラつきが見られたので onmouseup を使い、それだけだとバリデートエラーが出るので onkeyup を併記した。

Read More

By

さくらのサーバーで.htmlにPHPインクルードを使うための設定

2004年からさくらインターネットを利用しているが、Dreamweaverでプレビューも編集もできて便利ということもあって、SSI(サーバーサイドインクルード)をずっと使い続けてきた。
拡張子を .shtml にしなくても使えるよう .htaccess に次の一行を追加

AddType text/x-server-parsed-html .html .htm .shtml

HTMLファイルのインクルードファイルを読み込みたい箇所に

<!–#include virtual=”/inc/header.html” –>

すべての階層に置かれたファイルに、この一行を追加するだけでOK。
しかし、同じサーバーで PHP のインクルードと SSI のインクルードは共存できないようなので、このさい PHP のインクルードに移行することにした。
Read More