Touchstone.jsはモバイルアプリのためのUIフレームワークです。React.jsベースのようですね。美しくハイブリッドなアプリの構築をサポートしてくれる・・との事ですが、まだロードマップを見る限りでは制作途上みたい。デモも動きが若干もっさりしてる印象でした。引き続きチェックしておきたいところです。ライセンスはMITとの事。 Touchstone.js

WordPressの固定ページを管理しやすい ようにする、というプラグインのご 紹介。ツリー状にして見やすく、把握 しやすくしてくれます。CMSとして WordPressを使う際はとっても便利な プラグインですね。 個人的には以前ご紹介したCMS Tree Page Viewで慣れているので変更は無さそうですけど、これはこれで使いやすそうでした。 CMSとして使う際は固定ページの数が多くなるのでデフォルトのままだと若干管理しにくいです。そこで、こういったプラグインで管理性を高めると利便性が向上します。 ↑ CMS Tree Page Viewはツリー状の管理ページを増やす仕様なのに対し、Advanced Page Managerは既存の固定ページの管理ページを変更します。多言語化はされていないので英語表記になります。利用する際は日本語に変換しないとですね。CMS Tree Page Vie

ユーザーにどれくらいページ内で スクロールされているかをGAの イベントAPIを使って解析する為 のjQueryプラグイン・Scroll Depth のご紹介。 スクロールに応じて視差効果を演出できるパララックス系サイトやペラサイトのような1ページで完結するタイプのコンテンツを持つサイトは割と見かけるので、どれくらいスクロールされているかを解析する方法もあるといいかもですね。という需要に応えたライブラリみたいです。 ※時間なくて動作テストしてないのでその程度の記事という事で今日はご了承下さい。 ユーザーのスクロール状況をパーセンテージでトラッキングするプラグイン。デフォルトでは25％、50％、75％といったポイントで解析できるようになってるみたい。また、任意のDOM要素をターゲットにする事も出来るそうです。 コード<script src="https://ajax.googleapis.c

WordPress週間の最終日です。今日は、 地味で、あまり知られていないけど、 知っておくと割と便利なカスタマイズ Tips集。CMSとして使う際は結構頻度 が高くなります。覚えておいて損は しないと思います。 当サイトのWordPress週間、今日は最終日です。先日WordPressのカスタマイズに便利なスニペット集をリリースしました。その宣伝も兼ねて。 WordPressスニペット 今日は、地味だけど覚えておくと割と便利なWordPressカスタマイズTipsいろいろです。動作テストはWordPress Ver.3.3.1で行いました。順不同です。 1つのカスタムフィールドで複数の値を登録→実装 カスタムフィールドは沢山あると使いにくくなります。シンプルなものなら1つにまとめてしまいましょう。 一つの「名前」で複数の値を登録するには、値の中でコンマで区切って(犬,猫,鳥という感じで書

WordPressではショートコードを自作して 好きなときに使う事が出来ます。ショート コードを利用すると、通常記事内では出来 ない事もできる様になったり、面倒なマーク アップを簡略化できたりと、とても便利 ですので、ぜひ覚えてみてください。 という訳で、WordPressで作っておくと便利なショートコードをいくつかご紹介します。 その前に宣伝。 WordPressのスニペットを集めてシェアする事にしました ご存知のように、WordPressで使える便利なコードは日々世界中で公開、シェアされています。その背景にWordPressがOSSであることが理由の一つとしてあげられるかと思います。 WordPressはGPLですので、極論を言えば有料のプラグインも無料で配布可能です。このあたりがGPLが一部の方に嫌われる原因でもありますが、沢山のコードを割と自由に使う事が出来るのも利点の一つです。

覚えておきたいTipsだったのでメモ。WordPressでのJPGの画質を少しでも改善させよう、という方法です。手軽に出来るので覚えて置いて損は無いかと思います。設定されている圧縮比を変更する、という方法。 今まで知らなかったんですけど、覚えておくといいかも。 リサイズ機能 WordPressにはリサイズ機能があります。例えば横幅500pxの画像をアップロードした際、300pxの幅で使いたければ上記のようにサムネイルを選択出来ます。 foo.jpgという名のファイル名なら「foo-300×225.jpg」という、リサイズされた画像を生成してくれます。 デフォルトは90％ この際の圧縮比がデフォルト値では90％になっています。wp-includes/media.phpの410行目あたりには image_resize( $file, $max_w, $max_h, $crop = false,

同じようなの沢山あるのですが、 軽量って言葉に弱い。背景一杯 に画像を表示、スライドショー 化も可能なjQueryプラグインで す。圧縮版なら2KBほどですの で導入しやすいですね。 背景一杯に表示出来るやつでスライドショーにも対応で軽量です。圧縮して2KBくらい。しないで5KBくらいです。 似たようなのは一杯あるので他にも探してみてください。個人的にはこれはカスタマイズしやすそうだったのでちょっと使ってみようかなと思います。 IE7でもOK。6だとfixedが効かないので、ちょっとアレです。 コード<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="jquery.backstretch.min.js"></script> <script>

私的なメモです。WordPressで個人的にWebサイトを構築したり、受注した際の手順リストをメモ。自分用のチートシートです。いつも何かしら忘れている気がするのでいつもやる事をぱっと見で分かりようにリスト化しておきます。※個人的な主観が入っています。 Todoソフト等はあまり使わないので本当に私的なメモですが、これが誰かのお役に立てたら幸甚です。プラグインなども好みが有ると思いますのでご参考までに。。 [note]情報が古くなったので改正版としてアップデートしました。[/note] インストール DB作成 WP最新版をダウンロード wp-config.phpをDBに合わせて変更 接頭語も変える（wp_　→　example_） FTPソフトでサーバーにインストール ログインして管理者権限のユーザーを作成 作成したユーザー名で再ログイン adminユーザーを削除 ダッシュボードの不要なコンテン

気になったので備忘録的に触って見ました。 ハードウェアアクセラレーターを使った CSS3の新機能を実装出来るjsライブラリ・ Alice.jsです。と、分かったような事を 書きましたが、まだちょっと勉強不足で いろいろ調査中です。ので内容にはあまり 期待しないで下さい。 アクセラレーターに関しては以下の記事がわかり易いです。 iOSのアクセラレーターが使えるCSS3 このアクセラレーターを使って高度なビジュアルエフェクトの生成をちょいと簡略化しよう、という意図で作られたライブラリみたいです。 サンプルを見たほうが早いと思いますので以下でChromeかiOSにてご覧下さい。6つ用意しました。 Sample01・TossSample02・WobbleSample03・RotateSample04・SpringSample05・BounceSample06・carousel出来ればiPhoneな

cssの小技的なテクニックが便利なので好きなん ですが、cssそのものが嫌いで覚えられないので カンペ的な記事を作ることにしました。便利な小技 は沢山あるんですが、特に自分が良く使いそうな Tipsをメモします。既に出回っている情報ばかりで 特に目新しい手法はありませんので何も期待でき ないです。 というわけで特にテーマも一貫性も無くて、ただ便利ってだけです。推奨されない方法もあるかもしれませんが、僕は細かいこと気にしませんのでそんな感じです。 内容も既出なのでお詳しい方にはお役に立てないですが、僕の個人的なメモなので適当に流して頂けると幸いです。 floatで並べたリストのセンタリング Sample01 コード .centered { position: relative; overflow: hidden; } .centered ul { position: relative; le

ご質問頂いたので記事にしてみます。ECサイト をWordPressで構築したいけど良いテーマや、 参考になるテーマはないだろうか、との事でした ので、無料で手に入るECサイト向けのWordPress テーマをいくつかご紹介します。ソースコードや デザイン、レイアウトなどを参考にしてみては いかがでしょうか。 というわけで無料で手に入るECサイト向けのWPテーマです。さほど数は無いですけど・・ECサイト構築用のプラグイン（WP e-Commerceなど）に依存したテーマなどもあります。 でもまぁ大半はtokokoo.comで配布されているテーマです。多くのテーマは有料ですが、一部の機能を削ってフリー配布してくれています。ダウンロードにはユーザー登録（無料）が必要です。 BuySell Theme 綺麗でシンプルですね。個人的には一番好きでした。キャプチャは商品ページです。要WP e-comm

tumblrで画像収集するのは割と当たり前 ですが、後で見返すときに見にくいテーマ だと見る気がしないのでいろいろ試して いましたが、せっかく試したのでついでに 画像収集に向いてそうなtumblrのフリー のテーマをご紹介します。 というか変えたい時に探してるんですけど、いちいち面倒なのでメモしたいんですが、せっかくなのでここにリンク集作ってシェアしようかなと思った次第です。 簡単ではありますが、特徴をメモ書きしています。Lightboxが付いてるとか、自動で次のページを読み込むとかリキッドレイアウトとか。 全てをちゃんと確認したわけではないので、参考程度に。順不同、全部で51個ありました。 キャプチャはテスト用で作ったものです 全部無料です 環境次第でカラム数が変わるものもあります 長くなってしまって見る気がしないので1カラムは省いています。 Themanati 3カラムのリキッドレイア

なかなかシンプルで良かったので ご紹介。人気のデバイス、iPhone やiPadで閲覧してもレイアウトを綺麗 に保てるように設計されたWebサイト のスターターキット。内容物はHTML、 CSS、JavaScriptです。 シンプルな構成ですが、欲しい部分は用意してくれている、と言った感じのスターターキット。なかなか気に入ったのでデモを作りました。 HTML+CSSのシンプルなフレームワークです。グリッドレイアウトを使った美しいレイアウトで、Media QueryによるiPhone / iPadでのアクセス時のレイアウトも最適化されており、jQueryで作るタブコンテンツのサンプルコードもあります。 デモ作ったので、宜しければお好きなデバイスでアクセスして見てください。 Sampleサイト※別窓 iPhoneでアクセス iPhoneでアクセス。 ランドスケープ iPadでアクセス iPad

なかなか面白そうだったのでご紹介。 Webやロゴなどのデザイナーさん向け の成果物共有サービスです。お仕事 で作ったものを紹介しあって、お互いの インスピレーションを高めよう、という 趣旨のようです。 シンプルで良かったのでメモ。Twitterのアカウントがあれば参加できます。自分のデザインしたものを見せ合おう、みたいなソーシャルサイト。アイデアも共有できそうですね。 単純に、自分が作ったものを見せ合おう、というソーシャルサイト。Twitterアカウントがあれば誰でも参加可能です。この手のサービスは大抵が招待制ですが、とあるように、気軽に参加できるみたいです。 機能もシンプル 成果物単体のページでは、お気に入りに登録したり、コメントしたり、Twitterへの投稿が出来ます。Likeしたアカウントと人数が出るとモチベーションも上がるかもですね。 簡単なポートフォリオとして ユーザー画面は一覧

iPhoneのアプリやAndroidアプリ等の デベロッパーさん向けですかね。スマホ 向けのUI専門ギャラリーサイト・lovely ui。 シンプルで見やすいです。いくつか同じ ようなデザインギャラリーがありますが、 複数あっても困らないですので覚えて おきたいですね。 アプリ開発者さん向けのデザインギャラリーです。UIで困った際はご覧になってみては如何でしょう。

インスピレーションを向上させたい 時に僕が見てまわるWebサイトを ご紹介。というか基本的に殆ど閃く 事は皆無に等しいレベルでナンセ ンスな人間なのでドーピング的に 綺麗なものを見るようにしています。 というわけで、発想力の有る方には全く役に立たないエントリーです。個人的には勉強を兼ねたWebデザイン、フォトグラフィのためのインスピレーション向上が目的ですが、「発想力を上げる」というのは様々な業種の方にも通ずるものがあるのではないかと思っています。 パッと見、一貫性の無いまとめですが、どのサイトからもアイデアを貰ったことがあるのでそういったWebサイト集になります。順不同。 Dribbble 世界中のデザイナーの作品が見れるサイトです。新しく作ったコンテンツを公開してくれます。色やカテゴリで探せますが、どれも素敵なのでダラダラ見てるのも楽しいです。 Dribbble We heart it