Code Note Description 画像のURLからその画像のアタッチメントIDを取得するコード。カスタムフィールドに格納した、どこにも紐付いてない画像の他のサイズのパスを取得する際にどうしても必要になった時に...
WordPressスニペット | かちびと.net
Code Note Description 画像のURLからその画像のアタッチメントIDを取得するコード。カスタムフィールドに格納した、どこにも紐付いてない画像の他のサイズのパスを取得する際にどうしても必要になった時に...
WordPressテーマのcssの末尾にクエリ文字を加えてキャッシュさせないようにする
凄く今更な話題かもしれませんが、知ってると便利なのでちょっと書いてみます。WordPressのテーマのcssに変更を加えたときに、表示をクライアントさん等に確認して貰う際、キャッシュの説明をするのがかなり面倒です。 というわけで、古来から伝わるcssファイルのキャッシュ(cssに限りませんけど)を防ぐ方法をWordPressで、という内容です。 この辺の理屈は、よく拝見させて頂いている小粋空間さんが書かれてますので合わせてご参照下さい。 コードget_bloginfo( ‘stylesheet_url’ )の方の方が多いかもですけど、今回はcssを読み込ませるのにこれ使います↓ href="<?php bloginfo('stylesheet_directory'); ?>/style.css"これで以下のように出力。 href="http://example.com/wp-content
商用も無料でリンク不要の日本語フォント・こども丸ゴシックと、無料で手に入るフォント配布サイトの早見表
はんなり明朝の作者さんより新作の ご連絡がありましたのでご紹介です。 丸みのある可愛らしい丸ゴシックの 「こども丸ゴシック」。今回も商用 でも無料でリンクなども不要と、 太っ腹なご提供です。貢献者さんで すね・・・頭が下がります。 さて、またも商用利用OK・リンク不要の日本語フォントが登場です。いつもご連絡頂き有難う御座いますー！ 現在漢字は創意製作中で、先行してひらがな、カタカナ、アルファベットをご提供頂きました。 かわいい丸ゴシックのフォントです。漢字は製作中とのことです。Twitterでフォロー(@typingart)しておくと見逃さないかもしれません。 テスト的に使って見ました。今年の漢字は「絆」なのでそんなニュアンス。コピーは思い付きです。手書き風のような丸みのあるフォントは人の声などを表すのに適してますね。子供や女性がターゲットのサイトで活躍してくれるかもしれません。漢字が出来
注釈も簡単に付けられる、編集機能付きスクリーンキャプチャChromeエクステンション・Quick Markup
結構便利なものを教わったのでシェア。 スクリーンキャプチャするChromeの エクステンション・Quick Markupです。 全ページはもちろん、注釈を加えたり 切り取ったり、Twitterに投稿したり、 なんてことも出来ます。 お世話になってるMaka-Veli(@maka_velicom)から教えてもらいました。キャプチャ用のChromeエクステンションで、特定の範囲や全ページは勿論、Flashも撮れて、編集や注釈も簡単に加えられます。 以前、Awesome Screenshotをオススメしましたが、このエクステンションの機能は丸々揃ってて、プラスアルファで機能が追加されているので乗り換えてみました。 サクッとキャプチャ撮ってそのまま保存でもいいし、上記のように注釈も簡単に付けられます。メモ取るのにもいいかもですね。 http://localhost/の全ページキャプチャが出来るCh
jQueryとVimeoのAPIでサムネイルを作成し、動画をLightbox風にポップアップさせる
VimeoのAPIとjQueryを使用したサンプル。 軽量なコードでLightbox風にポップアップ させる、という方法。Vimeo自体日本では 全然使ってる方を見かけませんが、徐々に 浸透すると嬉しいですね。便利だし。とい うか、僕が知らないだけで結構使ってる 方もいるのかもｗ 仕事じゃなくて個人で使いそうなのでメモ的に。VimeoのAPIを使って、リンクするだけでサムネを表示させてクリックするとLightbox風に表示される動画ギャラリー、みたいなものを簡単なコードで実装します。 Vimeo Gallery こんな風にサムネイルがギャラリー的に表示されて こんな風にLightbox風にポップアップさせます。 以下サンプル。 Sample IE7以下にも手抜きハックで対応させました。もっとちゃんとやれば素敵になるんじゃないですかね。 コード$(window).load(function(
FoundationをベースとしたHTML5製のレスポンシブ対応WordPressテーマフレームワーク・Reverie
以前ご紹介したレスポンシブWeb デザイン対応のFoundationをベース としたHTML5製のWordPressテーマ フレームワーク・Reverieのご紹介 です。どんどん出てきますね。 Foundationってのは以前ご紹介したように、zurbっていう、jsライブラリ等を一杯配布してくれてるサイトのプロダクトで、WPテーマ化も済んでるんですが、またFoundationベースでリリースされたようです。 Foundationベースで、テーマ構造はRootsを参考にしたそうです。レスポンシブ対応には例によってMediaQueriesが使われています。bbPressとの互換性もあり、ウィジェットや画像のキャプションにもしっかりHTML5タグが出力されるようになっているみたいです。 スクリーンショット スクリーンショットです。iPadとiPhoneのスクショはシミュレーターのElectric
レスポンシブWebデザイン設計用のシンプルなテンプレート・The Goldilocks Approach
もういくつも出回ってますので今更感 もありますが、個人的にはいくつあって も困らないのでご紹介。レスポンシブ Webデザイン設計用のシンプルなテンプ レート・The Goldilocks Approachです。 殆ど何もない状態なので使いやすい。 いろいろと便利なフレームワ－クはありましたけど、結局フレームワーク自体を自分で作らないとならなくなってくるのでその候補としてメモ。 シンプルなテンプレート。中身が無く、記述だけしていけばいい、みたいなやつです。IEに対応できるようにmodernizrが含まれています。 ケーススタディです。シンプルで1カラム。ちょっとしたプロダクトサイトなんかこういう感じですよね。 ブレークポイントも1つしか設定されてません。 @media screen and (min-width: 30em) and (max-width: 63.236em)そのため、複数グ
WordPressでスパムユーザーの自動登録を簡単なコードで防ぐ
WordPressを使ったサイトでユーザー登録を可能にしているサイトもちらほらと見かけるようになりました。個人的にはあんまり運営経験無いんですが、サービスとスパムは切っても切れない問題ですよね。そこで一つ、簡単な方法でスパムユーザーの登録を防ぐ方法をメモしておきます。 とはいえ、最近はOAuth認証を使ったTwitterやFacebookによるユーザー登録のほうが目立つ印象ですが、所詮ソーシャル界隈で便利というだけの依存的なものに過ぎませんので有効な解決策とはいえません。 API等に頼らない、非依存型のスパム対策という選択肢もあることがやはり望ましいかと思います。 実装 これはユーザー登録画面です。通常はメールアドレスとユーザー名しか項目がありませんが、このようにヒューマンチェック用に項目が追加されており、キーワードに当てはまらないと登録出来ないようになっています。 答えは日本語でこの場合
シンプル、軽量でカスタマイズしやすいフォームバリデーションjQueryプラグイン・validate.js
フォームバリデーション系のプラグインは 既に数多く良質なものが揃っているので、 今更、という気もしますが、自分と相性が 良さそうだったので備忘録。軽量でシンプル で、カスタマイズもしやすかったです。 高機能ではなくていいので、こういうのが 欲しいんですよね・・ もちろん、クロスブラウザで動作してくれます。圧縮すれば2KB以下にまで落とせる軽量ライブラリです。 バリデーション用のライブラリです。軽量でクロスブラウザ対応。コードもシンプルでカスタマイズしやすい印象でした。 サンプルです。エラーメッセージは適当なので気にしないで下さい。 Sample コード<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script t
iPhoneやAndroidのUIパターンを収集するシンプルで見やすいギャラリーサイト・Patterns of Design
いくつか同じようなギャラリーサイトは ありますが、こちらもなかなか見やすか ったのでメモ。スマートフォンのUIの パターンギャラリーサイトです。スマー トフォンに限らず、通常のWebサイトの パーツデザインの参考にもなりそうです。 特にスマートフォンのUIは細かい部分のこだわりが見られてとても参考になりますので見ておいて損は無いかと思います。 シンプルな作りです。パーツはカテゴリで分けられていて探しやすいです。ちょっと重いかな・・ 例えばこちらはグリッドのカテゴリ。同じ幅、同じ高さという限られた空間の中で、様々な工夫が見られます。 クリックするとその場でLightbox風にポップアップします。iTuneへのリンクもあるので確認しやすいですね。 同じようなギャラリーサイト似たようなサイトは沢山あるので合わせてチェックしてみてはいかがでしょう。 Mobile UI Patternspttrns
iPadで水彩画を描きやすくする為に、日本の技術が採用された筆タイプのスタイラス・Sensu Brush
ユニークなiPad用スタイラスがあったのでご紹介。iPadが出始めの頃に想像していた「iPadで絵をかける」ことが現実味を帯びてきました。もともと絵を描くためのスタイラスはありましたが、こちらは水彩画のようなタッチでかけるみたいです。 おなじみのKickstarterよりご紹介。もう目標資金は集まったみたいですね。動画でプロトタイプを使った映像があるんですが、かなり滑らかな印象です。 かなり滑らか･･･見た感じは普通の筆と変わらないタッチですね。動画で使用している絵描きアプリはArtRageだそうです。筆の質感にとにかくこだわった様ですな。。扇子・・の様子は無いですけどｗ 筆先は、日本の友人が開発していた、化粧品会社向けの技術を採用したそうです。 筆の後部は従来のスライラスも装備されているので、1本で絵描きにもペンにも出来ます。 こんな感じ。 既に筆タイプのスタイラスは存在していましたが、
WordPressのテーマのカスタマイズに役立つコードスニペットを探せるWebサイトいろいろ
少し増えてきたので自分用にまとめてみます。 WordPressでテーマをカスタマイズしたい時 にサクッと探せると楽なんですが、その コードスニペットを探せる、というサイトが いくつかあるのでご紹介します。WPユーザー の方は一度ご覧になってみては如何でしょう。 というわけでちょっと個人的なメモです。WPスニペットを保管してるサイトのまとめ。お手軽なWordPress Tipsっていうカテゴリで記事をよく書いてるんですけどそのネタ元なので英語OKな方はこちらから探してみては如何でしょうか。 この手のサイトのコードは古い可能性もよくあるのでCODEXで非推奨のコードでは無いかどうか合わせて確認しておくとより良いかもしれません。 WP-Snippets 数は多くないけど需要のあるTips多め。最近リニューアルしてちゃんとカテゴリ分けしてくれました。単純な単語をタイトルにしてくれているので英語が苦
日本の良デザインなFacebookページを収集しているデザインギャラリーサイト・520PX facebookmark
今日は3連休最後ですね。個人的には 全然関係ないので普通に記事を書き ます。日本もかなりFacebookが浸透 したようですが、まだまだ数は少ない 印象です。企業もかなり参戦してきて いるので、Facebookページの需要も 少しあがってきている印象ですね。 そんな中で日本のFacebookページで良デザインなページのみを収集しているギャラリーサイトがありましたのでご紹介。 こんな感じで国産のFacebookページが並べられています。カテゴリは結構細かく分けられていますが、いかんせんまだ数が少ないのでまだ必要ない状態ではありますね。 VOGUEJAPANはコンテンツが充実してるので結構好きです。 520PX facebookmarkにも書いてありますが、まだ数が少ないのが日本の現状です。こちらのギャラリーも厳選しているため、まだ100に満たない状態です。もちろん審査有りですが、自信のあるF
無料・商用OK・リンク不要の、やわらかい印象の日本語フォント・はんなり明朝
以前ご連絡を頂いたフォントポ日本語の 作者さんから新作のお問い合わせを頂 いたのでご紹介。やわらかい印象の明朝 系フォント、「はんなり明朝」です。こちら も商用で利用できるとのことです。なんとも 太っ腹ですね・・ フォントポ日本語の作成者さんからまたまたご連絡いただきました。いつもありがとうございます:D 商用で利用できる日本語フォントに新しく仲間入りです。 かわいいですねーｗきりっとした印象の明朝ですが、こちらは少しふんわりとした印象を与えられそう。明治時代の築地体を参考に作られたそうですよ。 利用規約利用規約は 当サイトのフォントはすべて無料です。個人・商業用途での利用について特に制限はございませんので、どうぞお気軽にご使用ください。ただし、フォントデータの改変はおやめください。また、フォントの使用によって生じたいかなる結果や損害につきまして、一切の責を負いませんのでご了承ください。
その場でインタラクティブにレイアウトやデザインを変更できるWordPressテーマ・WP Paintbrush
以前も似たようなテーマをご紹介しましたが、 管理画面にも入らず、FTPも不要で、その場 でインタラクティブにテーマのデザインや幅の 変更など、レイアウトも変更可能なWordPress のテーマ・WP Paintbrushです。以前ご紹介 したものより精度は落ちますが、選択肢の一つ として。 以前、衝撃を受けた、インタラクティブにレイアウトなどを変更出来るPressWorkをご紹介しました。 今日、ご紹介するWP Paintbrushも、PressWork同様にその場でレイアウト等を変更できます。 HTML5製のWordPressテーマを、管理画面やローカル上でコードを触らなくても、直感的なマウス操作のみでレイアウトやカラー、配置などを変更できます。 簡単に色を変更できたり。CMSの普及に伴い、更新費みたいなものも無くなっていくのですかね・・・ 実際にテストした様子をスクリーンキャストを撮り
スマフォとかミニマルデザインに特化した、これからお世話になりそうなWebデザインギャラリー
自分の中で課題があって、その為に 必要なインスピレーションを得るため のギャラリーサイトをまとめます。いち いちブックマークから探すのが面倒に なってきたのでちょっと整理がてら記事 にします。 というわけで個人的なリンク集です。スマフォとかミニマルデザインとかのWebデザインギャラリーいろいろ。デザインギャラリーですけど、目的はデザインというよりも、技術をどうやって上手く取り入れているかを見たい、という感じです。 ミニマリズム / シンプルミニマリズム、シンプルデザイン専門のギャラリー。 MNIMAL とにかくここ自体もミニマルなギャラリーです。よく見に行ってます。 MNIMAL siiimple シンプルレイアウトなWebデザインのみを集めています。 siiimple Minimal Exhibit ミニマルデザインを収集。少々カテゴリの分け方がアレ。 Minimal Exhibit m
パブリックドメインで配布されている、クロスブラウザ対応を意識したHTML5+css3製のフレームワーク・Gridless
いくつも似たようなのはあるのですが、 複数覚えておいて損は無いのでメモ がてらご紹介・・・クロスブラウザ対応 を意識したHTML5+CSS3フレームワ ーク・Gridlessです。装飾を施さない、 とてもシンプルなものになっています。 Gridlessは、美しいタイポグラフィをクロスブラウザで実現するためのフレームワークです。MediaQueryによって、スマフォにも対応しやすい雛形になっています。 ライセンスは一部のjs（Respond.jsとHTML5 shim）を除いてパブリックドメイン（著作権放棄）で配布されています。 無駄な装飾がないので、1から作るプロジェクトのスターターキットとしても使えそうです。クロスブラウザ対応といっても、完璧ではなく、より差の無い実装となっています。 各テキストのエレメント。 IE6や7にも対応 IETesterによるIE6の表示です。 タブレットやスマ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google+風に、Picasaの画像を高さを揃えたイメージギャラリーを実装するjQueryプラグイン・jquery-photowal
無料フォントのみを使用してタイポグラフィを1日に1デザイン作成、100日間続ける学生のプロジェクト・100 Days of Typography
国内のWeb制作に役立ちそうな無料の写真素材やフォント、Webデザインギャラリー等のリソースサイトいろいろ・2011
