サイズの異なるボックスを綺麗 に配置してくれるスクリプト、 MasonryっぽいjQueryプラグイン、 Freetile.jsです。似たような スクリプトは結構ありますので 参考までに。 よく見かける、異なるボックスを綺麗に並べるスクリプトです。Masonryっぽいやつ。 こういうやつです。ウィンドウサイズが変わってもボックスを再配置してくれます。 $('#foo').freetile();本体とプラグインを読み込んでセレクタ指定します。アニメーションオプション等もありました。 ライセンスはBSDです。手抜きな記事ですけどちょい忙しいので今日はこれにて。 Freetile.js

任意のカスタム投稿タイプの 最新の投稿のリストをショート コードで表示させる、という 方法。用途は限られますけど、 いつか使いそうなのでメモ書き。 調べ物をしたので備忘録。作成したカスタム投稿タイプで更新した投稿の一覧をリストで表示させる、というショートコードを作成する方法です。 リストのソート方法やマークアップ、含めるコンテンツ等は便宜変更してください。 function section_feed_shortcode( $atts ) { extract( shortcode_atts( array( 'limit' => -1, 'type' => 'post'), $atts ) ); $paged = get_query_var('paged') ? get_query_var('paged') : 1; query_posts( array ( 'posts_per_page'

WordPress3.3からファイルのアップロードはドラッグ&ドロップで行えるようになりました。この機能をアイキャッチでも使えるようにする、というプラグインです。 アイキャッチを楽に設定出来るようにするWordPressのプラグインです。記事を書き終わったらドラッグすれば即設定出来るので動作が重い印象のLightboxを呼びだす手間が省けるのは割といいかも。

綺麗目なデザインでレスポンシブ Webデザインにも対応のWPテーマ・ Alpineのご紹介。カスタムメニュー やカスタムヘッダなどにも対応 しています。ほぼ完成されている 感じです。 レスポンシブWebデザイン対応のフリーのWPテーマです。 レスポンシブWebデザイン対応のフリーのWordPressテーマ。綺麗なデザインですね。カスタムメニュー、カスタムヘッダなどにも対応しています。 ↑ イメージギャラリーも作れます。PHOTOSPACEというプラグインを併用してくれとの事。ギャラリーもレスポンシブWebデザイン対応です。 ↑ タブレットタイプのデバイスではチェックしていませんけどサイズで確認する限りでは見やすそう。 ↑ ポートフォリオやギャラリーはページテンプレート機能で作成します。 こういったよくできたテーマのソースを見るのも結構勉強になる、というか僕はそうやって独学しているのでフリー

Webデザイン時のスケッチ用シート をPDF等で配布するWebサイトのご 紹介。とっても使いやすそうでし た。見た目も綺麗なのでスケッチを する方にとってはなかなか便利 かもしれません。 960グリッドシステム用、スマフォ用、タブレット用など、他にも様々なスケッチシートが配布されています。

今更ですけどLungo.jsを少し触って 見ました。Lungo.jsはHTML5+CSS3の スマートフォン向けフレームワーク です。jQueryやmootoolsなどを必要 としない非依存型のライブラリです ので覚えておいて損は無いかも。 スマフォ向けフレームワークです。GPLv3ライセンスでOSSとして公開されています。 スマフォ向けのフレームワークは相当出回っていますので珍しくないかもですけど・・触った感じはなかなか使いやすそうでした。コアファイルは非圧縮で40kbほど。 以下、公式サイトのサンプルです。 Sample スターターキット的にも使えそうです。 ↑ 実機でのスクリーンショット この手のは沢山あるので好みで選べばいいですね。詳細は以下でどうぞ。 Lungo.js

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

少し前に小規模のローカル地域での 店舗検索サイトのお手伝いをさせて 頂いたんですが、その時に使った Tipsです。WordPressのカスタム フィールドに住所を入れるだけで、 地図が表示されるようにする。 カスタムフィールドに住所を入力すればGoogleマップが自動で表示されるようにする、っていう方法。 住所入力でGoogleマップを表示する APIを使います。これは少し前にjQueryでやる方法を知人に聞かれたので記事を書きました。 APIと少しのjQueryコードでGoogle Mapの地図の色を変更する なので細かい解説は割愛します。 コードではコードです。 API<script type='text/javascript' charset='utf-8' src='http://maps.googleapis.com/maps/api/js?&sensor=false'></sc

こういう事も出来るんだなー、と ちょっと驚いたのでシェア。WPの テーマなんですが、既存の管理画面 を使用せず、新たに別の超シンプル な管理画面を用意し、管理できる ように設計されています。 WordPressの管理画面を既存のものとは別に用意し、そこで記事を更新できるように設計されたテーマです。確かに管理画面に拘るなら作り変えるより最初から作った方が楽かもしれない。 テーマの見た目は大きな特徴はありませんが、管理画面をオリジナルのもので管理できるようにしてあり、その管理画面も超シンプル。 通常、WordPressの管理画面は http://example.com/wp-admin/ ですが、svbtleではwp-adminフォルダと同じ階層にwp-svbtleというフォルダを置き、そこで記事を管理できるようにしてあります。 なので、管理画面のURLは http://example.com

プログラミングを学べる、みたいなサイト が凄く増えている印象ですが、また似たよ うなサイトを見かけましたのでご紹介です。 実践しながら学べるサイト・(un)classroom。 実践といっても、穴埋め問題っぽい感じで、 手を動かして学べるようになってるだけで すが。 こういうサイト、日本でも増えていく気もします。需要が高い事は明白ですし、このように前例が出来ればインスパイアされるものですのでいずれ増えてくるんじゃないでしょうかね・・ まだ出来たばかりでPHPの基礎とFacebookアプリの作り方しか教室が無いんですが、今後に期待という事で・・ 最初の授業です。「PHPは<?phpで始まって?>で終わらせます」とあります。基礎のキですね。で、右側のsubmitで実行してみましょう、といった流れで進んでいきます。 で、2ページ目でレッチチャレンジ、という感じで穴埋めし、先ほどと同じようにsub

英字フォントですが、なかなか良さそう だったのでシェア。商用利用もWebフォント も無料でリンクなども不要と、結構自由 に使えるのと、個人的にサンセリフの 利用頻度が高いので即DLしてみましたよ。 太さも3種用意されています。 配布しているのは、汎用性の高いテクスチャパターンを大量に配布しているSubtle Patternsです。このフォントも似たようなプロジェクトの一貫だと嬉しいな、という期待を込めてご紹介。 中には、OTF、TTF、EOT、WOFFのフォーマットがそれぞれ用意されています。Webフォントに関しては以前まとめましたので合わせてご覧下さい。 Webフォントを利用する際に知っておくと役立ちそうなTipsとかサイトいろいろ ライセンスも You can use this font in any way you like, both commercial and noncomme

WordPress3.1から管理バーが少し変わ ったのですが、デフォルトではあまり コンテンツが無く、ちょっと勿体無い のでここに好きなリンク集を作って あげると喜ばれるかもしれない、って いう記事です。 管理画面の利便性を高めてあげるとクライアントさんも使いたくなるし、それでWebサイトも育ててくれて結果的に収益アップしてくれたら嬉しいなウヘヘ、という夢をみつつ、今日もチマチマとカスタマイズに励んでみます。 試しにソーシャルサイトのリンク集を含めてみる ↑ 特に目新しい事では無いんですが、こういう風にしてあげようじゃないか、という内容です。jsfiddleってソーシャルだっけ？って疑問はさておき。 こんな事言うと記事タイトルが破綻してしまいますが、別にソーシャルじゃなくてもいいと思います。管理画面でよく使う場所をまとめるとかもいいですね。 コードコードです。functions.phpに以

既出なんですが良かったので。空いた時間に、気になっていたスライドがあったので拝見しましたが、内容が素敵だったのでご紹介します。ノンデザイナーさん向けのデザインセオリーのスライドです。 Webデザイナーが読んでおきたい、最近公開されたWeb系のスライドっていうので知ったんですが、どちらかというとWebデザイナーさんなら知ってて当たり前じゃないかという内容かもしれません。 スライドの作成者さんのブログでもノンデザイナー向けの講義向けのスライド、とありました。→福井高専でノンデザイナー向けの講義しました デザインとアートの違い、なぜデザインが必要なのか、Webデザインとは、などなどが解説されています。Webデザイン論では必須の導線、レイアウト、情報のグルーピングにもしっかり触れてくれています。Webデザインには理由がある、というのが分かるかと思います。（「意味」って言っちゃうと語弊がありますよ）

シンプルなHTMLプレゼンテーションを作成 する為のフレームワークのご紹介です。最近 は変わった動きのするプレゼンツールをよく 見かけますが、シンプルなタイプはあまり 見かけませんので選択肢の一つとして。 スマフォのスワイプ操作にも対応しています。 パワポとかKeynote使いたくないから作ったらしいです。iPadやiPhoneのスワイプ操作にも対応しています。 PCでは矢印キーで、タッチデバイスはスワイプで操作出来ます。JavaScriptにDojoが使われています。 以下動作サンプルです。 Sample iPhoneはQRコードでGOです。 実機でテストしました。タッチデバイスで閲覧すると、PCでは「矢印で動かします」みたいなナビゲーションもタッチデバイス用に切り替えられます。 コードDojoは殆ど触ったことが無いのであまり触れないでおきます。 <script type="text/j

InitializrっていうHTML5のテンプレ を15秒で作成出来る(らしい)ツール があるんですが、このWebツールが、 話題のTwitter Bootstrap 2にも対応 したみたいです。人気のフレーム ワークなのでありがたいですねー。 土曜日ですし、軽い話題。15秒でHTML5のテンプレが作れる！と謳うWebサービス・・InitializrがBootstrapに対応してます。これは地味に嬉しいんじゃないですかねー。 右側になんか増えてた！Bootstrapやたら人気ですしね。こういうのは嬉しいんじゃないでしょうか？Initializrはその気になれば本当に15秒で作成出来るので使うといいですよ。性能とか特徴は使って実感してください。 作ってみた 試しに15秒で支度してみました。こんな楽でいいのかな・・・LESS版も選べるので設定項目は好みで設定してくださいませ。 因みに・・・ B

最新のWebデザイントレンドを取り入れた Webデザインに特化したギャラリーサイト、 stylesinspirationのご紹介です。少し前 から購読しているんですが、他のWebデザ インギャラリーと一味違っていてなかなか 素敵です。 最近はWebデザインギャラリーもすっかり減ってしまいましたけどね・・・良いデザインを見る事はインスピレーション向上だけでなく、美的感覚を視覚刺激として脳に送る事でセンスが養われる側面もありますので割と大事です。 シンプルで見やすいレイアウトですのでストレス無く探索出来るかと思います。Awwwards同様、最新のデザイントレンドを取り入れたWebデザインを紹介していますが、Awwwardsとは別の路線、っていう感じなのでこれはこれで。 カテゴリはタイポグラフィ、シングルページ、クリーン、などなどちょっと一貫性は無いですけど、コンテンツが最新トレンド、というサイ

WordPressを使ったWebサイトで現在利用中の テーマやプラグインのCSSをその場で編集、 保存を可能にするWordPressプラグインの ご紹介。多用するものではありませんが、 開発中とかに使っても便利かも、と思った のでメモがてら。 何度か似たようなものもありますけど多くは無いので選択肢の一つとして。Webサイトを見ながらその場で利用中のテーマやプラグインのCSSを編集、保存できるプラグインです。ローカル環境で開発の手助けにもなるかな、とか思ったりしましたよ。 これ便利ですねー。機能はシンプルで、Webサイトの右側にボタンが出るので、クリックするとエディターが開きます。あとは修正して保存すればいいだけ。 編集中はインタラクティブに反映されますのでサイズの指定ミスなんかをするとエディタも場外にすっ飛ばされて編集できなくなっちゃうので気をつけてください。微調整向けですかねー。 編集し

WordPressではショートコードAPIと いう便利なAPIがあって、これを使え ば記事や固定ページでより幅広い表現 が知識の無い方でも出来ます。この ショートコードで様々なコンテンツ を実装出来るようにしてあるプラグイン です。 作成されているショートコードはタブ、スライダー、Twitterのツイート表示などなど30以上あり、覚えていなくとも簡単に利用出来る工夫もなされています。 個人的にショートコードの一元管理化はやろうと思っていた事だったのですが、プラグインの作り自体が凄く参考になったのでメモ的に記事にしました。もう少しシンプルでいいんですけど、自分で作成したショートコードの管理のいい雛形になるっぽいです。こういうのはGPLのいい所ですね。 沢山のショートコードが用意されていて、手軽に記事内にスライダーやタブ、アコーディオンやツイート表示、テーブルの作成などが可能です。 引用とか、

iPhoneとiPadをサクッと切り替え 出来て、ランドスケープ（横向き） にも切り替え可能なiOS向けの無料 のシミュレーターが結構良かった のでシェア。Windows用です。表示 の確認には結構いいんじゃないかな と思います。 iPhoneとiPadの切り替えが出来て横向きにも出来るiOSブラウザシミュレーター。個人的には確認も楽で動作も軽いので結構いいなと思いました。ただし、Windows用です。 起動するとiPhoneとiPadを選べます。選んでURLボックスにアドレス入れてアクセスしまｓ・・ やっぱり説明下手なので動画みて頂けますか。 iPadのランドスケープだけウィンドウを小さくしていたため微妙な感じですが、表示はちゃんとしてます。どうも不慣れで申し訳ないです。 一応機能をご紹介。 iPhone ⇔ iPadの切り替えが楽 iPhoneとiPadの切り替えが凄い楽です。これだけ