WordPress のギャラリー機能使っていますか？ 使いにくい WordPress のギャラリーをちょっと使えるようにするカスタマイズです。 ものすごく長くなってしまいました ... できるだけ簡単にまとめてみたので興味があるひとはぜひ読んでみてくださいね！ Webサイトで写真を一覧表示したいときに、よく使われているギャラリー。WordPress のテーマにも、Webサイト全体をギャラリーみたくするものも、数多くありますよね！でも普段はブログや一般的な Webサイトとして使っていて、その中の数ページをギャラリーページとして使いたい … ってこともあると思います。 私の場合、ギャラリーを jQuery のプラグインと組み合わせて作成する事が多いので、WordPress のギャラリー系のプラグインは使ってません（おすすめのギャラリー系、画像管理系のプラグインがあったら教えて欲しいです）。 ま

Twitter・mixi・facebook等の国内主要ソーシャル用ボタンを超カンタンに作れる「jQuery.socialbutton」 2010年11月05日- 2011/5/7: 本ライブラリに脆弱性がありましたので速やかにバージョンアップを実施して下さい。(詳細) Twitter/facebook/mixi/GREEのボタンを超カンタンに作れる jQuery.socialbutton プラグインを作ったよ Twitter・mixi・facebook等の国内主要ソーシャル用ボタンを超カンタンに作れる「jQuery.socialbutton」。 仕様について理解しなくても、このプラグインを読み込んでちょちょっと数行書くだけで実装出来てしまいます。 例えば、facebookなら、$('.facebook').socialbutton('facebook_like'); と１行書くだけ。 mi

ユーザーがウェブサイトを訪れる時間はわずかなものです。その短時間の間に、ユーザーの注意を惹きつけ、印象に残るようにするための7つの方法を紹介します。 Billboard Web Design: How to Win Your Audience's Attention [ad#ad-2] 下記は各ポイントを意訳したものです。 元記事では他の事例やビルボードの素材も紹介しています。 はじめに 1. クリエイティブとユニーク 2. 説得力のある見出し 3. 巧妙さと辛辣さ 4. ブランディングを印象づける 5. 注意を惹きつけるアイキャッチ 6. ポイントはクリーンでシンプルでストレートに 7. 明快さとコントラスト はじめに 人の目を惹くビルボードスタイル（立て看板）の広告は目にした瞬間、簡単に人々の記憶に残り、楽しいものです。イメージのカラーやフォントも重要ですが、アイデアにもユニークがあり

Google Mapsにオリジナルのマークやポリゴン、任意の画像などを簡単に加えて設置できるjQueryのプラグインを紹介します。 GMAP3 -jQuery plugin to manage Google Map API デモ [ad#ad-2] GMAP3はGoogle Map APIを使用するため、使用するページに外部ファイルとして記述します。 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> Googleマップの設置は簡単で、空のdiv要素にidを指定して配置します。 下記に簡単な例を紹介します。 HTML <div id="test1"></div> JavaScript $.gmap3.setDefault({ init:{ center:

ミニマルなWebデザインをする時に気を付けたいなーと思ういくつかを注意書きとしてまとめてみました。ミニマルなWebデザインって簡単そうで一番難しいんじゃないかと感じてる今日この頃。もっとミニマルなデザイン上手になりたいです。最近ミニマルなデザインという言葉をよく目にするようになりました。 （昔からある言葉ですし、最近じゃなくて前から言われてたぞという人もいると思いますが…） 初めて聞いたときは、ミニマルなデザインってどんなデザイン？と思って検索したものでした。 ミニマル（英: minimal）とは、「最小限の」という意味である。 ミニマリズムとは美術・建築などの造形芸術分野において、1960年代のアメリカに登場し主流を占めた傾向、またその創作理論であり、最小限（Minimal)主義（ism）から誕生し、必要最小限を目指す手法である。装飾的な要素を最小限に切り詰め、シンプルなフォルムを

mail, mac | 01:45 | | IMAP対応のメールクライアントでローカルの保存フォルダをGmailのフォルダへすべてドラッグ&ドロップする。いま利用しているPOPメールはすべてGmailへ転送する設定にする。 …ほんとうにこれだけでした! かんたん!Gmailのアカウント1つにまとめることで、自分のコンピュータ・iPhone・出先のコンピュータなどどこからでもすべてのメールにアクセスできて、未読/既読も同期される。ローカルに保存されているメールをGmailへ転送「GmailのIMAPアクセスを有効にしている*1 」かつ「IMAP対応のメーラを利用している」ことが必要です。MacだとOS標準のMail.appがIMAPに対応しています。自分の使っていたのはこれなので以下はMail.app基準の説明です。今まで受信していたメールは「受信トレイ」にあります、または「このMac内」の

ヤフーは10月29日、モバイルサイトのコンテンツ変換サービス「Yahoo!モバイルトランスコーダ」を発表した。11月1日より提供を開始する。 Yahoo!モバイルトランスコーダは、ユーザー側で作成したテンプレートを基に、3キャリアの新旧機種やiPhone、アンドロイド端末などのスマートフォンに適応したWebサイトを自動的に構築するサービス。運用実績豊富な「モバイル版Yahoo! JAPAN」で利用されているプラットフォームをベースにしている。 Yahoo!モバイルトランスコーダの概要 ランニングコストを低く抑えられる点が大きな特徴の1つとして挙げられており、月間499万PVまでであれば月額3万円で利用することができる。将来的には、アクセス結果を解析する各種ツールも提供される予定。 すでにゴルフダイジェスト・オンラインが採用を決めており、11月1日より同サービスのモバイルコマースサイトの運用

CSS3でもjQueryでも実装できるシャッターのようにスライドするエフェクトを例に、CSS3とjQueryを併用し切り分けて実装する方法を紹介します。 Garage Door Style Menu デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 マークアップとスタイリング jQuery Method CSS3 Method CSS3とjQueryの併用 -Modernizr マークアップとスタイリング HTML HTMLはクリーンでセマンティックに実装されています。 <ul id="garagedoor"> <li id="shutter1"><a href="#1">Link 1</a></li> <li id="shutter2"><a href="#2">Link 2</a></li> <li id="shutter3"><a href="#3">Link 3

最近リリースされた高品質なフリーのデザインフォントを紹介します。 Melbourne 個人利用無料。 Ubuntu 個人・商用利用無料。 Oblik 個人・商用利用無料。 [ad#ad-2] PT S

前置き 私は、Linuxの知識はほとんどないWebデザイナーです。 これまで一般的なレンタルサーバを借りていたのですが、cronの実行やHTMLのgzip圧縮などに制限があったため、最近話題のVPSを借りました。 が、Linuxコマンドは cd（ディレクトリの変更） と ls（現在のディレクトリの中にあるファイルを表示）しか知らない状態でのスタート。 果たしてどうなることやら… どんなbotを作るか 先日参加したCSS Holicという勉強会で、某社CTOの方からWebサービスに関する貴重なお話を聞いたあと懇親会の席でたまたま隣になり、会社経営の難しさなどのお話を伺う機会がありました。 そこで、「会社の雰囲気が悪くなってきたら、しもねたを言うことで場を和ませる」という素敵なライフレシピを教えていただいたのですが、「新鮮なしもねたを自動的にツイートしてくれたり、◯月のベストしもねたを教

Time Capsule で便利にバックアップしていたけど，MacBook に外付けハードディスクを足したらその分だけバックアップする容量が足りなくなりました．そして買ったばかりの外付けハードディスクがクラッシュ．デジタル写真データが消失！ 写真データを外付けハードディスクに移動する直前のバックアップなどからデータをかき集めて，なんとかほとんどのデータは復元できました． 写真データは Apple Aperture を使って管理しています．Apertue のライブラリは MacBook 内蔵ハードディスクにあり，RAW データは外付けハードディスクを参照するっていう使い方でした．MacBook の内蔵ハードディスクの Aperture ライブラリにはプレビュー画像とかメタデータとかしかないわけです．元となる RAW データが格納された外付けハードディスクのクラッシュには精神的に大きなダメージ

IMGr :: jQuery Image Rounder IEでも動作する画像を超簡単に角丸化できるjQueryプラグイン「IMGr」 $("imageElement").imgr(); と唱えるだけでクロスブラウザで画像の角を丸くすることが可能です。 $("imageElement").imgr( optoins ); でradiusやサイズ、色のカスタマイズが可能。 赤いボーダーで角丸の例 ボーダーを消した例 四方の角丸の操作も自由自在です。 IE 6, IE 7, IE 8, FF 3.6, Chrome 6.0, Safari 5.0, Opera 10.62 のブラウザ上でテストされているそうです。 関連エントリ CSSで角丸テクニック２５ 角丸を使った可愛いカレンダーピッカー実装JavaScript「jsDatePick」 CSS3で影付き角丸グラデーション付きのボタンを作成す