タブやフォーム、ボタンなど、各種コンポーネントのスタイルも用意されているレスポンシブWebデザイン対応のフレームワークのご紹介。SASSを使って構築しているそうです。レイアウトも数種用意済みです。 SASSで作られたフレームワークです。ほんと、この手のは沢山出てきますね。選択肢があるのはありがたいです。
各種コンポーネントのスタイルも用意されたレスポンシブWebデザイン対応フレームワーク・Groundwork
タブやフォーム、ボタンなど、各種コンポーネントのスタイルも用意されているレスポンシブWebデザイン対応のフレームワークのご紹介。SASSを使って構築しているそうです。レイアウトも数種用意済みです。 SASSで作られたフレームワークです。ほんと、この手のは沢山出てきますね。選択肢があるのはありがたいです。
WordPressの投稿フォーマットの選択項目を分かりやすく表示するプラグイン・wp-post-formats - かちびと.net
投稿フォーマットの選択項目を、分かりやすく表示する、というプラグイン、wp-post-formatsのご紹介です。ラジオボタンをタブにするだけですが、Tumblrっぽくなるので使いやすい気はしました。投稿フォーマット自体あまり使われてない感じもしますけど・・ Tumblrライクに投稿フォーマットの選択項目を表示する、というもの。 こんな感じでタブで選択、URLや画像のアップロードが必要な項目は、タブを切り替える事で表示されます。 ↑ 引用項目ならこのようにソース先を入力する 投稿フォーマット、便利だけどあまり使われない印象ですねー・・仕方ないといえば仕方ないですけど、こういったプラグインもあるので宜しければご利用になってみてください wp-post-formats
シンプルなWebサイトインターフェースを実装する為のフレームワーク・ink
シンプルなインターフェースを構築する為のキット、inkのご紹介です。フレームワークの一種ですかね。ナビゲーションやレイアウトなどの雛形の様な物が用意されています。 開発が楽になるように、という名目で作られたっぽいです。便利なフレームワークは数多にあるので選択肢の一つとして。
インストール済みのWordPressテーマの表示をフロントエンドで確認出来るツールバーを実装するプラグイン・WordPress Theme Demo Bar - かちびと.net
WordPressのテーマを複数配布するような方向けのプラグインになります。よくある表示デモをスイッチするバーをプラグインで実装するというもの。テーマ開発者さん向けですね。 未だにテーマを配布する方が増えない日本ではおそらく需要は少なそうではありますけど・・ 海外のサイトでたまに見かける、テーマの表示をスイッチできるバーを実装するやつです。 ↑ こういうやつ。スイッチするテーマはインストール済みのものになります。配布するテーマが複数あってもサブドメインでデモ用のWP1つ作れば事足りそうですね。 ただ、テーマによってはバーが表示されなかったり崩れたりしますので、若干工夫しないとかもしれません。 WordPress Theme Demo Bar
WordPressでページ毎にbodyタグのidを振る - かちびと.net
久々にWP関連の記事。bodyに、 ページ毎にユニークなidを振る というもの。body_classを使え ない状況、使いたくない理由が ある場合等の代替方法として、 またはidにしたい場合などに。 body_class()以外の代替案です。自分用メモ。 コード $body_id =""; if ( is_single() || is_page() ) { $body_id = ' id="'.$post->post_name.'" '; } else if ( is_category() ) { $category = get_the_category(); $body_id = ' id="category_'.$category[0]->category_nicename.'" '; } ページ名やカテゴリ名を取得します。で、 <body <?php echo $body_id; ?
タブやアコーディオン、パララックスなどを実装出来るjQueryベースのUIツールキット・jKit - かちびと.net
jQueryベースのUIツールキット・jKit のご紹介です。タブやアコーディオン などの良く使われるものから、簡易的 なパララックスやバリデーション、ズ ーマーなどなど多機能なUIキットとな っています。 2013年になりました。喪中により新年の御挨拶を控えさせて戴きます。皆様に取って本年が充実した年でありますようお祈りいたします。 さて、今日はUIキットのご紹介。jQueryベースとなっています。 jQuery UIでいいじゃんと思う方も多そうですけど、選択肢があるに越した事はありません。 ずらっと並んでいます。機能は42種とかなりの数です。 使い方は基本的には他のプラグインと変わりありません。コアとjKitを読み込んでセッティングします。 DOM要素にrel属性を与える形で実装します。 <div id="foo" rel="jKit[accordion]"> 例えばアコーディオンなら
簡易的なクイズを作れるjQueryプラグイン・SlickQuiz - かちびと.net
簡単なクイズコンテンツを作れる、というjQueryプラグインのご紹介です。クイズの回答次第で分岐する、みたいな細かい設定はできませんが、これはこれでシンプルでいいかも。 1問1問回答して進めていくような、簡易的なクイズを作れる、というスクリプトです。 選択肢を選んで進むと別の選択肢が出て正解/不正解を表示させる、という流れ。最後に正解数がとメッセージが出ます。 <script src="jquery-1.7.min.js"></script> <script src="slickQuiz-config.js"></script> <script src="slickQuiz.js"></script> 回答やメッセージはJSONを使うみたいです。 $('#foo').slickQuiz(); あとはクイズを表示させる場所を指定すれば完了 何かで使えるかも。という事で備忘録でした。 Slic
HTML5によるWebカメラの導入をサポートするjQueryプラグイン・Photobooth.js - かちびと.net
HTML5でWebカメラに対応可能なWebサイトを実装するのを手助けしてくれる、というスクリプトのご紹介です。トリミングや色彩変更などの編集も可能のようです。 自分自身がWebカメラに対応したデバイスを現在手元に持ってないので動作テストしてないです。あとで検証しますが、現時点ではあくまで備忘録ですのでその程度の記事という事でご了承下さい。 当方の端末では対応して無いのでこのようにエラーが表示されてしまいますが・・編集も可能と言うのは凄いです。 実際はこのようになると思います。 getUserMediaに対応したブラウザならJavaScriptでWebカメラにアクセス可能です。マークアップはvideoとcanvasで実装出来ると思いますが、Photobooth.jsは、+編集が出来ます。 ご興味のあるかたは是非試してみてはいかがでしょうか。尚、実装テストしていないので詳細は割愛いたします。正
SlideShare等にあるスライドを動画とシンクロさせるJavaScriptライブラリ・Presentz
自分では多分使わないと思います けど、技術が凄いなーと感じたの でご紹介。よくあるスライドを、 YoutubeやVimeoなどの動画にシン クロさせる、というライブラリ だそうです。 自分で動作テストしたわけじゃないので紹介だけ。スライドと、そのスライドを紹介する動画をシンクロさせ、動画を再生すると同時にスライドを自動で進行させる、というライブラリ。うまく説明できませんのでデモを見たほうが早いです。 Webサービスになっていますが、ソースも公開されています。node.jsを使ってるみたいですね。 動画を再生すると、その動画中で紹介してる箇所をスライドも表示、動画が進むとスライドも次ページに移動してくれる、というもの。 将来、学校の授業もこんな感じになるんだろうか・・以下で動作デモを確認出来ます。ライブラリのライセンスはGPLとの事。使い方は確認してないので割愛します。 Presentz
フルスクリーンにイメージギャラリーを実装するjQueryプラグイン・jmFullWall
フルスクリーンのイメージギャ ラリーを実装するスクリプトが あったのでなんとなくメモ。ビ ジュアル的にも良いので用途は 割とありそうな気がします。 全画面を使用してサムネイルをグリッドに沿って並べる、というギャラリー。 全画面にサムネを隙間無く表示。クリックで拡大、というもの。 公式のサンプルです。 Sample 拡大表示もフルスクリーンです。拡大した後、さらにもう一段階拡大可能。デモで使われている写真はデモ用なのでアレですが、高解像度の写真をじっくり見て欲しい、というコンテンツには凄く良さそうですね。コスメやファッション、ブランド物などなどと相性良さそう。 時間無いので詳細は割愛。以下でご確認下さいませ。 jmFullWall
Twitter Bootstrapから派生したWeb制作向けフレームワーク・Plusstrap
派生と言っていいかどうか分かり ませんけど、Plusstrapは、より 迅速にWeb開発を可能にしたフレー ムワークとのことです。アプデ したBootstrapをちゃんと把握 していないので詳細は触れない でおきます。 Twitter Bootstrapを元に、より迅速にWeb開発が可能になる、というフレームワークだそうです。派生の定義が良く分かってないので違っていたらごめんなさい。 正直な話、時間作れてなくてソース殆ど見てません。ナード向けだそうです。自分は一般人なのでギークとの違いが良く分からないですが凄い人向けって事なんじゃないでしょうか。 各種コンポーネントも揃ってます。 カスタマイズも可能。不要なものをチェックから外せば軽く出来ます。 今の仕事が落ち着いたら触りたい。 Plusstrap
WordPressのカスタムメニューをアイテム毎に条件分岐で表示/非表示を設定出来るプラグイン・If Menu - かちびと.net
カスタムメニューで追加した アイテムを条件分岐で表示、 非表示にスイッチできる、と いうWordPressのプラグイン です。コードを参考にしたの でご紹介。 カスタムメニュー周りのプラグインは仕様でもよく求められることが多いので非常に助かります。このプラグインもCMSとしてWPを利用する際に役立ってくれそう。 カスタムメニュー内のアイテムを固定ページのみ、TOPページのみ、ユーザーログイン時のみ、などの条件をつけて表示/非表示できる、というもの。 プラグインを有効化すると、カスタムメニューで追加したアイテムの下部にEnable Conditional Logicというラベルの付いたチェックボックスが表示されますのでチェックを入れればセレクトボックスも表示されます。 現時点では、決められている条件が多くはなく、変更も出来ないので実際に利用する際は少しコードを弄らせてもらう事になりそうです。
管理画面内でスマフォやタブレット別にCSSを書けるWordPressプラグイン・Mobile CSS
ちょっと便利そうだったので 備忘録。スマフォやタブレット のデバイス別にそれぞれに適応 させたいCSSを管理画面内で 書ける、というWordPressの プラグインです。 スマフォでもiPhone用、Motorola用、タブレットならiPad用、Nexus用、Kindle用などのように細かく設定できます。 シンプルなプラグイン名ですが、かなりの数のスマフォとタブレットデバイスをサポートしています。個別にCSSを適応させられるのでコンテンツ次第では結構役立ってくれるかもしれません。 カスタム投稿タイプを応用してCSSを書く、と言う珍しい仕様です。いつも記事を書く場所にCSSを書き込みます。後は下部のメタボックスでデバイスを選択し、保存すればデバイスごとにCSSを適応させる事が出来ます。 他のデバイスに別のCSSを用意したい場合は、記事を追加する感覚で再度作ればいいだけ。メタボックスのセレクト
シンプルなパララックス効果付きのイメージスライダーを実装するjQueryプラグイン・jQuery Destaque
画像がスライドする際に視差効果 を与える事が出来るjQueryプラグ インのご紹介。イメージスライダー とは相性良さそうですね。シンプル なものですが、応用も出来そうです。 パララックスなイメージスライダーです。画像をスライドさせるとテキストがやや遅れて動きます。 デモが目にやり場に困る写真ですが・・工夫すれば訴求力のあるコンテンツに出来そうです。アニメーションはeasing使ってますです。 $('.foo').each(function(index, el){ $(this).destaque({ slideMovement: 100, slideSpeed: 1000, elementSpeed: 1100, easingType: "easeInOutExpo", itemSelector: ".piyo", itemForegroundElementSelector: ".hoge
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ブラウザ上でPCにインストール済みのフォントを表示テストできるツール・typezebra
SASSを使用したレスポンシブWebデザイン対応のCSSフレームワーク・Centurion - かちびと.net
1カラムでシンプルなデザインのWordPressテーマ・Solar Theme - かちびと.net
MetroライクなTwitter Bootstrap用デザインテーマ･Cosmo - かちびと.net
速度に焦点を当てたレスポンシブWebデザイン対応のWordPressテーマフレームワーク・Frank
Webサイトの閲覧にパスワード制限をかけられるシンプルなWordPressプラグイン・Password Protected
