MOST The HEARTED 2015はCodepenで話題になった投稿TOP100をランキング化したWebページです。最もグッと来た投稿、コードを紹介しています。心に来たコード＝実際に案件で利用できるという訳ではありませんが思いつかなかったアイデアの発見が出来たりと、勉強にはなりますね。Micrsoftが古いIEのサポートを事実上終了したもあり、今までのブラウザ間における問題がより一層減っていきそうな気配もありますのでこうしたトリッキーなコードにも今まで以上に目を向けていきたいところです。 MOST The HEARTED 2015

COLORSはCSS2.1で設定されている標準カラーを少し変えて綺麗なカラーパターンにする為のCSSです。17色のうち、whiteを除く16色に手を加えてみたよ、みたいなの。W3Cが標準とするには理由があると思いますので標準色は標準色として守られるべきではあるでしょうが、まぁ確かにこちらはオッサンである自分の目には優しいかも。一つのカラースキームのアイデアという事みたいですし、こういう提案も面白いですね。個人的にはoriveとredとmaroonはもう少し標準に近いほうが良い気はします。本CSSを考案された方は他にも色にまつわるリソースを公開しているのでチェックしてみてくださいね。Webサイト下部にリンクがあります。 COLORS

JottedはjsFiddleライクにブラウザでJSやHTML、CSSのコードを実行テスト出来るツールです。OSSとしてソースコードが公開されています。動作は非常に軽量でMarkdownやLess、CoffeeScriptにも対応可能のようです。ライセンスはMITです。 Jotted

Feature.jsはブラウザのサポート状況をチェックしてくれる高速且つシンプル、軽量なブラウザの特徴検出スクリプト。他ライブラリへの依存も無く、わずか1KB程度で動作してくれます。Modernizrライクに利用する事が可能で、例えばWebGLがサポートされている/されていないブラウザでのアクセスを条件分岐で任意のclassを付与する等が容易に可能となっています。以下はWebGLをサポートしているブラウザでのアクセスの際、HTMLにwebglというclassを付与するコードです。 if (feature.webGL) { document.documentElement.className += " webgl"; }jQueryを使用したWebサイトなら if (feature.webGL) { $("html").addClass("webgl"); }とすればいいみたい。これで<ht

実際にコードを書いて学べる学習コンテンツ・Try jQueryのご紹介です。jQuery公式のオンライン学習サイトっぽいですね。英語ですけどこれから学ぼうという方にはうってつけかもしれません。 実践でjQueryを学べるサイトです。スライドも完備されています。英語が苦手な方にはちょっと難しいかもですけど・・ ドメインから察するに公式のものでいいと思います・・確認はしていませんけど。内容は基本的なものからスタートします。 スライドからスタートです。 他の学習サイト同様、指示通りに進めていきます。 正解ならSuccess!の文字が出て次に進みます。 これから始めたい、という方は如何でしょうか。 Try jQuery

現在の案件でご要望いただいたので方法をメモ。ショートコードで現在の年齢を表示させる、という方法です。確かに毎年更新するのは面倒な部分ではありますので自動化出来ると楽ですかね。 WordPressで、ショートコードで誕生日を書くと年齢が表示される、というのを作ります。 function my_age($birthday) { extract( shortcode_atts( array( 'birthday' => 'birthday' ), $birthday)); return (int) ((date('Ymd')-$birthday)/10000); } add_shortcode('my-age', 'my_age');これで、以下の表記で年齢が表示される。 わたしは[my-age birthday=”19790214″]歳です 1979年の2月14日生まれの場合の書き方です。 実

便利そうなので備忘録。iOSやAndroid、タブレットやPCサイト等にだけ、限定したコンテンツをショートコードで表示可能にする、というWPプラグインです。記事部分は共通になってしまうので、こういった方法をショートコードで出来るのは楽ですね。 ほぼ同等のものを以前の案件で作ったのですが、プラグインが存在してたのでメモ。ショートコードでモバイルデバイスにのみ表示させられるようにするプラグインです。 とはいえ、まだ使った事無いので正常動作するか不明です。その程度の記事という事でご了承ください。

タッチデバイスに対応したLightboxを実装するスクリプトのご紹介です。jQueryに依存します。多機能なものではありませんが、使いやすくて良さそうです。ただ、実機での動作テストをしていませんのでその程度の記事。 タッチデバイスで使えるLightboxです。 見易くていいかも。CSSでカスタマイズできるらしいのでMedia Queriesを使うだけで対応できるなら楽でいいかも。 スマフォのスクショです。 $(".foo").swipebox();使い方はいつも通り。 <a href="big/bar.jpg" class="foo" title="My Caption"> <img src="small/bar.jpg" alt="image"> </a>マークアップもclassを振るだけ。 詳細は以下で確認できます Swipebox

Facebookページの投稿を任意のWebサイトに表示するjQueryのプラグイン・Facioのご紹介です。公式のが嫌、という方はこちらをご利用になってみては如何でしょうか。 Facebookページの投稿を羅列させる事が出来る、というもの。以下が動作デモです。 動作サンプルもう投稿しなくなりましたけど・・当ブログのFBページを表示させてみました。少し表示に時間かかります。 ※input要素が必要と言うわけではありません。貴方のFBページのURLを入力すれば表示テストが可能です。 コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js'></script>jQueryのプラグインなのでコアを読み込みます。 <div id="facio"></d

使う機会は個人的には多くは無い かもですが、なかなか面白い発想 だったのでご紹介。既に公開した 記事の末尾に、フロントエンド側 からコンテンツを追加できる、と いうWPプラグインです。 Automattic社製のWordPressプラグイン。フロントエンド側でコンテンツを追加・・出来るのですが、どちらかというとコメントっぽい感じです。 イベントの更新を素早く伝えることが出来る、みたいな用途だそうです。（多分 プラグインを有効化し、liveblogを使いたい投稿の投稿ページ下部チェックボックスにチェックを入れると記事下部にliveblog用のボックスが追加されます。追加されたコンテンツはそれぞれ単体で削除する事が出来ます。 画像なんかはドラッグ&ドロップで追加できます。 ただし、the_content()内に追加コンテンツが格納されるわけじゃないっぽいのでちょっと注意必要かもです。よく見てな

jQueryのプラグインをひたすら 紹介するWebサイト、jquer.in をご紹介致します。紹介されて いるプラグインは割と最新の ものが多いようです。 ひたすらjQueryプラグインを紹介するWebサイト。割と最近作られたプラグインばかり紹介してるみたいです。

WordPressのアイキャッチ画像は とても便利ですけど、全ての方 が毎回登録するとは限りません。 クライアントさんの中でもやはり 毎回登録するのは面倒だ、という 方もいます。 確かに毎回アイキャッチを登録するのも、慣れていないと面倒です。しかし、何もしないとレイアウトが崩れてしまう場合もあります。その為、テーマファイル内で条件分岐して、レイアウトを調整して・・・というのも面倒ですよね。 なので、アイキャッチを設定しない際は自動でデフォルト画像が表示されるようにしましょう、というのが今日の内容です。 よく使われる方法 if (has_post_thumbnail()) { the_post_thumbnail(); }else { echo '<img src="' . get_bloginfo('template_directory') . '/images/default.png'

結構良さそうだったので備忘録。レスポンシブWebデザイン向けのライブラリです。モバイルのサイズになるとグローバルナビを横スライド式に切り替える、というもの。面白いですねー。 これ結構いいんじゃないでしょうか。レスポンシブWebデザインにするとどうしてもナビゲーションが縦長になりがちなのでその不満は解消できるアイデアですね。 PathやFacebookのiPhoneアプリのような横スライドメニューは使いやすいかもしれない。 Pathのようにというか、全く同じじゃないんですが、モバイルサイズになると横スライド式のメニューに変更するjQueryプラグインです。 ちょっといいアイデアですね。プラグインも圧縮版は3KBと軽量です。 タップすると左からメニューがスライドします。 手抜きで申し訳ないんですがサンプルです。 Sample※表示確認はresponsivepxを使うと楽です 実機で重いのは僕が

なかなか需要がありそうだったので 備忘録的にご紹介。WordPressを 使っているWebサイトで、最近でも よく寄稿者を募っているところを見か けますが、その記事の寄稿を簡略化 出来る、というプラグインです。寄稿者 をユーザー登録する必要もありません。 User Submitted Postsはコンタクトフォームから寄稿すれば、その内容がそのまま下書き記事として保存してくれるので管理側は寄稿記事を管理しやすく、やり方次第で寄稿者側も寄稿するハードルが低くなるかも知れませんね。 メールなどによる寄稿者とのやりとりが無いので結構楽になるんじゃないですかね。設定もいろいろ出来るのでマルチユーザーサイトやニュース、マガジンサイトに良さそうですよ。 コンタクトフォームから直接寄稿できるようにするプラグインです。寄稿記事の管理もしやすくなりそう。 使い方使い方は簡単で、プラグインを有効化し、設定後に

少し気になってたテーマにようやく触れて みたのでついでにご紹介。WordPressテーマ デベロッパー向けに作られたフレームワーク WordPress Bootstrapです。様々な用途に 応用しやすいように作られていますよ。 ベースにBonesが使われています。 テーマ開発者と言ってもかなり幅が広いんですが、こちらはそれなりに触りなれてる方でないと使うのは少し難しいかもしれません。プログラマーさん向けかもですね。 例えばテーマ独自のオプションや、カスタム投稿タイプを応用したシステムなど、割と高性能なテーマのスタートラインとして作ったみたいです。HTML5製でレスポンシブWebデザインにも対応しています。 高性能なテーマ開発にも柔軟に対応できるフレームワークです。今までのWordPressフレームワークの大半は普通のテーマが目的でしたが、こちらは少しシステムよりなイメージです。 レスポンシ

久しぶりにかなり便利そうな気がした ので備忘録。CSS3で各ブラウザに対応 させるために加えるプレフィックスを 自動で付けてくれるライブラリです。 将来的にCSS3のプレフィックスは付け る必要が無くなるのでそうなったら これを外せばいいだけですね。 使い方もすごく簡単で3.7KBと軽量です。cssが管理しにくくて困ってる方は検討してみてはいかがでしょう。また、jQueryやmootoolsのようなライブラリに依存しないのも素敵ですね。 地味にいいかも。CSSPrefixerみたいにプレフィックスを付けてくれるWebサービスはいくつか存在しますが、こういうのがあるのは多くの人が面倒だと思っているからですしね。これを、jsで付けようぜ、というのがcssFx.jsです。 何より、将来的にプレフィックスは不要になるので、そのときのメンテナンスもこれにしておけば、外すだけで済むので楽ですよね。 C

その場でサクッとUAを切り替える 事が出来るChromeエクステンション User-Agent Switcherのご紹介です。 iPhoneやiPad、Androidだけでなく、 FirefoxやIEなどのブラウザにも スイッチできます。 FirefoxやIE、iPhone、iPadやAndroidなどのユーザーエージェントにその場で切り替え可能なChromeエクステンションです。ただそれだけなんですがシンプルだし地味に便利かなと思いまして。 閲覧中のページでサクッとユーザーエージェントを切り変える事が出来ます。iPhone4やiPad、AndroidなどのタッチデバイスだけでなくIE、Firefox、Safari、Operaなどにも変更可能です。 使い方 使い方は簡単で、User-Agent Switcherをインストールするとメガネのアイコンが表示されるようになりますので、好きなUAを

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