横並びの要素の高さを揃えるjQueryプラグイン「matchHeight」がレスポンシブでもバッチリ動いて素敵
高さが異なる要素を横並びにした時に、その高さを揃えたい–生きとし生けるもの全ての夢。 でまぁ今までとあるプラグインを利用していたのですが、レスポンシブで上手く動かないということでなんかいいやつ無いんかい、と探していたところjquery.matchHeight.jsというのを見つけました。 jquery.matchHeight.js – a more robust equal heights plugin for jquery 動き 簡単なデモページ作ってみましたのでどうぞ。公式でいいじゃんと思ったけど一応テストで作ったので。 デモページ 使い方 使い方も非常に簡単。liabru/jquery-match-heightからコードをダウンロードして、 [html] <head> <script type="text/javascript" src="http://ajax.googleapis
私がよく使っているjQueryプラグインまとめ（スライダー、モーダルウィンドウなど）
こんにちは、暑いですね。脇汗すごいですね。僕が。 さて今回はWebページ作成時に、私がよく使っているjQueryプラグインをまとめてみました。（たまにjQueryが必須でないものもあります。） ※紹介しているプラグインを使用する際、ライセンスは各自で再度確認してくださいませ。 Owl Carousel 個人・商用利用可能。レスポンシブでいい感じに動作してくれるカルーセルスライダーです。動作もシンプルで綺麗だし、マークアップも簡単。テキストもOK。お気に入りのプラグインです。 Owl Carousel bxSlider 個人・商用利用可能。シンプルなスライダープラグインです。レスポンシブで動作し、カスタマイズもしやすく重宝します。 jQuery Content Slider | Responsive jQuery Slider | bxSlider Glide.js デモページがカッコイイス
コードスニペット管理ツール「GistBox」が良いね！とっても良いね！
コードのスニペット管理にSnippiを利用していたのですが、何故かTwitterアカウント連携ができなくなってしまい、こつこつ貯めていたコードが見られなくなってしまいました。 バックアップでNotefileに取ってあったため事なきは得たのですが、コードスニペット管理の方法としてはいかんせん使いにくい。 なんかいい方法あんめえかと思って探したところ、GitHubアカウントがあれば無料で使用できるスニペット管理ツールGistBoxが良さげだったので試してみたところ非常に快適でしたのでシェア。 参考：GistをメーラーのようなUIで管理する「GistBox」がいい感じ | REFLECTDESIGN メーラーのようなUI 使用はGistBoxでログインするか、Chromeアプリから。UIは一緒です。 私はChromeアプリを使用することにしました。 GistBox – Chrome ウェブストア
Webデザイナー、コーダー、プログラマー必見！よく使うコード類をまとめて管理＆共有｜「Snippi」が大変便利
コーディングをしているとよく使うコードが簡単に呼び出せたら便利だなぁと感じることがままあります。 TextExpanderを使用してある程度基本のコード類は簡単入力できるようにしてあるのですが、使うには使うけどTextExpanderに登録するほどでもない、そんなコードをどうやってまとめようかなと思っていたところ、バンクーバーのうぇぶ屋さんで紹介されていたSnippiが大変シンプルで使いやすかったのでご紹介。 スニペット管理とかダルいって人にオススメ！超シンプルなスニペット管理ツールの『Snippi』！ | バンクーバーのうぇぶ屋 別にめちゃめちゃ珍しい機能とか無いんですが、とにかく超シンプルで使いやすい！FBやTwitterログインは当然可能で、スニペットに対するタグ付けや言語別ソート、各スニペットにはコメントが可能で簡単な説明なんかすぐ可能。 via: スニペット管理とかダルいって人に
Webデザイナー、コーダーならDLしとこう！あると地味に便利なGoogleChrome機能拡張4つ
今日は業務でよく使う、Webデザイナー・コーダーさんならあると地味に便利なGoogleChrome機能拡張をまとめてみました。私にとって、どのエクステンションも無いと「ちょっと困る」ものたちばかりです。 Image Properties Context Menu まずはImage Properties Context Menu。 画像を右クリックすると、パスやサイズ、altテキスト、ファイルサイズ等を別ウインドウで表示してくれます。 参考：[Google Chrome]右クリックで画像のプロパティを簡単に確認できるエクステンション「Image Properties Context Menu」 MeasureIt! 続いてはMeasureIt。 ブラウザ上に「ものさし」を表示してくれるエクステンション。ささっと画像サイズを調べたり、カラムの幅を測ったりするのに使用しています。 Show Ti
コピペが出来るなら誰でも出来る、Web制作タスク自動化ツール「Grunt」導入手順
なんだか、Web制作の際に起こる様々な面倒くさいタスクを自動化してくれるGruntというツールがあるらしく、私の周りのWebデザイナーさんやコーダーさんがこぞって導入されておりました。 はじめは「へぇ…あちきは別に興味ないからいいでありんすよ」と指をくわえて傍観していたのですが、便利便利の声を聞くにつれやっぱり羨ましくなってきました。だから導入した。使った。良かった。 そんな訳で今回は、Grunt.jsの導入から簡単な使い方までを紹介したいと思います。私のような黒い画面に抵抗を持っている初心者の方でも導入できるよう、コピペさえ出来ればGruntが使えるようになる記事にしてあるつもりです。 なお、今回導入した私のPC環境はOS X 10.9.1です。Windowsでの導入手順は今更だけどやるgrunt入門編・インストールから基本的な使い方｜WEB Drawerをご覧下さい。 Gruntで何が
パクリサイトに記事を全文無断転載されたのでGoogleに著作権侵害を報告しつつ差し替え画像を用意して対策を講じてみた
人の心を盗むことはあっても、記事を盗むことはありません。おつぱ（ @OZPA ）です。ｸﾗﾘｽｩｰ!!ｸﾗﾘｽｩｰ!! さて先日、Twitterで@25kei12 さんより「とあるサイトで記事が全文パクられてますよ」と教えて頂きました。 参考：全文パクリブログ発見! – ま鉄系 よくよく考えたら全文まるまる無断転載されたのは初めてのこと（把握する範囲で）。しかもサイトを見てみたら画像まで直リンクしてくださっているご様子。 うーん殴りたい。 そんなわけでどんな制裁をくわえてやろうかと高鳴る鼓動を抑えつつ、当該パクリサイトにいろいろと対策を講じることにしました。（パクリサイトへのリンクはしておりませんので悪しからず） Googleに著作権侵害で報告 まずはじめにやるべきはGoogleへの著作権侵害を申告することでしょう。以下のサイトを参考にさせて頂きました:) 無断コピーされたコンテンツをGo
feedly登録用ボタンをブログに設置しました
feedlyとは FeedlyとはいくつかウェブブラウザやiOSとAndroidの携帯端末に対応しているニュースアグリゲータアプリケーションである。インターネット上の数あるウェブサイトのニュースフィードを収集し他人と共有することができる。2008年に初版がDevHDによって公開された。 via: Feedly – Wikipedia まぁもはや説明するまでも無いかもしれませんですが、RSS配信サービスfeedlyは、GoogleReader終了を受け多くのRSS難民の受け皿となっているサービスです。私の周りの友人もほとんどがGRからの移行先をfeedlyにしている様子。 かくいう私もGR→feedly組の一人。RSS購読に利用しているiPadアプリ「Mr. Reader」もfeedlyに対応してくれてほっと一安心。 で。 これほど多くの人が使っているサービスならば、RSSをfeedly登録
「Slicy」Photoshopからのスライス作業が死ぬほど楽になるツールが便利だ！
Photoshopでデザインカンプを作成して、いざコーディング！となると面倒くさいのが画像のスライス作業。 その画像のスライスを超絶楽にしてくれるツール「Slicy」を今さらながら導入しましたので使い方をご紹介。 レイヤー・グループに名前を付けて保存 アプリはMac App StoreでDLでも良し、公式サイトから体験版をダウンロードするも良し。 試しにこんなカンプを作成してみました。世界中のイケメンを紹介する、IKEMEN.comです。第一回目のモデルから頓挫しております。 データができましたら、切り出したいパーツのレイヤーorグループに名前（○○.jpgや○○.png）を付けて保存します。 あとはその保存したPSDデータをSlicyにぶち込むだけ。 見事、名前を付けた通りに画像がスライスされました:) あとはドラッグアンドドロップか、画像を選択して上のSaveボタンをクリックして任意の
クリック率急上昇間違いなし！男性なら絶対にクリックしてしまうボタンを発明した
どうも。平成の発明王、おつぱ（ @OZPA ）です。 この間ネット巡回してたらすごくかっこいいボタンスタイルを発見したのですが、それを弄くっているうちにとんでもないボタンを発明してしまいました。 題して、「男性なら絶対にクリックしてしまうボタン」 その全貌を、とくとご覧下さい。 かっこいいボタンスタイル まずは、発明のきっかけとなりましたかっこいいボタンスタイルからご紹介。 それが↑こちら。 まるでゴムを押し込んでいるようなテクスチャで、非常に綺麗ですね！ コードは→Quite realistic buttons – CodePenをご覧下さい。 改造した さて。 これを見ていた私は思いました。 このスタイルをもっともっと魅力的にすることは出来ないだろうか？と。 なんかもう、クリックせざるを得ないようなボタンにすることは出来ないだろうか？と。 そして、構想1日・実作業4時間にも渡る大手術の
配色のお供に、超使いやすいカラースキームツール！「COLOURCODE」がとっても良い感じ
これは使いやすい配色ツール！ そんなわけで、マウス・トラックパッドで感覚的に使用出来るカラーツール「COLOURCODE」がとっても良い感じでしたのでご紹介です。 Colourco.de – find your colour scheme 画面上をマウスで移動して色を選択 このCOLOURCODE最大の特徴はその使い方。 画面上をマウスで移動するとキャンバスの色が変化しますので、好きな色が出来たらクリックで保存します。スクロールすると彩度の変更も可能。rgb値、hsl値など5種類の数値で色の値を表示してくれます。 クリックした色はこんな感じで保存されていきます。わっかりやすぅーい。 一度保存した色はご覧のように左右の場所を入れ替えたり削除することも可能です。 また、右上の欄にカラーコードを直接入力して色を選択することも出来ます。 配色ツールとしても良い感じ そして、画面上部に用意されている
[自炊][動画]裁断機がなくても大丈夫！OLFA（オルファ）ロータリーカッターで本を裁断してみたら切れ味がすごかった
オルファ ロータリーカッターは恐ろしい切れ味 渋谷の東急ハンズで購入。1400円でした。一瞬ロリータカッターってなんやねんと思ったことは秘密です。 布やスポンジ、ゴムなどといった普通のカッターでは切りにくいものも切れるとのこと。 裏面には特徴や持ち方、使い方の解説が。 開封！とっても黄色いです。 最大の特徴、ロータリー状のカッター。 カッターを使用する際には「BLADE COVER」を押し下げてから。かっこいいネーミングですね、ブレードカバー。 ｳﾎｯ、いいカッター。 大変に切れ味が良いので注意して扱いましょう。さもなくば 指を切ります。 ただ置いてあるカッターにちょっと触れてしまっただけなのですがサクッと切れました。（傷は浅いですが） ベジータがいれば「どういう技か見切れんのか」と罵られていたでしょう。 [動画]本を裁断してみた 切れ味はすでに十分分かったのですが、本の裁断をしてみました
![[自炊][動画]裁断機がなくても大丈夫！OLFA（オルファ）ロータリーカッターで本を裁断してみたら切れ味がすごかった](https://cdn-ak-scissors.b.st-hatena.com/image/square/119ac3571a2045faaaf015f4b95299362ca0bf3c/height=288;version=1;width=512/https%3A%2F%2Fozpa-h4.com%2Fwp-content%2Fuploads%2FIMGP1660_olfa.jpg)
Webページの表示速度アップに欠かせないCSSスプライトを超簡単に作成してくれるサイト「SpriteMachine」
Webページの表示速度をアップするために、アイコンやロゴなどの画像を1枚にまとめるテクニック。それが「CSSスプライト」なのですが、これって画像の作成とか位置の指定とか色々と面倒くさいんですよね。 そんなCSSスプライトを簡単に実装するためのWebサイトSpriteMachineのご紹介。スプライトマシーン…すごく…イイ名前です… imgを圧縮してアップロードするだけ サイトに訪れたらまずは画像配置のレイアウトと吐き出すコードのフォーマットを決めます。 ちなみにフォーマットはCSSだけではなく、SCSSやSASSも選択可能です。 次に、CSSスプライトにする画像をひとまとめにして、そのフォルダを圧縮、ZIPファイルにしましょう。 そしてそのファイルを上の場所にアップロードすると… 自動的に「spritemachine」というフォルダがダウンロードされます:) フォルダの中身はpng画像とc
日本語住所を英語表記に変換するWebサービス「JuDress」がちょー便利！！
英語の通販サイトを利用する際などに手間取るのが、自宅の住所を英語表記で入力しなければいけないという点。 いつもと違う番地や町名の表記の順番に頭を悩ませる方も少なくないはず。 そんな時にすっごく便利なWebサービス、「JuDress」をご紹介。 JuDressは日本語住所を英語表記に変換するWebサービスです。 当サービスは英語表記の変換結果を保証するものではありません。 また、Stylish変換は実用性がありませんのでご注意ください。 変換結果が正しいか必ず確認の上、表記の参考としてご利用ください。 via: JuDress | 住所→Address変換 使い方はいたってシンプル。まずはJuDressにアクセスしませう。（ちなみに今回のデモはAppleStore銀座店の住所で行っております。） そして、郵便番号を入力して、「住所検索」ボタンをクリック！ すると、都道府県名と町名までが自動入
とんでもなく参考になりすぎるEvernote使用例 6 〜ノート総数3500 @delaymaniaの全ノートブック晒し＆”肩の力を抜いた”Evernote整理術〜
とんでもなく参考になりすぎるEvernote使用例 6 〜ノート総数3500 @delaymaniaの全ノートブック晒し＆”肩の力を抜いた”Evernote整理術〜 OZPAの表4をご覧のみなさん、はじめまして。 ブログ「delaymania」を主宰しております、@delaymania と申します。 「アマオト」というバンドのギタリストをやってまして、その傍らでWEBデザインの仕事、そしてiPhone,iPadアプリの開発をやってます。 先日、尊敬するブロガーの@OZPA 君から「You寄稿しちゃいなよ」と言っていただきました。 OZPAの表4は以前から目標とするブログでして、そのブログに寄稿させていただけるとは夢のようです。 というわけで、めんどくさがりな僕の適当なEvernoteの使い方をご紹介します。 ノートブック整理は肩の力を抜いて適当にやる まず僕のノートブックをご紹介します。
WordPressプラグイン「YARPP」と「Auto Post Thumbnail」を使用して関連記事を表示するのにようやく成功した
夜中にいじってます。WordPressを。 どうも、@OZPA です。 記事の終わりにサムネイル付きで関連記事を表示するブログパーツ「LinkWithin」を導入したのが今月頭。 別に取り立てて不満も無かったのですが、ごりゅご.comの2記事を見てムラムラと 「同じようなカスタマイズやってみたい」 との思いが燃え上がって参りまして、先日ようやっと関連記事の表示を実装いたしました。 先に「Auto Post Thumnail」を有効化しよう 僕が指を咥えて眺めて咥えて眺めてやっぱり咥えていたのが@goryugo さんとこの以下の2記事。 新しい記事も過去の記事も全部自動でアイキャッチを作成してくれるAuto Post Thumbnail | ごりゅご.com Auto Post Thumbnail … 関連記事プラグインYARPPをカスタマイズしてLinkWithin風にする | ごりゅご.
管理ページに移動せずに、直接記事を編集できるWordPressプラグイン「Front-end Editor」！
ブログのリニューアルをして以来、サイトをいじったりWordPressをいじるのが楽しくてしょうがない@OZPA です。いじるのって本当に楽しい・・・ブログの話な！ さて、そんなわけで自分の過去記事をぼーっと眺めている時間が増えたのですが、たまに 「あ、ここの部分ちょっとだけ直したいな」 といったことですとか、誤字を見つけたりすることがあるわけです。 そんな時に、イチイチ管理ページに移動して目的の記事を検索、修正→UPと言う流れが非常にめんどうだったわけなんですが、そんな悩みを解決してくれた、管理ページに行くこと無く記事の追加・修正を行えるプラグイン「Front-end Editor」をご紹介いたします。 このプラグインはWebクリエイターボックスさんの以下の記事で知りました。 記事を簡単に編集できるWordPressプラグイン「Front-end Editor」 | Webクリエイターボッ
faviconを超簡単に作成できるサイト「Dynamic Drive – FavIcon Generator」
年の瀬も押し迫ってまいりましたね。どうも、@OZPA です。 さて、気がつかれた方もいらっしゃるかもしれませんが、最近ブログのfaviconを変更いたしました。 そんなわけで、icoファイルの用意を容易にしてくれたサービス「Dynamic Drive」の「FavIcon Generator」をご紹介。 参考：Dynamic Drive- FavIcon Generator favicon用の画像を用意 まずはfavicon用の画像を用意します。 やだ・・・かわいい・・・！ 画像ファイルはgif, jpg, png, bmpのどれかにしておきましょう。 画像の用意ができたらDynamic Drive- FavIcon Generatorへ移動。 英語のサイトですが、使い方はめがっさシンプルです。 ご覧のとおり、画像を選択、必要な場合はOptionにチェックを入れて「Create Icon」ク
死ぬほど簡単にローカルにWordPress環境を構築できる「BitNami」の導入方法！（Mac編）
どうも。生まれて初めて当たり付き自動販売機で当たりが出た@OZPA です。 さて、かねてより和洋風◎の@isloop くんより 「ブログのデザイン、テンプレートじゃなくて自分で作ったほうがいいよ」 とのアドバイスをうけていたのですが、phpやcssどころかhtmlすらろくに理解していなかった私。 プロフィールページを作るのに戸惑ったり、はたまたサーバを移転するのにしこたま苦労したりと本当に手のかかるお子様だったわけです。そんな私がWordPressのテーマですって・・・？汚らわしいっ！ [blackbirdpie url=http://twitter.com/#!/OZPA/statuses/64271506724757504] ですが今年の4月の終わりに上のようなつぶやきをしていることをふと思い出し、新しいことを覚える良いチャンスだなということで、WordPressのテーマを作るためにB
[自炊][動画]これが自炊業界第一人者の手際！拙著がPDF化されるまでを録画してきた！
さて、書籍の自炊の手順といたしましては「カバーを外し、テキトウなページ数ごと引きちぎるように分ける」→「裁断機にてカット」→「ScanSnapでスキャン」というステップを踏むこととなります。 その前半部分、裁断機でカットするまでの動画をまずはご覧ください。 （音量に注意） 周りでウロチョロしているのは@goryugo 氏です。 さすが600冊以上もの本を自炊してきた男（2011年9月現在）。 手際が洗練されております。 あと、最後に見苦しい部分があったことをお詫び申し上げます。 何と言っても印象的なのは裁断機の切れ味の良さ。 こちらの裁断機は、氏もブログでオススメしている「Carl DC-210N」というものでございます。
![[自炊][動画]これが自炊業界第一人者の手際！拙著がPDF化されるまでを録画してきた！](https://cdn-ak-scissors.b.st-hatena.com/image/square/bed8611c99ce6ae1bef3f94b750d61ca70f31065/height=288;version=1;width=512/https%3A%2F%2Fozpa-h4.com%2Fwp-content%2Fuploads%2F41KbVaqBDEL._SL160_4.jpg)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
