長いフォームをステップ式にして省スペースに収めるクロスブラウザ対応でシンプルなjQueryプラグイン・BabySteps
使いやすそうだったので備忘録。 フォームをステップ式にして、 コンパクトに収められる、という jQueryプラグイン。シンプルなの でカスタマイズも割りとしやすく、 クロスブラウザでも動作してく れます。 高機能なプラグインは沢山ありますけど、既存サイトに組み込む必要がある場合はシンプルでカスタマイズしやすい方が落とし込みやすいのですが、探してみるとなかなか無いので個人的にはこういうプラグインが結構貴重です。 ライセンスはMITとなっています。縦長のフォームを見ただけで離脱するレベルで、フォームの入力はストレスなのでこうして見た目をすっきりさせれば離脱率を防げそう。 店かなんかに出来る行列も直線ではなく、蛇行した列にすると、混んでないような錯覚が生まれる、というのは聞いたことがあるので同じ理由でストレスを軽減できるのではないかなと。 Sampleデモを用意しました。日本語にしただけですけど
10KB以内、レスポンシブWebデザインである事が条件の軽量Webサービスのコンテスト・10K Apartの中で面白かったもの10個
面白そうなコンテストが開催されているよう だったのでメモがてらご紹介。10KB以下で、 しかもスマートフォンやiPadなど様々なデバ イスで閲覧してもレイアウトを崩さないレス ポンシブWebデザインであることが条件の Webアプリコンテスト・10K Apartからいくつ か面白かったものを選んでみました。 モバイルでも使える軽量Webサービスのコンテスト、みたいな感じですかね。なかなか面白いものが揃っていました。開発者さんは参考にされては如何でしょう。 条件は画像やcss、jsなど全て合わせて10KB（圧縮可）以内に収めること、様々なデバイスでもレイアウトを崩さないレスポンシブ設計であることなどがあげられています。コンテンツは結構APIありきになってます。当たり前かもですがｗ 現在120以上のも作品がエントリーされていますが、この中で個人的に気に入ったものを10個ほどご紹介します。順不同。
無料で手に入るECサイト向けのWordPressテーマいろいろ - かちびと.net
ご質問頂いたので記事にしてみます。ECサイト をWordPressで構築したいけど良いテーマや、 参考になるテーマはないだろうか、との事でした ので、無料で手に入るECサイト向けのWordPress テーマをいくつかご紹介します。ソースコードや デザイン、レイアウトなどを参考にしてみては いかがでしょうか。 というわけで無料で手に入るECサイト向けのWPテーマです。さほど数は無いですけど・・ECサイト構築用のプラグイン（WP e-Commerceなど）に依存したテーマなどもあります。 でもまぁ大半はtokokoo.comで配布されているテーマです。多くのテーマは有料ですが、一部の機能を削ってフリー配布してくれています。ダウンロードにはユーザー登録（無料）が必要です。 BuySell Theme 綺麗でシンプルですね。個人的には一番好きでした。キャプチャは商品ページです。要WP e-comm
WordPressを使ってWeb制作をする為の手順リスト・【改正版】+α
以前書いたWordPressでWeb制作する際 の手順リストが少し古い情報込みだったり するので改正版を書きます。先日、WPも 3.2のリリースを迎えましたので、手順リスト もアップデートすることにしました。多少考え が変わっているので内容も少し変更有ります。 以前のリストの改正版です。加えて他の情報も一緒に載せておく事にしました。 【2011・07・11】 WordPressインストールサーバーを用意（PHP5.2.4 以上 / MySQL5.0 以上）DBを作成WordPressをダウンロードし、解凍wp-config-sampleをwp-configにリネームし、内容をDBに合わせて変更プリフィクス（接頭語）を変更する（wp_→foodblog_）FTPソフト等でサーバーにアップロードサイト名やパスワード、IDを決める（adminは避ける）作成したユーザー名でログインダッシュボードの
Media QueryでiPhoneやiPadにも自動でレイアウトを調整するHTML5製のWPテーマ・BLASKAN
過去にも何度かご紹介していますが、 Media QueryでiPhoneやiPadを含め た、様々なデバイスにレイアウトを調整 済みのWordPressテーマ・BLASKAN のご紹介。シンプルで良かったので 備忘録です。 同じようにMedia Queryを使ったレスポンシブなWebデザインを構築できるWordPressのテーマは過去にまとめましたので合わせてどうぞ。 css3のMedia QueriesでスマートフォンやiPad等の様々なデバイスに対応済みのWordPressテーマいろいろスマフォにも最適化し、ファンゲート対応のFacebookページも作成できるフリーのWPテーマ・Flexibleがなかなか良さそう新たに仲間入りのテーマです。
複数ブックマークサービスに一括対応できるAddThisを導入する前にいろいろ調べたのでメモ
ブックマークやTwitterへの投稿、Facebook のいいね！をしやすいようにボタンをサイト側 で設置するのはもはや当たり前のようになり つつあります。僕も例外なく、昔から貼ってる んですが、どんどん新しいのが出てきて、結構 面倒なので、よく見かけるAddThisを導入する ことにしました。 AddThisは国内でもよく見かけるので認知度的にいいかなと思ったんですが、ドキュメント見てみたらそこそこカスタマイズ出来るようなのでちょっと導入前に軽く調べてみましたのでついでにメモします。 いろいろな所で見かけてるかと思いますので説明はいらないですよね。世界中のソーシャルサイトをまとめてくれているサービスです。 多少ごちゃ付いてきたので遅ればせながらAddThisを導入してみようかなと思ったんですが、いろいろとカスタマイズ出来るようなので以下に調べた事をメモとして残しておきます。 初めに まず
最近よく使ってる、Web制作に役立つWebサービス的なやつ
少し前に聞いてくれた方がいたのでついで にシェアしてみます。個人的に最近よく好ん で使っている、Web制作に役立つWebサー ビスみたいなものをご紹介。全部既出で 珍しいものは無いんですけど、一覧にする のもたまにはいいかもですね。 というわけで、場合によっては誰得な記事ですけどご了承下さい。僕がここ最近でよく使ってるWebツールを古いのから新しいのまで、順不同でご紹介していきます。 web計。 → 黄金比・白銀比をサクサク計算 計算が面倒な黄金比や白銀比を、数値を入力するだけでサクサク出してくれます。動作も軽くてストレス無しです。 web計。 simplelib → よく使うjQueryコードをパッケージで配布 めっちゃ楽です。jQueryで作りたい機能だけを選択して、1つのjsファイルにパッケージにしてくれますよ。ページスクロールとかタブとか需要の高いものが揃っています。ちょっと機能を
グリッドレイアウトでWebサイト構築したい時にはGrid calculator and generatorが手軽で良さそう
なかなか手軽で自分向きだったのでメモ。 グリッドレイアウトを意識したWebサイトの 構築の際に、希望の幅を入れれば、その 幅に応じたグリッドレイアウト用のcssが 生産されます。ファイルはフレームワークの Blueprint cssが生成されます。 手軽で自分好みだったのでメモがてらご紹介。いわゆるグリッドレイアウト用の計算機です。 幅を入れるだけで、作れるレイアウトを自動で計算してcssも出してくれます。cssはBlueprintベースのようですね。 この設定だけでＯＫ。 例えば、960pxで164～200pxくらいのカラムを10px以内の感覚で開けて並べたいという時の設定値だと3通りのレイアウトがあるようです。 条件の幅を広げれば、作れるグリッドの種類も増えます。 レイアウトが決まったら Preview & Download CSSをクリックすればプレビューとDLが可能です。 コンテン
はてブやBuzzurlなど日本のブックマークサイトの無料アイコン配布サイト・sbm-garden
なかなか珍しいなと思ってご紹介。 はてブやLivedoorクリップ、Buzzurl などなど、国産のソーシャルブック マークサイトのアイコンを専門に配布 するsbm-gardenというサイト。個人 でも商用でも利用可能だそうです。 国内でこの手のアイコンを配布するサイトは、殆ど見かけないので覚えておいて損はないかも。これからまだまだ増えてくれそうですしね。 Good Design Webの方のサイトですよ。はてなブックマーク、LivedoorクリップやBuzzurl、Yahoo!、Newsing、Niftyクリップなどのアイコンのセットです。商用も無料で使えるそうですよ。 例えば以下のようなアイコンが配布されています。 Freehand_Cube 手書き風の3Dアイコン。 Wood_Convex 木目アイコン。 OldPaper グランジ。 Square_lightgray シンプル。 O
jQuery Mobile使用時によく使うマークアップで日本語サンプルを作ったので配布します
簡単なものですけど、jQuery Mobile でのマークアップ時によく使うっぽい UIのサンプル作ったので配布します。 簡単なチートシート代わりになるのでは 無いかと思ったのでシェアしてみよう かと。良かったら使ってください。 というのも、JQMの日本語サンプルの配布先を見かけなかったので、なかなかお困りの方もいらっしゃるんじゃないかなと。調べるの面倒ですし、手元にサンプルコードあったほうが何かと便利ですよね。 というわけで、以前マークアップサンプルの記事書いたときに作ったサンプルサイトに手を加えた物を丸ごと配布します。 流石にかなり出てるので今更説明不要かもですけど、ざっくり説明するとWebサイトをスマフォ向けに簡単に出来るjQueryプラグインです。 以下のサンプルで使用しているファイルが丸ごと梱包してあります。 サンプル※別窓 いちおうキャプチャ。 目次 サムネイル付きのサンプルと
jQuery MobileでGoogleMap APIを使ったサンプルがMITライセンスで公開されてた
なかなかいいサンプルだったのでシェア。 jQuery MobileでGoogleMap APIを使った サンプルがオープンソースで公開されて いました。ストリートビューなども表示する ことが可能です。興味の有る方はチェック してみては。 スマフォにGoogleMapを表示させるのに、Google Maps JavaScript API V3が必要みたいですが、これをスマフォ対応を簡略化するjQueryプラグイン、jQuery Mobileで使おう、というもの。 jquery-ui-map GoogleMap APIをjQuery Mobileで使ったサンプルです。jquery-ui-mapというプラグインも使用しています。このサンプルはMITライセンスでソースが公開されていますよ。 以下、デモのキャプチャです。 iPhone iPhoneでの実装状態です。 ランドスケープ時も自動で横幅をあ
美しいフォームデザインを実装する事が可能なjQueryプラグイン・Ideal Forms
チェックボックスやラジオボタンなど、フォーム周り のデザインを美しくする事が出来るjQueryプラグ イン・Ideal Formsのご紹介。スタイルもいくつか 用意されており、フレームワークとして使えるよう です。デザインテーマもいくつか用意されている ので好みで選ぶことも出来ますね。 ボタン、セレクト、ラジオボタンやチェックボックス等のフォームデザインを変更できます。デザイの変更はcssのみで可能なフレームワークタイプなのでノンプログラマーな方でも気軽に使えそうですね。IE6以外は対応しているようです。 フォームのデザインをガラッと変えることが出来ます。よりデザインに統一感を出せそうですね。 テーマも用意されている Ideal Formsはフレームワークとしても利用出来るように、cssでデザインが変更できる作りになっています。現在は3つのcssファイルがテーマとして用意されていますのでそ
ポートフォリオやフォトログに良さそうなミニマルデザインのWordPressテーマ・Simply Delicious
個人的に結構ツボだったのでメモがてら ご紹介。ポートフォリオサイトやフォトログ に最適なシンプルでミニマルなデザイン のWordPressテーマ・Simply Delicious です。無駄な装飾も一切なく、構成もシン プルで使いやすそうです。 見た目はシンプルですが、なかなか凝ってます。今月の5日にリリースされたばかりですよ。 様々なミニマルデザインを紹介するmmminimalで使用しているテーマを配布してくれています。 無駄な装飾なし 無駄な装飾に邪魔されず、お気に入りの写真や作品などをアピールが出来ます。1番上に最新記事が表示されますよ。2番目移行はギャラリー形式に。 個別ページ 個別ページです。両サイドには前、後の記事へのナビゲーションがあります。 コメント部分。ナビゲーションはfixedされています。3つの記事が関連記事として表示されます。マウスオーバー時はエフェクトもかかります
jQueryやHTML5を使ってiPhoneやiPad向け電子書籍を作成する為のフレームワーク・Laker
iPadや、iPhoneなどのタッチデバイス の普及で、個人的にも電子書籍への 関心がかなり高まりました。そんな中、 割と良さそうな電子書籍専用のフレーム ワークがあったのでメモがてらご紹介。 こういうの覚えておくと重宝しそうですね。 なかなか動きが良かったです。ただ読むだけの電子書籍ではなく、HTML5やjQueryを使って、より「電子」らしく表現出来ると楽しそうですね。 HTML5で作る電子書籍用のフレームワークです。jQueryやiPadのようなタッチデバイス向けのフレームワークとなっています。 複数フレームワークを併用 Lakerには定番のjQueryや、iPhone、iPadで黄金比を保つcssフレームワークのLess Framework、HTML5+jQuery製動画プレイヤーのjPlayer、スワイプイベントをサポートする為のライブラリ、TouchSwipeなども搭載されてい
商用OK・無料でクレジット表記もリンクも不要！日本人の人物写真素材サイト・モデルピース
これはかなり重宝するのではないでしょうか。 日本の人物写真素材が無料で商用OK,更に クレジット表記やリンクも不要のサイト・モデル ピース。人物写真は基本的にどれも有料か、 あっても日本人ではなかったりですが、こちら は無料ですし、国産のサービスなのでモデル さんはみんな日本人です。 お友達のまさとさん(@makavelicom)に教えてもらいました。ご紹介するモデルピース以外にもいろいろまとめられてるのでチェックしてみてください [note]激安で日本的な写真素材、レンポジサイト一覧[/note] 無料・商用OK・リンクもクレジット表記も不要で解像度も高いです。こんないいサイトがあったとは知りませんでした。足成とは別の選択肢としてかなり重宝しそうです。 日本人の人物写真を専門に扱っていて、無料ながら商用OK、リンクもクレジットも不要とのこと。ありがたい。 数もかなり豊富 数が少ないかと思
HTML5やCSS、jQueryなど、Web制作に関する日本語スライドを集約したSlideFinderが便利っぽい
結構便利だったのでシェア。Web制作 に関する日本語スライドを集約している フォロワーさん作のWebサービスです。 話題のHTML5やCSS、iPhoneの事や jQueryからPHPやRubyと幅広くサポート してあります。 人気のスライド共有サイト、SlideShareで日本語のスライドのみを集めています。スライドはその場でLightbox風にポップアップして見れます。英語が苦手な方も探す手間が省けるのでは。 @deeekiさん作のWebサービスです。クックパッドのエンジニア向け「第2回 開発コンテスト24」に応募する予定だったようで、数時間で作成されたみたいで見た目はシンプルですね。 カテゴリもHTML5やjQuery、PHPやiPhone、WordPressなど多岐にわたりサポートされていますので全Web屋さん向けと言えそうです。 日本語のスライドのみを集約 集められたスライドは全
写真の撮影技法とか加工技法に関して少し調べたのでメモ
最近よく見かける写真撮影技法に 関して調べ物をしたのでメモ的に。 専門家では無いので基本的にネット 頼りの知識でしか無いです。僕も 勉強がてら調べた程度ですので、 特に目新しい情報ではないです。 僕が最近よく見かける写真撮影技法や加工技法を調べてたので備忘録。素人なので内容は特に新しいものではないです。尚、個人的な検索用ですので、存在する全ての撮影技法や加工技法を掲載している訳ではありません。 ※例に挙げてる画像は僕が撮った写真です(OLYMPUS E-520を使用) ハイダイナミックレンジ(HDR) 通常の写真技法に比べてより幅広いダイナミックレンジを表現するための写真技法の一種。常の写真では表現のできない広いダイナミックレンジをヴィジュアルイメージとして通常の狭いダイナミックレンジの中に定着することができ、通常の写真と比較すると肉眼に近い画像とすることができる。反面、通常の写真ではあり
Webサイトのレイアウト調整や補助に使えるjQueryプラグインいろいろ
レイアウトの調整を簡略化したり、通常 は難しいレイアウトを可能にしたり、とい った補助的なjQueryプラグインのまとめ です。最近探す機会が増えたので今後 の為に備忘録的に記事にしておきます。 この手のプラグインは数多にあるので 好みで端折っています。 レイアウトの調整や補助などに使えるjQueryプラグインのまとめ。と、言っても大抵は既出だと思います。順不同。 Supersized 画面に合わせて自動的に背景画像を伸縮してくれるだけでなく、スライドショーにもなってくれます。いつか仕事で使いたい。最近FlickrのAPIにも対応しました。 Supersized jQuery UI.Layout Plug-in ブラウザごとの差異を考えずに自由にレイアウトを組めます。 jQuery UI.Layout Plug-in JQUERY CUSTOM CONTENT SCROLLER スクロール
スマートフォン向けのJSフレームワーク・Wink Toolkitがバージョンアップしてより素敵になったよ
以前ご紹介した、スマートフォン向けの JavaScriptフレームワーク、Wink Toolkit がバージョンアップしたんだぜ、と開発者 さんからわざわざお問い合わせ頂いたの でご紹介。以前もかなり豊富なUIでとても 有意義なフレームワークだと感じましたが、 今回はUI面が特にパワーアップ。 Wink Toolkitがバージョン1.3になって機能もいくつか追加されました。3ヶ月間、UIの改善にかなり力を入れてくれたようで、スマフォにかなり合わせてくれましたよ。 jQuery Mobileライクなインターフェースになりました。もともとUIエフェクトの評価は高かったWink Toolkitですが、全体的なデザインが見直されてかなり垢抜けた感じです。 尚、以前の機能やUIは過去記事をご参照下さい。 Wink Toolkitが割と良かったので日本語サンプル作った Demo 前回はほぼ全てのデモを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
商用でも使えるシンプルで使い勝手の良さそうなソーシャルアイコンセット・JustVectorとFALというライセンスに関するメモ
