category: Technology

date: October 22, 2024

【2024年版】MacのMAMP PROとParallelsで、IEのテストをする方法

MAMP PRO 6.8.1macOS Sequoia 15.0.1変更する箇所は2箇所。IP address*（アスタリスク）になっているはずなので、ドロップダウンから「192.168.x.x」となっているWi-FiのローカルIPアドレスに変更Port number他は全て …

category: Technology

date: September 26, 2024

慣性スクロールを実装できるJSライブラリ – Lenis

JSライブラリ／Lenisを使えば、慣性スクロールを実装できます。滑らかなスクロール体験を！ JSライブラリでお手軽に導入する慣性スクロール（前編）Lenis – Get smooth or die tryingLenisが使われているサイト：https://webisoft …

category: Technology

date: April 28, 2024

4グリッドで画像を並べてhoverでscaleさせるレスポンシブコード

4グリッドで画像を並べてhoverでscaleさせるレスポンシブコードは以下になります。 vertical-align: top; がないと、hover時に縦に伸びてしまう（高さが変わってしまう）ので注意。 ul {display: grid;grid-template-co …

category: Technology

date: March 22, 2024

ローカルからGitHubにコミットして自動でテストサーバにアップロードする方法

やることは3つ。1. シークレットキーの作成https://zenn.dev/mamezou/articles/23a221c7287cf6を参考に、Settings -> Secrets and variables -> Actions -> New re …

category: Technology

date: December 15, 2023

WordPress6.4.2でWPBakery Visual Composerの編集ができない時の対処法

WordPress6.4.2で、以下のエラーがあった。・固定ページの編集画面で、cssがオフでテキストが全て左寄せになり編集できない・投稿ページの新規追加や編集ができない（ページが真っ白の状態）対応WPBakery Visual Composerをオフ（無効化）にThemef …

category: Technology

date: September 20, 2023

jQuery 1.9以降でtoggleが廃止されているので、jQuery Migrateを使う

jQuery 1.9以降でtoggleが廃止されているので、jQuery Migrateを使います。それを使うことで、廃止されたAPI（この場合はtoggle）を復元して使用することができます。スマホのハンバーガーメニューで。押すたびにclassをadd, removeするの …

category: Technology

date: July 24, 2023

更新されていない → キャッシュを削除してください を言わないために

クライアントから更新されていないと連絡があり、キャッシュを削除してください と言うのではなく、cssにクエリを追加することで最新の状態でWebサイトを表示させます。バージョン管理<link rel=”stylesheet” href=&#8221 …

category: Technology

date: July 13, 2023

VS Codeのフォーマッタが効かない時に確認すること

VS Codeのフォーマッタが効かない時には、以下を確認します。Prettier+を使用している場合、右にチェックマークがあればOK。x になっていれば、Prettier+の箇所をクリックして出力を確認し、エラー箇所を修正します。

category: Technology

date: July 13, 2023

Swiper.jsのカスタムの参考になるサイト

サムネイル付きのスライダーhttps://www.webdesignleaves.com/pr/plugins/swiper_js.html

category: Technology

date: June 04, 2023

WordPressのContact Form 7でメッセージをフォームの上に設置する方法

WordPressのContact Form 7でメッセージをフォームの上に設置するには、応答メッセージのためのプレースホルダー [response] を以下のように追記します。[response]<label> name[text* your-name auto …

category: Technology

date: June 04, 2023

ドメインがお名前.comでサーバがhetemlのサイトを自動デプロイする際の注意点

ドメインがお名前.comでサーバがhetemlのサイトを、SamKirkland/FTP-Deploy-Actionを使って自動デプロイする際の注意点です。まずサブドメインをhetemlで作っても反映されなかったんですが、勘違いしていてお名前.comでサブドメインを作る必要が …

category: Technology

date: March 01, 2023

npm rebuildでエラーを解決した／UnhandledPromiseRejectionWarning: Error: Could not locate the bindings file. Tried:

MacBook Pro をM1 Max からM2 Maxに買い替えて、環境構築中なんですが、今まで動いていたNuxt.jsのプロジェクトが動かなくなり困りました。UnhandledPromiseRejectionWarning: Error: Could not locate …

category: Technology

date: November 17, 2022

jQueryを使わないでクリック時にクラスを追加する方法

var root = document.getElementsByTagName(‘html’)[0];var btn_open = document.querySelector(‘.open.menu_trigger’);bt …

category: Technology

date: October 13, 2022

Nuxt.jsでプロジェクトを作成して以前のファイルを流用する方法

Nuxt.jsでプロジェクトを作成して以前のファイルを流用するには、以下のようにします。npx create-nuxt-app projectnamenuxt.config.js, package.jsonなどを以前のファイルをコピーして上書きするnpm i　← packag …

category: Technology

date: July 28, 2022

slick.jsでちらつく場合の対処法

slick.jsでスライダーを実装していてちらつく場合の対処法です。 .slick-slide, .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, …

category: Technology

date: July 27, 2022

MAMPでSSLのエラーが出る場合の対処法

MAMPでSSLのエラーが出る場合は、以下のSSLにチェックを入れます。

category: Technology

date: May 30, 2022

Nuxt.jsでParallaxを実装する方法

Nuxt.jsでParallaxを実装するには、以下の方法が便利です。A plugin of Vue that adds a directive for parallax effect by rellax.jsvue-rellaxGithub以下はNuxt.js / Vue. …

category: Technology

date: April 20, 2022

さくらのレンタルサーバ スタンダードでgithubから自動デプロイする方法

GitHubにだいぶ慣れてきたんですが、さくらのレンタルサーバでも自動デプロイ（自動アップロード）がしたくなり、設定しました。nuxt.jsやvue.jsを使っているわけではない静的ファイル + WordPressファイルなんですが、以下のページを参考に設定完了。さくらレンタ …

category: Technology

date: January 31, 2022

QNAP TS-453Dのスペックメモ

QNAP TS-453Dの仕様メモ。ref: https://www.forcemedia.co.jp/blog/ts-x53d

category: Technology

date: December 26, 2021

VS Codeの日本語（全角文字）に付く黄色い枠を消す方法

Visual Studio Code 1.63から、日本語（全角文字）に黄色い枠が付くようになったようなんですが、不要なので消します。command + ,で設定を開くUnicode Highlight を検索以下のように設定する。ref: VS Codeで全角スペースを表示 …

category: Technology

date: December 12, 2021

VS Codeで画像のwidth/heightを自動入力する方法

Visual Studio Codeで画像のwidth/heightを自動入力するには、以下のようにします。Command + shift + pUpdateで検索し、Emmet Update Image Sizeの右端にある設定アイコン（Configure Keybindi …

category: Technology

date: August 17, 2021

CPIサーバのWordPressでForbiddenが出てサイトが表示されなくなった場合の対処法

CPIサーバのWordPressでForbiddenが出てサイトが表示されなくなった場合は、.htaccessに以下を追記します。Options +SymLinksIfOwnerMatchRewriteEngine Onref: .htaccess の設定方法

category: Technology

date: July 28, 2021

WordPressで「このサイトで重大なエラーが発生しました。」と表示された時の対処法

WordPress（バージョン5.8）で「このサイトで重大なエラーが発生しました。」と表示された時は、何をしていいかわからないので、エラーを表示させます。wp-config.phpを開き、以下のように変更します。変更前：define( ‘WP_DEBUG&#821 …

category: Technology

date: July 28, 2021

さくらのレンタルサーバで、新規WordPressのPHPバージョンを上げる方法とSSIの設定

Webサイトをリニューアルする際、WordPressの最新版をインストールすると、PHPバージョンが古く使えないというエラーが出ることがあります。サーバの設定（コントロールパネル > スクリプト設定 > 言語バージョン設定 > PHPのバージョン）からPHP …

category: Technology

date: June 29, 2021

Visual Studio Codeの便利な変換機能

Visual Studio Codeでは、Emmet Abbreviationがきき自動変換されますが、以下のような変換が便利です。.line でenter<div class=”line”></div> と表示されるlorem …

category: Technology

date: June 24, 2021

Visual Studio CodeのMacのショートカット

選択部分のコメントアウト：option + shift + a行のコメントアウト：command + /新規ターミナルを開く：control + shift + ^新しいタブで開く：左サイドバーのファイルをダブルクリック（シングルクリックだと現在のタブと入れ替わる）

category: Technology

date: June 24, 2021

Google Workspaceから変なメールが届いた

Google Workspaceから変なメールが届きました。Dear Google Workspace Administrator,You have an important notification from Google Operations that requires …

category: Technology

date: June 08, 2021

WordPressのEbor Frameworkプラグインでのエラー回避

WordPress 5.2でEbor Frameworkプラグインで以下のエラーが出て、投稿画面が真っ白になり投稿・編集できない状態になります。エラーメッセージ: Declaration of CMB2_Type_Oembed::render() must be compat …

category: Technology

date: June 07, 2021

WPBakery Visual ComposerはWPBakery Page Builderになった

WordPressのプラグイン、WPBakery Visual ComposerはWPBakery Page Builderになったのでややこしいため注意が必要です。購入したテーマにバンドルされている場合は、テーマ配布元から連絡がくるようなので、それに従ってアップデートします …

category: Technology

date: January 05, 2021

Logic Proの言語を日本語にする方法

Macの言語を英語設定にしている場合、Logic Proの言語は英語になります。Macの言語を日本語にすればLogic Proも日本語になりますが、そうしたくない場合、以下のようにします。Terminalを起動し、以下コマンドを実行する。defaults write com. …

category: Technology

date: November 12, 2020

新しいMacにNuxt.js環境を構築して、以前のファイルを流用する方法

新しいMacにNuxt.js環境を構築するには、以下のようにします。ref:Nuxt.jsを動かす環境を構築するまっさらなMacにNuxt.js環境を構築Node.jsの環境を作るnpm install –save vue-displacement-slidesh …

category: Technology

date: October 21, 2020

家のiMac Proに外からMacBook Proでアクセスする方法

どこでもMy Macの機能が2019年7月1日に廃止になったようで、家のiMac Proに外からMacBook Proでアクセスするには以下の設定が必要です。「システム環境設定 > 共有」で、上記のように設定し、MacBook Proからは、Finderのサイドバー／L …

category: Technology

date: October 19, 2020

WordPressアップデート後にVisual Composerが動かなくなった時の対処法

WordPressアップデート後にVisual Composerが動かず、「App Template Blocks for WPBakery Page Builder」をアクティベートしようとした時に以下のエラーが表示された時の対処法。Error! you need to i …

category: Technology

date: September 08, 2020

Sony α7sをMacにつないでGoogle Meetのwebカメラにしたいができない

Sony α7sをMacにつないでGoogle Meetのwebカメラにしたかったんですが、できませんでした。Sony α7sをテザーケーブル（USB-C）でMacに接続Imaging Edge DesktopのRemoteアプリを起動* Remoteアプリで接続するには、U …

category: Technology

date: June 03, 2020

Code Editor – iPadでコーディング・FTPができるアプリ

iPadでコーディングとFTPがしたいと思っていたんですが、Macでも使っているCodaが、iOS用のアプリ「Code Editor」を出していて、それでいけました。Panic Inc.前から好きなんですがすごい。iPhoneでも使えるようです。Code Editor

category: Technology

date: May 30, 2020

iPad OSのiPadでユーザーエージェントが取得できない時の対処法

iPadは、iOS12まではユーザーエージェントはiPadだったんですが、iPad OSでのユーザーエージェントはMacintoshになっているようです。なので、ua判定は以下のように記述します。以下一行を追加：      || (u.indexOf(‘ipad& …

category: Technology

date: December 26, 2019

svgのpolygon, polylineをpathに変換する方法

svgの線／塗り（stroke / fill）のアニメーションをしたい場合、パスにする必要があり、ポリゴン／ポリラインだとうまくいきません。polygon, polylineをpathに変換するには、以下サイトから行います。Convert SVG Polygon to Pat …

category: Technology

date: December 21, 2019

css transitionの書き方

.class {opacity: 0;transition: all 1.8s .3s cubic-bezier(0.19, 1, 0.22, 1);transform: translateY(40px);}.class.is-show {opacity: 1;transfo …

category: Technology

date: October 24, 2019

cssのdisplay:flexで最初の要素だけ幅を指定したい時のコード

cssのdisplay:flexで最初の要素だけ幅を指定したい時は以下のように書きます。.flex-container >:first-child { flex-basis: 100px; flex-shrink: 0; }

category: Technology

date: October 24, 2019

新しいiPhoneでGoogleカレンダーを設定する方法

新しいiPhoneでGoogleカレンダーを設定するには、以下のようにします。設定／パスワード&アカウント をタップGoogleアカウントを追加デフォルトだとiPhoneのカレンダーに保存されるため、以下のように設定します。設定／カレンダー／デフォルトカレンダー／GM …

category: Technology

date: October 24, 2019

MovableType.netをテストで使う方法

MovableType.netを試用するには、MovableType.net 制作者向け評価ライセンスを申請します。ウェブサイト数：1つブログ数：10ブログまでユーザー数：10人までライセンスの有効期限：6カ月※6カ月毎に更新が可能です。MovableType.net 制作者 …

category: Technology

date: October 21, 2019

Adobe XDでプレビュー（Share for Review）のアートボードの順番が正しくない時の対処法

Adobe XDでプレビュー（Share for Review）のアートボードの順番が正しくない場合は、左から順番にアートボードが並んでいるのを確認した上で、プロトタイプ画面のタブの色を確認します。タブが青くなっているページが1ページ目としてプレビューで表示されます。

category: Technology

date: October 11, 2019

Nuxt.js / Vue.jsでの実装方法メモ

Nuxt.js / Vue.jsで書く画像ファイルパス.vueファイル：require(‘~/assets/img/filename.jpg’)cssファイル：background: url(~@/assets/img/filename.jpg);リン …

category: Technology

date: September 13, 2019

Nuxt.jsでpackage.jsonが見つからないエラーが出るときの対処法

Error: Cannot find module ‘../package.json’Nuxt.jsでpackage.jsonが見つからない上記のエラーが出るときは、以下のようにnode_modulesを削除して、再インストール（npm install …

category: Technology

date: September 12, 2019

Mac用エディタCoda2でvue.jsをシンタックスハイライトする方法

Mac用エディタCoda2でvue.jsをシンタックスハイライトするには以下のようにします。Coda2.appを右クリック「Show Package Contents」Contents/Resources/HTML.modeを右クリック「Show Package Conten …

category: Technology

date: August 06, 2019

Lightroom Mobileでプリセットが重複して表示される場合の対処法

iPhoneのLightroomでプリセットが重複して表示されていたんですが、アンインストール後インストールし直すことで直りました。

category: Technology

date: August 06, 2019

Lightroom CCで写真を追加できない or クラウドの写真を読み込めなくなった時の対処法

急にLightroom CCで写真を追加できない、かつクラウドの写真を読み込めなくなったんですが、サポートに問い合わせて解決しました。エラーメッセージ：attempt to index a boolean valuehttps://helpx.adobe.com/jp/sup …

category: Technology

date: July 27, 2019

jquery.bgswitcher.jsを使ったスライドショーで水平方向に画像を切り替える方法

jquery.bgswitcher.js（version 0.4.3）を使ったスライドショーでは、blindを使うとデフォルトでは垂直方向に画像が切り替わりますが、水平方向に画像を切り替えるには、以下のようにします。変更前：$el.animate({height: 0}, t …

category: Technology

date: March 28, 2019

レスポンシブでpcとスマホでdivの順番を入れ替える方法

レスポンシブでpcとスマホでdivの順番を入れ替えるには、以下のように書きます。* 2番目と4番目のdivを入れ替える場合。div_wrap {display: flex;flex-flow: row wrap;}div:nth-child(2) {order: 4;}div …

category: Technology

date: March 28, 2019

jQueryでクラスの追加／削除をする方法

jQueryでクラスの追加／削除をするには、以下のように書きます。$(function() {$(‘#btn’).on(‘click’, function() {$(this).toggleClass(‘is-act …

category: Technology

date: March 19, 2019

MacのTransmit 5でファイル権限がおかしくなる場合の対処法

MacのFTPクライアントであるTransmit 5（Version 5.2.4）で、ファイルをアップロードするとhtmlが表示されない場合があります。理由はファイル権限が600になっているためで、なぜかそうなってしまう場合がある。回避するには、以下のように設定します。ファイ …

category: Technology

date: March 12, 2019

WordPressサイトでwwwありなしを統一する方法

WordPressサイトでwwwありなしを統一するには、「設定／一般／サイトアドレス (URL)」で設定します。wwwありに統一する場合は、wwwありを付ける、wwwなしに統一する場合は、wwwをとります（デフォルトではwwwなしになっています）。

category: Technology

date: March 05, 2019

VideoSmaller – mp4を圧縮して軽くするサービス

mp4の動画を圧縮して軽くするには、以下のサービスが便利です。それほどクオリティーを落とさず、90%程度圧縮することができます。VideoSmaller

category: Technology

date: March 02, 2019

illustratorでオブジェクトサイズにカンバスサイズをリサイズしてsvgで書き出す方法

イラレでオブジェクトサイズにカンバスサイズをリサイズするには、以下のようにします。オブジェクト > アートボード > オブジェクト全体に合わせるcommand + shift + sで「ファイル形式：svg」を選択し、SVGコードをhtmlで使用します。

category: Technology

date: December 10, 2018

Website Explorer：Windows用のサイトマップ作成ツール

Website Explorerは、Windows用のサイトマップ作成ツール。xls／エクセルにページタイトルなどもまとめてくれるようです。http://www.umechando.com/webex/

category: Technology

date: December 10, 2018

macOS Mojave（10.14）でDVDに書き込む方法

macOS Mojave(10.14)環境で空のディスク(BD/DVD/CD)挿入時に、Finderまたはデスクトップ上に挿入したディスクが表示されない場合があるようで、その際は以下の手順でディスクにデータを書き込むことができます。macOS Mojave（10.14）環境に …

category: Technology

date: November 11, 2018

スマートフォンで横スクロールするはみ出したtableを実装する方法

スマートフォンで横スクロールするはみ出したtableを実装するには、以下のように書きます。* .table_wrapはtableの親要素.table_wrap {overflow: auto;white-space: nowrap;-webkit-overflow-scrol …

category: Technology

date: October 15, 2018

Lightroom CCとDxO FilmPack 5を非破壊編集で連携する方法

Lightroom CCとDxO FilmPack 5を非破壊編集で連携するには、以下のようにします。* Lightroom CCのRAWデータを、直接DxO FilmPack 5で編集することはできません。Lightroom CCの写真を右クリックして、「Photoshop …

category: Technology

date: October 15, 2018

Lightroom CCでファイル名をコピーする方法

Lightroom CCでファイル名をコピーするには、i で情報パネルを表示した後、ファイル名の箇所で右クリックします。

category: Technology

date: October 15, 2018

Lightroom Classic CCで同期が止まってしまう場合の対処法

Lightroom Classic CCでクラウドへの同期が止まってしまい同期できない場合は、以下のようにします。以下のキャッシュファイルを削除Macintosh HD / Users / （ユーザー名） / Library / Caches / Adobe / Lightr …

category: Technology

date: October 13, 2018

macOS Mojave／モハーベの新機能4つ

macOS Mojaveを使ってみて便利だなと思った、新機能4つです。ファインダーに「Rotate Left」が表示され、プレビューアプリやPhotoshopを開かなくても画像を回転できる。ファインダーに「command + i」を押さなくてもF値などの撮影情報が表示される。 …

category: Technology

date: October 12, 2018

macOS Mojave／モハーベ にアップデート

MacのOSをMojave（モハーヴェ）にアップデート。かっこいいです。アメリカ南西部にあるモハーヴェ砂漠が由来のようです。デスクトップの壁紙は、朝昼夜の時間に合わせて変化します。macOS Mojave／モハーベ

category: Technology

date: October 11, 2018

iPhone, iPadのLightroom CCでvscoのプリセットを使う方法

iPhone, iPadのライトルームCCでvsco（ヴィスコ）のプラグインを使うには、まずPC, MacのLightroom CCにvscoを読み込みます。Lightroom CCにvscoのプリセットを読み込む方法クラウドなので、iPhone, iPadのLightroo …

category: Technology

date: October 11, 2018

Lightroom CCにvscoのプリセットを読み込む方法

フィルムシミュレータであるvsco（ビスコ）のプラグインは、Lightroom Classic CCにはインストールすればすぐに読み込まれますが、Lightroom CCで使うには以下の手順で読み込む必要があります。最初に、VSCO のプリセットおよびプロファイルを Ligh …

category: Technology

date: October 10, 2018

WordPressにCSSスタイルを初期化してテキストのみペーストする方法

別のブログやサイトからテキストをコピーしてWordPressに貼り付けようとすると、CSSスタイルもコピーされて文字が大きくペーストされたりしますが、スタイルを初期化して、プレーンテキストをペーストする方法です。「command + v」ではなく「command + shif …

category: Technology

date: October 04, 2018

creamu chat – チャットによるお問い合わせ受付を開始しました

チャットによるお問い合わせ受付、creamu chatを開始しました。ブラウザ右下のチャットアイコンから、お問い合わせいただけます。Webデザインやグラフィックデザイン、撮影、各種お見積もり、Photoshopやillustratorの使い方、WordPressに関するご質問 …

category: Technology

date: October 04, 2018

ブログとニュースにソーシャルボタンを設置

ブログとニュースにソーシャルボタンを設置しました。はてブ／Facebook／Twitter／Pinterest／Pocketのボタンです。WordPressプラグインの「WP Social Bookmarking Light」を使っています。簡単に設定できていい感じ。サーバの …

category: Technology

date: October 04, 2018

Webフォントでスウォッシュ／リガチャを有効にするCSS

Webフォントでスウォッシュ／リガチャを有効にするには、CSSで以下のように書きます。.swash {    font-feature-settings: “swsh” 1;}.ligature {    font-variant-ligatures: …

category: Technology

date: October 03, 2018

WordPressのカスタム投稿タイプでタクソノミー （カテゴリー）を一括変更する方法

デフォルトでは、WordPressのカスタム投稿タイプでタクソノミー （カテゴリー）を一括変更できません。変更するには、「CPT UI／タクソノミー の追加と編集／タクソノミーを編集」ページで、 「クイック編集 / 一括編集パネルに表示。」をTrueにします。

category: Technology

date: September 26, 2018

cssのdisplay: flex;で隙間なく3分割する方法

cssのdisplay: flex;で隙間なく3分割するには、以下のように書きます。.box2 {    width: calc(100% * 2/3);}.box1 {    width: calc(100% / 3);}.box2が2/3、.box1が1/3のwidthで …

category: Technology

date: September 24, 2018

WP Admin UI Customizeでjsが動かなくなった

プラグインのWP Admin UI Customizeを使っていて、管理画面でログインした状態でサイトを見ると、jsが動かなくなりサイトが表示されなくなりました。停止することで正常に戻りました..。

category: Technology

date: September 23, 2018

WordPressをカスタマイズ

WordPressをカスタマイズ中。デフォルトの「投稿」を「制作実績」に変更し、ニュースをカスタム投稿タイプで別にしました。

category: Technology

date: July 10, 2018

Lightroomで元画像の比率のまま縦位置にトリミングする方法

Lightroomで元画像の比率のまま縦位置にトリミングするには、rで切り抜きのメニューに入った後、xを押します。

category: Technology

date: July 04, 2018

facebookのogpのキャッシュ削除

facebookのogpのキャッシュをクリアするには、以下ページの「新しいスクレイピング情報を取得」をクリックします。 https://developers.facebook.com/tools/debug/og/object/

category: Technology

date: February 20, 2018

Macの「保存しない」のショートカット

Macの「保存しない」のショートカットです。 Photoshop / illustrator：ファイルを閉じるとき、Command + d で保存しないを選択できます。 テキストエディットなど、Macのネイティブアプリ：ファイルを閉じるとき、Command + delete …

category: Technology

date: January 09, 2018

CSSのみで実装する垂直方向にサムネイルで切り替えるスライドショー

CSSのみで実装する垂直方向にサムネイルで切り替えるスライドショー https://codepen.io/huijing/pen/GvNLJm

category: Technology

date: January 05, 2018

Macを移行する際に引き継ぐ設定

古いMacから新しいMacに移行する際のメモ。まずは新しいMacのキーチェーンを削除し、古いMacのキーチェーンをペーストする。【移行前】Font:Library/Fonts/ をバックアップTransmit:Transmit（FTPクライアント）の設定を「Servers / …

category: Technology

date: December 20, 2017

WooCommerceの商品をランダムに表示する方法

WooCommerceの商品をランダムに表示するには、functions.phpに以下を追記します。 add_filter( ‘woocommerce_get_catalog_ordering_args’, ‘custom_woocomme …

category: Technology

date: December 14, 2017

WordPressサイトをSSL化する方法

サイトをSSL化するには、まず.htaccessでhttpをhttpsにリダレクトします。 http://のURLをSSL付きのhttps://に統一する方法 ただこれだけだとWordPressサイトでは画像URLなどに絶対パス（http://）が残っているので、以下の手順で …

category: Technology

date: July 27, 2017

YouTubeの動画を背景に表示する「jQuery.mb.YTPlayer」

YouTubeの動画を背景に表示するには、jQuery.mb.YTPlayerが便利そうです。 スマートフォンでも再生されます。 jQuery.mb.YTPlayer

category: Technology

date: June 09, 2017

スマホで動画をvideoタグでインライン再生する方法

iOS10以降、iPhoneのMobile Safariでvideoタグに”playsinline”を書けば、インライン再生できるようになったようです。その際にはmutedが必要です。 <video autoplay muted playsinline loop> …

category: Technology

date: January 08, 2017

macOS Sierra（10.12）からアプリケーションを削除（アンインストール）する方法3選

macOS Sierra（10.12）からアプリケーションを削除（アンインストール）するには、以下の3つの方法があります。 1. LaunchPadからアプリを選択し、長押し／削除。2. Applicationsフォルダの対象アプリフォルダのアンインストーラを使用する（Ado …

category: Technology

date: December 20, 2016

Lightning – SDカードカメラリーダー

今月中ディスカウントされているので、MacBook Pro TouchBar用のケーブル類を一通り揃えたんですが、これは始め失敗したと思いました..。Macには挿せず、iPhoneにしか挿せないんです。Lightningと書いてあるといえば書いてあるんですが。 でも初めて使っ …

category: Technology

date: December 19, 2016

font-feature-settings: フォントの文字詰め

CSSのfont-feature-settingsを使ってフォントの文字詰めを試してみたんですが、結果的にはうまくいかずデフォルトに戻すことに..。 font-variant-east-asian: proportional-width; -moz-font-feature- …

category: Technology

date: December 17, 2016

MacBook Pro TouchBar 13inch

MacBook Pro TouchBar 13 inchが届きました。 先日15 inchが届いたんですが、USキーボードがどうしても慣れず、重量の1.8kgも重かったため返品させてもらうことに..。 パフォーマンスもいいし軽いし、かなり最高のデバイスなので、大切に使っていき …

category: Technology

date: December 17, 2016

Photoshopのデザインデータをブラウザでプレビューする方法

レスポンシブの時代、ブラウザサイズや端末がたくさんあってデザインが大変ですね..。最近は、1440px x 835pxでデザインしています。 ただブラウザで見てみないと実感がわかない、ユーザの気持ちがわからないので、何かプレビューする方法はないかと思っていたところ、見つけまし …

category: Technology

date: November 20, 2016

MacBook Pro Touch Bar 15inch

MacBook Pro Touch Bar 15inch が届きました。 初めてUSキーボードにしてみました。

category: Technology

date: April 07, 2016

Clippy – cssでクリッピングマスクを作れるサービス

Clippyは、cssでクリッピングマスクを作れるサービスです。 現状IE / Firefoxは対応外。 http://bennettfeely.com/clippy/

category: Technology

date: March 17, 2016

Web Fontでオールドスタイル数字を使う方法

Web Fontでオールドスタイル数字（Oldstyle figures）を使うには、以下のように書きます。 .class { font-variant-numeric: oldstyle-nums; -moz-font-feature-settings: “on …

category: Technology

date: March 09, 2016

ハンバーガーメニューのモーション

ハンバーガーメニューのモーション： Tasty CSS-animated hamburgers

category: Technology

date: November 02, 2015

Macのスクリーンショット画像の影をなくす方法

Macのスクリーンショット画像の影をなくには、ターミナルで以下コマンドを打ちます。 $ defaults write com.apple.screencapture disable-shadow -boolean true SystemUIServerを再起動し、設定を反映し …

category: Technology

date: May 13, 2015

Safariのタブ移動できるショートカット

Safariでタブ移動は「control + tab」ですが、2本指でピンチインすることで、 片手でタブ移動することができます。 確認ブラウザ：Safari 8.0.6 ref: Mac の基本：マルチタッチジェスチャ

category: Technology

date: December 15, 2014

ラピッドサイトでPHPが動かない場合の対処法

動かない：<? echo “test”; ?&gt 動く：<?php echo “test”; ?&gt ラピッドサイトで上記のようにPHPが動かない場合、 short_open_tagがOFFに …

category: Technology

date: November 12, 2014

MacBook Pro Retina 15inchのカバー

クラッチバッグ的にMacを持ち歩きたくなったので、カバーをゲット。 気に入りました。 Decoded 15インチ レザースリムスリーブ for MacBook

category: Technology

date: October 22, 2014

Mac OS X Yosemite でMAMP PROのApacheが起動しないときの対処法

Mac OS X Yosemiteにアップデートしたところ、 MAMP PRO v2.0.5のApacheが起動しなくなったんですが、 以下方法で起動しました。 /Applications/MAMP/Library/bin/envvars 「envvars」を「_envvar …

category: Technology

date: September 29, 2014

はてなブックマークの人気記事を取得する

サーバの仕様変更によりPHPのパースがうまくいかなくなったので、 以下の通り変更しました。 フッタの「popular entries」に表示されています。 <?php $xml = simplexml_load_file("http://b.hatena.ne …

category: Technology

date: June 25, 2014

【追加募集】週2日〜　マークアップエンジニア募集

業務拡大につき、以下の内容でマークアップエンジニアを募集します。 前回の募集で1人採用できたのですが、追加でもう1名か2名、探したいと思っています。 ・募集職種 　マークアップエンジニア ・仕事内容 　コーディングを中心としたWeb制作全般 　jQuery / JavaScr …

category: Technology

date: June 15, 2014

マークアップエンジニア募集

業務拡大につき、以下の内容でマークアップエンジニアを募集します。 ・募集職種 　マークアップエンジニア ・仕事内容 　コーディングを中心としたWeb制作全般 　jQuery / JavaScriptプログラミング 　CMS構築（WordPress, MT等） ・雇用形態 　ア …

category: Technology

date: May 20, 2014

マークアップエンジニア募集

業務拡大につき、以下の内容でマークアップエンジニアを募集します。 ・募集職種 　マークアップエンジニア ・仕事内容 　コーディングを中心としたWeb制作全般 　jQuery / JavaScriptプログラミング 　CMS構築（WordPress, MT等） ・雇用形態 　ア …

category: Technology

date: May 15, 2014

JavaScript講座など、ロクナナワークショップが20%割引に

以前勤めていたロクナナのワークショップで、 クーポンの発行が開始されました。 受講希望の方は、各種講座お申し込みページの「コード入力欄」に 以下のクーポンコードを入力ください。 クーポンコード: d4NN9wSJ 「20%引き」で講座の受講が可能です。 個人でも、企業研修とし …

category: Technology

date: May 12, 2014

PHILIPSの液晶ディスプレイ

mocchiさんのブログで紹介されていたPHILIPSの液晶ディスプレイ。 安くていい感じなので、スタッフが増えた時に検討しようかな。 PHILIPS 23型AH-IPSパネル採用ワイドディスプレイ 5年保証付 234E5QHSB/11

category: Technology

date: May 09, 2014

「WordPressデザイン 仕事のネタ帳」電子書籍版

執筆させていただいた「WordPressデザイン 仕事のネタ帳 見た目と効果を向上させるプロのテクニック」の電子書籍版が、今日マガストアから発売となりました。 Kindle等の他のサイトでも順次発売開始予定です。 http://www.magastore.jp/product …

category: Technology

date: April 23, 2014

hetemlでPHPをinclude virtualで読み込む設定

hetemlでPHPをinclude virtualで読み込むには、 設定が必要です。 .htaccessに、以下のように記述します。 AddHandler cgi-script .php AddType text/html .php SetEnv no-gzip AddHa …

category: Technology

date: April 21, 2014

WordPressでforeachのループが1つの場合のエラー回避

<? $values = post_custom(‘img’); foreach ($values as $value) { echo $value; } ?> 上記のように書くと、WordPressでforeachのループが1つの場合エラ …

category: Technology

date: April 17, 2014

WordPressでパーマリンクの編集ボタンが表示されない場合の対処法

「設定 / パーマリンク設定」でカスタム構造に「/%category%/%post_id%/」と 設定している場合、パーマリンクの編集ボタンが表示されません。 「/%category%/%postname%/」とすることで表示されます。 ver. 3.8.x

category: Technology

date: April 17, 2014

WordPressで関連記事をランダムに表示する方法

WordPressで関連記事をランダムに表示するには、 以下のように書きます。 <?php $currentId = $post->ID; $cat = get_the_category(); $cat = $cat[0]->cat_ID; $rand_po …

category: Technology

date: April 17, 2014

WordPressで記事のカテゴリー名、カテゴリーリンクを表示する方法

WordPressで記事のカテゴリー名、カテゴリーリンクを表示するコードです。 <a href=”/<?php $cat = get_the_category(); $cat = $cat[0]; {echo $cat->category_nic …

category: Technology

date: April 17, 2014

WordPressでサムネイル画像にクラスをつける方法

WordPressでサムネイル画像にクラスをつけるには、 以下のように記述します。 <?php the_post_thumbnail(‘medium’, array(‘class’ => ‘classname& …

category: Technology

date: April 11, 2014

WordPressのPHPファイル内でSSIのように外部ファイルを読み込む方法

<!–#include virtual=”/filename.html” –> SSIでfilename.htmlを読み込む場合、上記のように書きますが、 PHP内ではSSIを使うことができません。 なので、以下のよ …

category: Technology

date: April 05, 2014

WordPressのパーマリンク設定

WordPressのパーマリンクは、 http://domain.com/categoryname/postname/ categoryname: カテゴリー名 postname: 記事タイトル 上記のようにしたい場合、カスタム構造で「/%category%/%postnam …

category: Technology

date: April 02, 2014

WordPressのContact Form7の確認メールが届かないときの対処法

WordPressのContact Form7は宛先を2つ設定できるため、 自分とユーザの方に確認メールを送ることが可能です。 ※「メール (2) を使う」にチェックを入れて設定することで、2つ目の送信先を設定します。 ただ、メール (2) の方にメールが届かない場合があるた …

category: Technology

date: April 01, 2014

WordPressをソーシャルに流すためのフィード設定

WordPressをソーシャルに流すために、以下の設定をします。 1. facebookページに投稿 Facebookページを作成後、 Wordbookerをインストールして設定します。 2. feedの最適化 WordPressのRSSフィードURLには、以下のものがありま …

category: Technology

date: April 01, 2014

WordPressのwp_get_archivesの月表記を英語に変更する方法

WordPressのwp_get_archivesの月表記を英語に変更する方法です。 例：2014年3月　→　March 2014 （WordPress ver. 3.8.1） ・poEditをインストール ・以下のファイルをダウンロード 　/wordpress/wp-con …

category: Technology

date: March 05, 2014

新しいMacBook Pro Retina 15inchの使用感

MacBook Pro Retinaを新しくして3ヶ月ほど経ったので、 使用感をメモしておきます。 Old Macbook Pro Retina： Macbook Pro Retina Display 15.4 CPU: Ivy Bridge Model: MC976J/A …

category: Technology

date: March 05, 2014

WordPressをサーバ移行する手順

WordPressをサーバ移行するには、以下のエントリーが参考になりました。 [wp] wordpressを丸ごと移管/移行させる手順

category: Technology

date: February 06, 2014

MacBook Pro 15inch Retina用のスタンド

MacBook Pro用のスタンドは、デュアルにするため Griffin Elevator Laptop Standを愛用しているんですが、 ふと閉じた状態で使いたくなったので、Twelve SouthのBookArcを購入。 ひとまず使ってみます。 Griffin Elev …

category: Technology

date: January 25, 2014

【週2日・時給1,000円〜】制作アシスタント（アルバイト）募集

以下の内容で制作アシスタント（アルバイト）を募集します。 HTMLコーディングに自信のある方、デザインの経験を積みたい方、 jQuery/JavaScriptを使ったモーションに興味のある方など、 様々なWebサイト制作に携わっていただきます。 ・業務内容 　クライアントの企 …

category: Technology

date: January 16, 2014

プログラマ募集

業務拡大につき、以下の内容でプログラマを募集します。 ・募集職種 　プログラマ ・仕事内容 　PHPによるプログラミング 　ASP.NET（Visual Basic） 　jQuery / JavaScriptプログラミング 　CMS構築（WordPress, MT等） ・雇用 …

category: Technology

date: January 12, 2014

マークアップエンジニア募集

業務拡大につき、以下の内容でマークアップエンジニアを募集します。 ・募集職種 　マークアップエンジニア ・仕事内容 　コーディングを中心としたWeb制作全般 　jQuery / JavaScriptプログラミング 　CMS構築（WordPress, MT等） ・雇用形態 　ア …

category: Technology

date: December 08, 2013

MacBook Pro Retina 15inchが届きました

MacBook Pro Retina 15inchが届きました。 Thunderboltでつないで移行アシスタントでやろうとしたんですが、 いつも通り時間がかかりすぎるので、ターゲットディスクモードで移行。 ref: Macのデータ移行方法 ファイル移行は1時間程度で完了、い …

category: Technology

date: November 28, 2013

Mac Retina上のParallelsでリモートデスクトップの解像度が縮小されてしまう場合の対処法

MacBook Pro Retina上のParallelsで リモートデスクトップの解像度が1/2に縮小されてしまって困っていたんですが、 解決しました。 構成 / ビデオ / 解決策：サイズ調整される を選択 Parallels Desktop: version 9.0 W …

category: Technology

date: November 14, 2013

iWork ’09から最新のKeynote, Numbers, Pagesに無料でアップデートする方法

OSをMavericks（10.9）にアップデートしてから、 Install DVDからインストールして使っていたiWorkが起動しなくなったり 落ちてしまう現象が続いていました。 調べたところ、以下の手順で最新のKeynote, Numbers, Pagesに 無料でアップ …

category: Technology

date: November 04, 2013

iPadで白の透過pngがグレーになってしまう場合の対処法

iPadでは、なぜか白の透過pngをリピートするとグレーになってしまいます。 そのため、rgbaで以下のように指定します（白の80%）。 background:rgba(255,255,255,0.8); filter: progid:DXImageTransform.Mic …

category: Technology

date: October 20, 2013

WordPressのカスタムフィールドの値を配列で取得する方法

WordPressのカスタムフィールドの値を配列で取得するには、以下のようにします。 $picUrl = get_post_meta($post->ID, ‘pic’, false); 「false」の部分を「true」にすると、一つ目の値しか取得でき …

category: Technology

date: September 16, 2013

IE7,8で背景を透過させる方法

IE7,8で背景に透過pngを使っていて、その上にさらに透過pngの画像を置く場合、 背景の方の表示がおかしくなる（黒で汚く塗りつぶされたようになる）場合があります。 その場合は、CSSで以下のように指定します。 background:rgba(255,255,255,0.3 …

category: Technology

date: September 16, 2013

MacBook Pro用の冷却パッド

MacBook Pro 15inch Retinaが熱でかなり重くなってしまうので、 冷却パッドを購入。 評価が高い商品なので、届くのが楽しみです。 SANWA SUPPLY TK-CLN7USV ノート用クーラーパッド シルバー TK-CLN7USV

category: Technology

date: August 26, 2013

WordPressのquery_postsの書き方と止める方法

WordPressでループに条件を指定する場合、 query_postsを使って以下のように書きます。 この場合は「showposts=5」で記事を5件表示しています。 <?php if (have_posts()) : query_posts(‘showp …

category: Technology

date: August 26, 2013

WordPressで曜日を英語表記にする方法

WordPressで日付を表示する場合はthe_dateやthe_timeを使いますが、 曜日の表記が日本語になってしまいます。 曜日を英語表記にしたい場合は、以下のようにします。 <?php echo get_post_time(‘Y.m.d D&#821 …

category: Technology

date: July 17, 2013

jquery.backstretchを使ったスライドショーで、画像をランダムに切り替える方法

jquery.backstretchを使ったスライドショーで、 画像をランダムに切り替えるには以下のようにします。 【変更前】 $(function() { $.backstretch([ “/img/bg01.jpg”, “/img/bg …

category: Technology

date: July 09, 2013

WebARENA SuiteXでWordPress 3.2以降を使う時の設定

WebARENA SuiteXでWordPress 3.2以降を使う時は、 .htaccessに以下の記述が必要です。 AddHandler application/x-httpd-php53 .php ref. WordPress3.2.xバージョンアップ

category: Technology

date: June 28, 2013

外からTimeCapsuleに接続する方法

外からTimeCapsuleに接続するには、以下のようにします。 AirMacユーティリティー / TimeCapsuleの編集をクリック 「どこでも My Mac:」の「+」をクリックして、Apple ID・パスワードを入力 「アップデート」をクリック システム環境設定 / …

category: Technology

date: June 24, 2013

jQueryで特定のクラスを除外するコード

jQueryで特定のクラスを除外したい場合、以下のように書きます。 $(‘.fade:not(.current)’) currentクラスが除外されます。

category: Technology

date: June 23, 2013

WordPressでwidth:624pxにリサイズされる画像を削除する方法

WordPress（ver. 3.5.2）で画像をアップロードすると、 以下の5ファイル（5サイズ）が生成されます。 ・オリジナルサイズ ・width:624px ・大サイズ（「設定 / メディア」で設定されている値） ・中サイズ（「設定 / メディア」で設定されている値） …

category: Technology

date: June 18, 2013

WordPressでカスタムフィールドの値のみを出力するコード

WordPressでカスタムフィールドを表示したい場合以下ですが、 見出しが入ってしまうのと、if文の後にechoしたい場合などに応用がききません。 <?php the_meta(); ?> そのため、カスタムフィールドの値のみを出力するには、 以下のように記述し …

category: Technology

date: June 18, 2013

WordPress 3.5.1でカスタムフィールドを表示（有効化）する方法

WordPress 3.5.1でカスタムフィールドを表示（有効化）するには、 管理画面の右上「表示オプション」をクリックし、 「カスタムフィールド」にチェックを入れます。

category: Technology

date: May 24, 2013

Color Swatches – カラースウォッチのような見せ方のできるjQueryプラグイン

Color Swatchesは、カラースウォッチのような見せ方のできるjQueryプラグインです。 Color Swatches

category: Technology

date: May 23, 2013

MacのSpotlightを呼び出すキーボードショートカット

Spotlightを呼び出すショートカット： control + space Finder上でSpotlightを呼び出すショートカット： control + option + space

category: Technology

date: April 22, 2013

lightbox2.5.1で閉じるボタンの位置（高さ）を変える方法

lightboxする画像の高さが違う場合に、lightbox2.5.1で閉じるボタンの位置（高さ）を変更するには、以下のようにします。 lightbox.js 【変更前】 Lightbox.prototype.showImage = function() { var $lig …

category: Technology

date: March 06, 2013

Google Chromeでfont-size指定が効かないときの対処法

Google Chromeでfont-size指定が効かないときは、CSSに以下のように記述します。 #test { -webkit-text-size-adjust:none; } 追記（2014.04.09） バージョン 27.0.1453.93 mより -webkit- …

category: Technology

date: March 01, 2013

ドラッグ&ドロップでファイルのアップロードを可能にするJavaScriptライブラリ

dropzone.jsは、ドラッグ&ドロップでファイルのアップロードを可能にするJavaScriptライブラリです。 dropzone.js

category: Technology

date: March 01, 2013

jQueryとCSS3を使った円形の画像がフリップするスライドショー

Flipping Circle Slideshowは、jQueryとCSS3を使った円形の画像がフリップするスライドショーです。 Circular Slideshow Plugin with jQuery and CSS3

category: Technology

date: February 18, 2013

jQueryのコールバック関数の書き方

処理が終わった後に実行するコールバック関数は、以下のように記述します。 $(this).fadeTo(600, 1,function() { hideBg(); }); function hideBg() { //上記処理が終わった後の処理を記述 } この場合は、thisが6 …

category: Technology

date: February 18, 2013

jQueryで読み込み時とリサイズ時の処理を合わせて書く方法

jQueryで読み込み時とリサイズ時の処理を合わせて書くには、以下のようにします。 $(window).bind(“load resize”, function(){ // code here }); ※はてぶでコメントを頂いたので追記（2013.2. …

category: Technology

date: February 06, 2013

IE8以下でメディアクエリーを有効にするためのJavaScript

レスポンシブWebデザインで使用するメディアクエリーはIE8以下では使用できないため、以下いずれかのjsを使って対応させます。 Respond.js css-mediaqueries.js 実装上の注意点、うまく動作しない場合は以下URLを参照。 IE8以下でレスポンシブWe …

category: Technology

date: January 14, 2013

booklet – 本をめくるような効果を与えるjQueryプラグイン

bookletは、本をめくるような効果を与えるjQueryプラグインです。 booklet

category: Technology

date: January 14, 2013

Photobox – CSS3で作られたモーションの美しいギャラリー

Photoboxは、CSS3で作られたモーションの美しいギャラリーです。 Photobox – CSS3 JQuery Image Gallery photobox | github

category: Technology

date: January 12, 2013

Mac（10.8）のショートカット2つ

時々間違えて押してしまうことがあるのでメモ。 command + option + d Dockを隠す command + option + s Finderのサイドバーを隠す

category: Technology

date: December 26, 2012

videoタグをiPadやAndroidで動作させる方法

videoタグはやっかいで、iPadやAndroidで再生されなかったりしますが、まずはMiro Video Converterを使って、iPadやAndroid用に書き出します。 Miro Video Converter 次に、Androidの中でもGalaxy Sで動画の …

category: Technology

date: December 24, 2012

IE8にも対応させるaudioタグ

Flashを使わないで、HTML5のaudioタグを使った音声再生をIE8以上に対応させる方法です。 上記のデザインの場合、audioタグのデフォルトのプレーヤーは使わないので、IE以外ではjsのAudioクラスを使って、audioタグを生成します。 IEでは、html5me …

category: Technology

date: December 21, 2012

HTML5のvideoタグをモダンブラウザで有効にする方法

HTML5のvideoタグは、以下のように記述します。 <video id="movie01" width=”300″ height=”400″ autoplay loop> <source …

category: Technology

date: December 19, 2012

jqueryrotate – 画像を回転させられるjQueryプラグイン

jqueryrotateは、画像を回転させられるjQueryプラグインです。 ループでずっと回すことができたり、hover時に360度回転させることも可能なようです。 jqueryrotate

category: Technology

date: December 14, 2012

背景画像をフルスクリーンで表示するjQueryプラグインの使用感

背景画像をフルスクリーンで表示するためにbgStretcherを使って進めていたんですが、デフォルトではIE8でコンテンツの高さがウィンドウサイズを超えた時に、スクロールできない状態になります。 【追記 2012.12.14 12:39】勘違いで、JSをいろいろといじったため …

category: Technology

date: December 12, 2012

デフォルトのプレーヤーを使わないでスマートフォン用にmp3再生機能をつける方法

デフォルトのプレーヤーを使わないで、スマートフォン用にmp3再生機能をつける方法です。 HTML <img id="btn_player" src="img/btn_player.gif" alt="" wid …

category: Technology

date: December 03, 2012

Macでファイル保存時に「削除」「保存しない」を選択するショートカット

Macでファイル保存時に「削除」「保存しない」を選択するショートカットをやっと見つけました。 10.7〜（Lion、Mountain Lion） command + delete 10.6（Snow Leopard） command + d

category: Technology

date: November 28, 2012

UNHEAP – クールなjQueryプラグインのまとめサイト

UNHEAPは、クールなjQueryプラグインのまとめサイトです。 いい感じのものが揃っています。 UNHEAP

category: Technology

date: November 27, 2012

Unclutter – Macのダッシュボードのような小さいメモアプリ

以前プレゼントしてもらったDaisyDiskの開発者の方からご連絡いただいて、今度はUnclutterというアプリを贈っていただきました。 Macのダッシュボードのような小さいメモアプリです。 使い心地がなかなかいい感じです。 Unclutter

category: Technology

date: November 26, 2012

WordPressで、画像投稿時に画像リンクURLの初期値をなしにする方法

WordPressで、画像投稿時に画像リンクURLの初期値をなしにするには、以下のようにします。 【管理画面のURL】/options.phpにアクセス（隠しオプション画面に遷移します） 例：http://yourdomain.com/wp/wp-admin/options. …

category: Technology

date: October 31, 2012

jQuery Responsive Tile Gallery – レスポンシブレイアウトに対応した画像ギャラリー

jQuery Responsive Tile Galleryは、レスポンシブレイアウトに対応した画像ギャラリーです。 ブラウザサイズを変更すると、すっとアニメーションしながらレイアウトが変更されます。 jQuery Responsive Tile Gallery

category: Technology

date: October 18, 2012

Grid-A-Licious – レスポンシブに対応した、グリッドを敷き詰めるjQueryプラグイン

Grid-A-Liciousは、レスポンシブに対応したグリッドを敷き詰めるjQueryプラグインです。 PC、iPadの縦横、スマートフォンの縦横それぞれのリンクがついており、レスポンシブレイアウトを試すことができます。 Grid-A-Licious

category: Technology

date: October 10, 2012

ACCAROUOSEL – 拡大する動きが面白いカルーセルタイプのスライドショー

ACCAROUOSELは、拡大する動きが面白いカルーセルタイプのスライドショーです。 ページングによるスライドと、画像クリックでセンターからぐいっと伸びる動きになっています。 ACCAROUOSEL

category: Technology

date: October 09, 2012

CUSTOM DROP-DOWN LIST STYLING – ドロップダウンメニューをカスタマイズするコード

CUSTOM DROP-DOWN LIST STYLINGという記事で、ドロップダウンメニューをカスタマイズするコードが紹介されています。 シンプルなフェードのアニメーションがあっていい感じです。 CUSTOM DROP-DOWN LIST STYLING

category: Technology

date: October 04, 2012

Wordの赤い波線を非表示にする方法

Wordは文書校正やスペルチェック機能が自動で働くため、スペルミスなどをしている場合、赤い波線が表示されます。 ただスペルミスしていないのに波線が表示されてかなりうっとうしいので、、今まで調べる気も起きなかったんですが調べたところ、解決策がありました。 「環境設定 / 文章校 …

category: Technology

date: October 04, 2012

iPhoto 11から写真が消えてしまった場合の対処法

iPhoto 11のライブラリから写真の表示が消えてしまって困ったんですが、復旧したのでメモ。 「ピクチャ / iPhoto Library.photolibrary」を右クリックし、「パッケージの内容を表示」を選択。Mastersフォルダにファイルがあるかどうかを確認。 あ …

category: Technology

date: September 26, 2012

HorizontalNav – 水平メニューの各幅を全体の幅にフィットしてくれるjQueryプラグイン

HorizontalNavは、水平メニューの各幅を全体の幅にフィットしてくれるjQueryプラグインです。 シンプルなHTML/CSSで実装できるようです。 HorizontalNav

category: Technology

date: September 26, 2012

BookBlock – 絵本をめくるような効果を与えられるjQueryプラグイン

BookBlockは、絵本をめくるような効果を与えられるjQueryプラグインです。 とてもかわいい動きをします。 BookBlock

category: Technology

date: September 25, 2012

jQueryでカレントページのメニュー画像に”_current”を付加して、親要素のアンカーを削除する方法

<div id="menu"> <ul> <li id="menu01"><a href="/page01/"><img src="/img/menu0 …

category: Technology

date: September 14, 2012

SWIPEVIEW – スマートフォンでスワイプできるギャラリーを実装できるJavaScript

SWIPEVIEWは、スマートフォンでスワイプできるギャラリーを実装できるJavaScriptです。 jQueryに依存していないようです。 SWIPEVIEW

category: Technology

date: September 14, 2012

jQuery Timelinr Plugin – タイムライン上にスライドショーを表示するjQueryプラグイン

jQuery Timelinr Pluginは、タイムライン上にスライドショーを表示するjQueryプラグインです。 時系列で見せたい場合によさそうです。 jQuery Timelinr Plugin

category: Technology

date: September 14, 2012

Fresco – レスポンシブに対応したlightbox

Frescoは、レスポンシブに対応したlightboxです。 いい感じの動きをします。 Fresco

category: Technology

date: September 07, 2012

MainStage 2をゲット

必要になったので、MainStage 2をゲット。めちゃくちゃいい感じ。 ギターとマイクからONYX BLACK JACKにいって、Macで音を作ってBLACK JACKに返してミキサーにつないでスピーカーから音を出す、というのをやりたくて、ギターとマイクなので2トラック同時 …

category: Technology

date: August 29, 2012

Macで欧文書体の引用府（ダブルクオート）を打つ方法

Macで欧文書体の引用府（ダブルクオート）を打つには、以下のようにします。 ・左ダブルクオート 　option + @: “ ・右ダブルクオート 　shift + option + @: ”

category: Technology

date: August 28, 2012

レスポンシブに対応したスライダープラグイン30

Top 30 Responsive jQuery Slider Plugins for Websitesという記事で、jQueryを使ったスライダープラグインがまとまっています。 Camera Slider 加減速やトランジションの気持ちいいスライダー carouFredSe …

category: Technology

date: August 28, 2012

simpleWeather – 天気を表示するためのjQueryプラグイン

simpleWeatherは、天気を表示するためのjQueryプラグインです。 Yahoo! WeatherのAPIが使われています。 simpleWeather

category: Technology

date: August 28, 2012

無限スクロールを実現するためのjQuery・HTMLソース

5 jQuery Infinite Scrolling Demosという記事で、無限スクロールを実現するためのjQuery・HTMLソースが紹介されています。 jQuery Masonry pluginとInfinite Scroll pluginの合わせ技など、興味深いテク …

category: Technology

date: August 28, 2012

Redactor – 美しいWYSIWYGエディタ

Redactorは、美しいWYSIWYGエディタです。 以下のようなファイルのドラッグ&ドロップにも対応しているようです。 Redactor

category: Technology

date: August 28, 2012

BIGVIDEO.JS – フルスクリーンの背景に動画を埋め込むためのjQueryプラグイン

BIGVIDEO.JSは、フルスクリーンの背景に動画を埋め込むためのjQueryプラグインです。 豪快。 BIGVIDEO.JS

category: Technology

date: August 25, 2012

Transmitの同期機能

TransmitのRetina対応アップデートがあったのをきっかけに、同期機能を初めて使ってみました。 これは便利！！ 2カラム表示にして、左にローカル、右にリモートの対象ディレクトリを表示し、「同期」ボタンを押すと上記のようになります 完了画面。レポートをテキストファイルで …

category: Technology

date: August 24, 2012

FTPクライアント Transmitが4.2でRetinaに対応

さっきアップデートの知らせがきて、Transmitが4.2でRetinaに対応してくれました。 今までローディング画像などが無理矢理拡大されて残念な感じだったので、よかったです。 4.2での変更内容は以下。Mountain Lionの通知センターにも対応しています。 ・Ret …

category: Technology

date: August 18, 2012

jQueryでカレントページの要素にclass=”current”を付加する方法

さくっと実装できたのでメモ。 <ul class="menu"> <li id="menu01"><a href="/page01/">page01</a></l …

category: Technology

date: August 16, 2012

jQuery Slider plugin – iOSやAndroidで使えるスライダー

jQuery Slider pluginは、iOSやAndroidで使えるスライダーです。 GitHubで配布されており、MITライセンスとなっています。 jQuery Slider plugin

category: Technology

date: August 16, 2012

垂直・水平方向にスクロールしてページを切り替える演出を可能にするjQueryプラグイン

SMOOTH VERTICAL OR HORIZONTAL PAGE SCROLLING WITH JQUERYという記事で、垂直・水平方向にスクロールしてページを切り替える演出を可能にするjQueryプラグインが紹介されています。 デモは以下から。 DEMO SMOOTH …

category: Technology

date: August 16, 2012

jQuery coreUISelect – セレクトボックスをカスタマイズできるjQueryプラグイン

jQuery coreUISelectは、セレクトボックスをカスタマイズできるjQueryプラグインです。 選択肢をグルーピングできたり、jScrollPaneを使ってスクロールバーのデザインを変更したりできるようです。 jQuery coreUISelect

category: Technology

date: August 15, 2012

groupToggle – チェックボックスのすべてをチェックを実装するためのjQueryプラグイン

groupToggleは、チェックボックスのすべてをチェックを実装するためのjQueryプラグインです。 githubで配布されており、ダウンロード後にサンプルデモが見られます。 groupToggle

category: Technology

date: August 15, 2012

Agile Carousel – 様々なスライドショーやカルーセルを実装できるjQueryプラグイン

Agile Carouselは、様々なスライドショーやカルーセルを実装できるjQueryプラグインです。 デモやオプションが充実していて、使いやすい感じになっています。 Agile Carousel

category: Technology

date: August 15, 2012

Easy Image Zoom jQuery Plugin – 画像hover時に拡大表示してくれるjQueryプラグイン

Easy Image Zoom jQuery Pluginは、画像hover時に拡大表示してくれるjQueryプラグインです。 動きがいい感じ。 Easy Image Zoom jQuery Plugin

category: Technology

date: August 10, 2012

Adaptor – 3Dライクなスライダーを実現するjQueryプラグイン

Adaptorは、3Dライクなスライダーを実現するjQueryプラグインです。 ボックスがくるっと回転するような動きなど、動きが滑らかでいい感じです。 Adaptor

category: Technology

date: August 10, 2012

BlocksIt.js – Pinterestのようなレイアウトを実現するjQueryプラグイン

BlocksIt.jsは、Pinterestのようなレイアウトを実現するjQueryプラグインです。 ランダムにボックスの一が変わるものと、ブラウザのリサイズでアニメーションしながら配置が変わるタイプのデモがあります。 BlocksIt.js

category: Technology

date: August 08, 2012

WooSlider – 簡単にスライドショーが作れるWordPressプラグイン

WooSliderは、簡単にスライドショーが作れるWordPressプラグインです。 画像やコンテンツをスライド表示できるようです。現在は$35となっています。 WooSlider

category: Technology

date: August 08, 2012

MiniJs – CoffeeScriptで書かれたjQueryプラグインまとめサイト

MiniJsは、CoffeeScriptで書かれたjQueryプラグインまとめサイトです。 スライダーや通知バーなど、さくっと使えそうなUIが紹介されています。 MiniJs

category: Technology

date: August 08, 2012

Portfolio Flipping Slider Using jQuery & CSS3 – ポートフォリオをくるくる回転させながら見せられるスクリプト

Portfolio Flipping Slider Using jQuery & CSS3は、ポートフォリオをくるくる回転させながら見せられるスクリプトです。 CSS3のtransformが使われています。 Portfolio Flipping Slider Usi …

category: Technology

date: August 06, 2012

TotalFinderがMountail Lion(Mac OS X 10.8)に対応

TotalFinderがMountail Lion(Mac OS X 10.8)に対応しましたね。 今まで無理矢理起動していたので、よかった..。 TotalFinder

category: Technology

date: August 01, 2012

leanModal – シンプルなモーダルウィンドウを実装するjQueryプラグイン

leanModalは、シンプルなモーダルウィンドウを実装するjQueryプラグインです。 ソースもとてもシンプル。 leanModal

category: Technology

date: August 01, 2012

PowerTip – シンプルでクールなツールチップを実装するjQueryプラグイン

PowerTipは、シンプルでクールなツールチップを実装するjQueryプラグインです。 上下左右斜めの方向の配置や、マウスに追随するツールチップの実装が可能です。 PowerTip

category: Technology

date: August 01, 2012

gridster.js – ドラッグ&ドロップで要素を並べ替えられるjQueryプラグイン

gridster.jsは、ドラッグ&ドロップで要素を並べ替えられるjQueryプラグインです。 なかなか気持ちのいい動き。 gridster.js

category: Technology

date: August 01, 2012

Fallr – いろいろなモーダルボックスが実装できるjQueryプラグイン

Fallrは、いろいろなモーダルボックスが実装できるjQueryプラグインです。 気持ちのいいモーションがあるものや、iframeを表示したりできます。 FALLR

category: Technology

date: July 27, 2012

OS X Mountain Lion Up-to-Dateコンテンツコードのメールきた！

気長に待っていたら、OS X Mountain Lion Up-to-Dateコンテンツコードのメールが届きました。 たぶん申請を送ってから30時間くらい経っていますが、ちゃんときてくれてうれしい。 土日もあってタイミングがいいので、週末アップグレードしようと思います。 無事 …

category: Technology

date: July 27, 2012

3D Flipping Circle with CSS3 & jQuery – クリックすると紙をめくるような効果をつけられるCSS3+jQuery

3D Flipping Circle with CSS3 & jQueryは、クリックすると紙をめくるような効果をつけられるCSS3+jQueryです。 おもろい。 3D Flipping Circle with CSS3 & jQuery

category: Technology

date: July 20, 2012

JQISOTEXT – テキストにワープのような効果をつけられるjQueryプラグイン

JQISOTEXTは、テキストにワープのような効果をつけられるjQueryプラグインです。 おもろい。 JQISOTEXT

category: Technology

date: July 20, 2012

jQuery custom content scroller – スクロールバーのデザインを変更できるjQueryプラグイン

jQuery custom content scrollerは、スクロールバーのデザインを変更できるjQueryプラグインです。 リキッドデザインに対応したもの、複数のスクロールバーを配置したもの、水平に動くスクロールバーのサンプルがあります。 jQuery custom c …

category: Technology

date: July 20, 2012

jQueryの便利な書き方いろいろ

ちょっとメモ。「A Large Collection of Useful jQuery Utils」という記事で、jQueryの便利な書き方がいろいろとまとまっています。 A Large Collection of Useful jQuery Utils

category: Technology

date: July 19, 2012

jQuery Transit – スムーズなCSSアニメーションを実装できるjQueryプラグイン

jQuery Transitは、スムーズなCSSアニメーションを実装できるjQueryプラグインです。 デモがたくさんあります。 jQuery Transit

category: Technology

date: July 14, 2012

TotalFinderライセンスプレゼントの続き

先日ご連絡した、TotalFinderライセンスプレゼントへのたくさんのご応募ありがとうございます！ 1名様にプレゼントの予定だったんですが、妻が使いこなせないと思うからいらないと言うので、2名様にプレゼントさせて頂くことにしました。 期限は引き続き7月20日 24:00まで …

category: Technology

date: July 09, 2012

iPhotoでオリジナルファイルを削除する方法

iPhotoでは、ファイルをdeleteキー等で削除しても、オリジナルファイルはFinder上に残っています。 オリジナルファイルも削除する場合は、以下のように「ゴミ箱」を右クリックしてゴミ箱を空にします。 知らんかった..。わざわざFinderにオリジナルファイルを表示して …

category: Technology

date: July 07, 2012

App Storeで購入したアプリをアンインストールする方法

App Storeで購入したアプリをアンインストールするには、LaunchPadを起動して、アイコンを長押しします。アイコンが揺れ始めるので（iPhoneやiPadと同じですね）、xボタンを押してアンインストール。 App Store以外でインストールしたアプリは、AppCl …

category: Technology

date: July 06, 2012

Macでショートカットをカスタマイズ

Macでアプリケーションのキーボードショートカットをカスタマイズするには、「システム環境設定 / キーボード / キーボードショートカット / アプリケーション」を選択。 +ボタンを押して、アプリケーションを選択して追加します。 タブ移動のショートカットがアプリによって違って …

category: Technology

date: July 06, 2012

Dreamweaver(CS6)でタブ移動するショートカット

Dreamweaver(CS6, Mac)でタブ移動するショートカットをメモ。知らんかったよ..。 ・右に移動 　command + @ ・左に移動 　command + ` メニューの「Dreamweaver / キーボードショートカット」でカスタマイズが可能です。

category: Technology

date: July 06, 2012

Coda2でタブ移動するショートカット

TotalFinderを使ってからテキストエディタもタブ化したくなったので、今までテキストエディットを使っていた簡単なテキストでもCoda2を使ってみています。 シンプルなテキストエディタとしていいのが、テキストエディットと違って行数が表示できること。あとはタブ移動できるショ …

category: Technology

date: July 05, 2012

TotalFinderライセンスプレゼント

TotalFinderがいい感じなので、ライセンスを購入。 1アカウントと3アカウントで値段がそれほど変わらなかったので、1つ妻にプレゼントする予定で、1つ余るので読者の方にプレゼントさせていただきます。 期限は2週間程度で、7月20日 24:00まで。 ご応募お待ちしていま …

category: Technology

date: July 05, 2012

MacのFinderをタブ化してくれる「TotalFinder」

ふと思い立って、一度入れたけど使わなくなっていたTotal Finderをもう一度使ってみました。 使ってみた感じ、とてもいい！ ・「command + t」でタブ追加 　Finderが散らからないのでいい感じ ・「control + tab」で次のタブへ移動、「shift …

category: Technology

date: June 26, 2012

MacBook Pro Retinaの所感

MacBook Pro Retinaを数日使ってみた所感をメモ。 ・パフォーマンス 　とても満足しています。メモリ16GBはやはり半端なく、かなりさくさくと作業が進みます。 ・Retinaディスプレイ 　解像度1,900程度まで縮小して表示することができ、作業領域をとても広く …

category: Technology

date: June 22, 2012

Cinema Display用にMagSafe 2 Converterを購入

Cinema Display用にMagSafe 2 Converterを購入。ってなんでこんなことせなあかんねん。

category: Technology

date: June 21, 2012

MacBook Pro Retinaが届きました

今日の朝、MacBook Pro Retinaが届きました！うれしすぎる。 早速Thunderboltで必要なファイルを移行し、CS6を入れて仕事再開。とても快適。 速いです。Cinema DisplayじゃなくずっとMBPを見ていたい感じ。 Apple MacBook Pr …

category: Technology

date: June 12, 2012

MacBook Pro Retinaを購入

Retina出ましたね。MBPの薄いのがずっとほしかったので、以下の構成で即購入。 ・2.7GHzクアッドコアIntel Core i7（Turbo Boost使用時最大3.7GHz） ・16GB 1,600MHz DDR3L SDRAM ・512GBのフラッシュストレージ …

category: Technology

date: May 19, 2012

Presenteer.js – 効果的なプレゼンをするためのjQueryプラグイン

Presenteer.jsは、効果的なプレゼンをするためのjQueryプラグインです。 とてもクール。 Presenteer.js is a jQuery plugin that enables an effective presentation. So cool.

category: Technology

date: May 14, 2012

Memory Scopeを購入

アシスタントがメモリ解放アプリを使っていたので、探して評価が高いのを購入。 いい感じ。 My assistant had used an application making memory free, so I looked for one having good revie …

category: Technology

date: May 03, 2012

PopBox – シンプルな吹き出しを実装するjQueryプラグイン

PopBoxは、シンプルな吹き出しを実装するjQueryプラグインです。 37SignalsのHighriseにインスパイアされて作ったようです。 PopBox

category: Technology

date: May 03, 2012

Fluid CSS3 Slideshow with Parallax Effect – CSSだけで作られた背景にパララックス効果のあるスライドショー

Fluid CSS3 Slideshow with Parallax Effectは、CSSだけで作られた背景にパララックス効果のあるスライドショーです。 FLUID CSS3 SLIDESHOW WITH PARALLAX EFFECT

category: Technology

date: May 03, 2012

ImageOptim – PNG, JPEG, アニメーションGIFの容量を減らしてくれるMac用アプリ

ImageOptimは、PNG, JPEG, アニメーションGIFの容量を減らしてくれるMac用アプリです。 使ってみたところ、PNGで6〜7%程度ほど容量を減らすことができ、クオリティーの違いはほぼありません。 ImageOptim

category: Technology

date: May 03, 2012

Macのテキストエディットで使えるショートカット

ちょっとメモ。Macのテキストエディットで使えるショートカットです。 control + A：現在の行／段落の先頭に移動 control + B：1文字戻る control + D：カーソルの右側の文字を削除 control + E：現在の行／段落の末尾に移動 control …

category: Technology

date: April 21, 2012

Silly list scroll effects – リストのスクロール時にアニメーションがつけられるJavaScript

これはすごい。Silly list scroll effectsは、リストのスクロール時にアニメーションがつけられるJavaScriptです。 This is great. Silly list scroll effects is a JavaScript that can …

category: Technology

date: April 20, 2012

lake.js – 波打つ様子を表現できるjQueryプラグイン

lake.jsは、波打つ様子を表現できるjQueryプラグインです。 ちょっと不自然ですが、面白い感じです。 lake.js is a jQuery plugin that displays what is waving. A little unnatural, but in …

category: Technology

date: April 20, 2012

Screenqueries – iPhoneやiPadでの表示を確認できるサイト

Screenqueriesは、iPhoneやiPadでの表示を確認できるサイトです。 スクロールしたときに周りがグレーアウトするのがいい感じ。 Screenqueries lets us confirm the layout of web sites viewed on iP …

category: Technology

date: April 18, 2012

Animated Content Tabs with CSS3 – CSS3で作られたアニメーションするタブコンテンツ

Animated Content Tabs with CSS3は、CSS3で作られたアニメーションするタブコンテンツです。 デモは以下から。 Animated Content Tabs with CSS3 is a tab content that animates with …

category: Technology

date: April 14, 2012

retina.js – Retina用に高解像度の画像を表示するJavaScript

retina.jsは、Retina用に高解像度の画像を表示するJavaScriptです。 When your users load a page, retina.js checks each image on the page to see if there is a hig …

category: Technology

date: April 14, 2012

Fixing These jQuery! – jQueryについて学べるスライド

Fixing These jQuery!は、jQueryについて学べるスライドです。 ざーっと眺めるのにいい感じです。 Fixing These jQuery! is a slide you can study in about jQuery. I’m sure …

category: Technology

date: April 14, 2012

Timeline Portfolio – タイムライン上に並んだポートフォリオ

以前書いた記事で紹介したjQueryプラグインが使われた、タイムライン上に並んだポートフォリオです。 いい感じ。 This is a portfolio displayed on a timeline using a jQuery plugin I introduced in …

category: Technology

date: April 13, 2012

Responsive CSS3 Slider Without Javascript – Javascriptを使わないレスポンシブデザインに対応したスライドショー

Responsive CSS3 Slider Without Javascriptは、Javascriptを使わないレスポンシブデザインに対応したスライドショーです。 上部の3つのアイコンをクリックすることで、端末ごとの見え方を確認することができます。 Responsive …

category: Technology

date: April 13, 2012

CSS ARROW PLEASE! – CSSで吹き出しを作るジェネレータ

CSS ARROW PLEASE!は、CSSで吹き出しを作るジェネレータです。 結構いい感じ。 CSS ARROW PLEASE! is a generator that makes a balloon with CSS. it looks good. CSS ARROW P …

category: Technology

date: April 11, 2012

CSS3の参考になる記事

CyberAgentの1pixelブログに、CSS3の参考になる記事があったのでご紹介。 imgにzoom:0.5;を指定していたり、横幅を超える長さの文字列を「…」で表示するためにtext-overflow:ellipsis;を指定していたりと、参考になります。 I int …

category: Technology

date: April 10, 2012

HTML5 Presentation – HTML5/CSS3の機能をインタラクティブに一覧できるサイト

HTML5 Presentationは、HTML5/CSS3の機能をインタラクティブに一覧できるサイトです。 左右の矢印でページを移動でき、HTML5/CSS3の機能を触りながら体験することができます。 HTML5 Presentation

category: Technology

date: April 10, 2012

Shuffle – ソート時にアニメーションがつけられるjQueryプラグイン

Shuffleは、ソート時にアニメーションがつけられるjQueryプラグインです。 以下のブラウザに対応しているようです。 ・Chrome ・Firefox ・IE 7+ ・Opera ・Safari Shuffle

category: Technology

date: April 06, 2012

MacBook AirのSSDはメーカーによって速度が違う

MBAが届きました！絶賛データ移行中。 今まで使っていたのと同じスペックのものを購入したんですが、MacBook AirのSSDはメーカーによって速度が違うらしく、新しい方が遅かったら嫌なので早速調べてみました。 「アップルメニュー / このMacについて / 詳しい情報… …

category: Technology

date: April 04, 2012

iPad用お絵描きアプリ「Paper」がおもしろい

先日書いたPaperを使ってみたんですが、面白い！！ 無料でとりあえず使えるんですが、その状態で使えるのはこのDrawのみ。色が選べて消しゴムで消すことができます スケッチ。素晴らしい アウトライン。ボールドでクリアなラインが描けます ライト。サインペンで書くような感じ カラ …

category: Technology

date: April 04, 2012

jq.ui.checks – フォームをスタイリングしてコントローラをつけられるjQueryプラグイン

jq.ui.checksは、フォームをスタイリングしてコントローラをつけられるjQueryプラグインです。 チェックボックスとラジオボタンに適用でき、以下のブラウザに対応しているようです。 ・IE6+ ・and modern browsers ・Mobile Safari 5 …

category: Technology

date: April 03, 2012

HTML5 BOOKMARKS – HTML5関連の情報が手に入るサイト

HTML5 BOOKMARKSは、HTML5関連の情報が手に入るサイトです。 ジェネレータやjQuery、CSSS3など、いい感じのものがまとまっています。 HTML5 BOOKMARKS

category: Technology

date: April 02, 2012

Paperfold CSS – 紙を折るようにコンテンツを見せられるCSS

Paperfold CSSは、紙を折るようにコンテンツを見せられるCSSです。 これはすごい。 Paperfold CSS

category: Technology

date: April 01, 2012

Svbtle – 管理画面もシンプルなデザインにしてくれるWordPressテーマ

Svbtleは、管理画面もシンプルなデザインにしてくれるWordPressテーマです。 上記のスクリーンショットがダッシュボード。a new blogging experience!とのことで、かなり情報が削ぎ落されています。 Svbtle

category: Technology

date: March 31, 2012

MacBook Airを購入

去年の7月に買って快適に使っているんですが、SSDの容量がほぼいっぱいになったあたりからファイルは削除したんですが起動しようとしても起動しなくなり、何度も再起動しないと起動しなくなってしまって仕事に支障が出るので、新しくすることに。 夏くらいまで待って新しいMBAをゲットしよ …

category: Technology

date: March 30, 2012

Paper – お絵描き用iPadアプリ

Paperは、お絵描き用iPadアプリです。よさそうな感じ。 無料ですね。あとで使ってみます。 Paper Paper by FiftyThree(iTunes)

category: Technology

date: March 28, 2012

タッチイベントやスクロールイベント等を取得するJavaScript集

githubで、タッチイベントやスクロールイベント等を取得するJavaScriptがたくさんまとまっています。 いい感じ。 https://github.com/bebraw/jswiki/wiki/Touch

category: Technology

date: March 28, 2012

Timeline – タイムラインをベースにスライドショーを見せられるjQueryプラグイン

Timelineは、タイムラインをベースにスライドショーを見せられるjQueryプラグインです。 なんかすごい。 Timeline

category: Technology

date: March 28, 2012

Rainbow – ソースコードをシンタックスハイライトしてくれるJavaScript

Rainbowは、ソースコードをシンタックスハイライトしてくれるJavaScriptです。 cssで色を変えられるようです。 Rainbow

category: Technology

date: March 25, 2012

レスポンシブデザインのテストツールx4

Device-Agnostic Approach To Responsive Web Designという記事で、レスポンシブデザインのテストツールが4つ紹介されています。 Responsive Design Testing URLを入れると4つの画面でプレビューできるツール …

category: Technology

date: March 25, 2012

CSS3を使ったスライドショー

How to Create a Stylish Image Content Slider in Pure CSS3という記事で、CSS3を使ったスライドショーの作り方が紹介されています。 DEMO How to Create a Stylish Image Content S …

category: Technology

date: March 25, 2012

INCEPTION – パララックス効果を実装したサイト

INCEPTIONは、パララックス効果を実装したサイトです。 jquery.scrollorama.jsが使われています。 INCEPTION

category: Technology

date: March 25, 2012

Envision.js – HTML5でチャートやフラクタルを描画するJavaScriptライブラリ

Envision.jsは、HTML5でチャートやフラクタルを描画するJavaScriptライブラリです。 モダンブラウザ、およびIE6以上で動作するようです。 Envision.js

category: Technology

date: March 25, 2012

HAMMER.JS – マルチタッチジェスチャをサポートするJavaScriptライブラリ

HAMMER.JSは、マルチタッチジェスチャをサポートするJavaScriptライブラリです。 タップ、ダブルタップ、ホールド、ドラッグ、拡大縮小に対応しているようです。 HAMMER.JS

category: Technology

date: March 25, 2012

CSS3D Clouds – CSS3 3D Transformsで作られた雲

CSS3D Cloudsは、CSS3 3D TransformsとJavascriptでで作られた雲です。 マウスを動かすと雲も動きます。 CSS3D Clouds

category: Technology

date: March 25, 2012

TypeButter – デバイスフォントにオプティカルカーニングを施せるjQueryプラグイン

これはすごい。TypeButterは、デバイスフォントにオプティカルカーニングを施せるjQueryプラグインです。 和文書体は未確認ですが、欧文書体ではいい感じの見え方になっています。 TypeButter

category: Technology

date: March 24, 2012

サイトやブログに設置するFacebookソーシャルプラグイン

サイトやブログに設置するFacebookソーシャルプラグインは、以下ページから。 Social Plugins 「○○人が○○について「いいね！」と言っています。」っていう感じで書かれたブログパーツ的なものは、Like Boxですね。

category: Technology

date: March 24, 2012

Macでスクリーンショットの保存先を変更する方法

前からやりかったことをさくっとできたのでメモ。Macでスクリーンショットの保存先を変更するには、TinkerToolを使います。 TinkerTool 一般タブの「スクリーンショットを保存するフォルダ」でカスタムフォルダを選択し、再度ログインすれば有効になります。 ちなみに、 …

category: Technology

date: March 23, 2012

jQuery Content Slider – 軽量なスライドショーを実装するjQueryプラグイン

jQuery Content Sliderは、軽量なスライドショーを実装するjQueryプラグインです。 jquery.easingを使用しているので、easingの具合はeaseOutElasticなどで調整できるようです。 jQuery Content Slider

category: Technology

date: March 22, 2012

mailcheck.js – メールのドメインが間違えていたらsuggestしてくれるJavaScript

mailcheck.jsは、メールのドメインが間違えていたらsuggestしてくれるJavaScriptです。 以下のように、domainsにチェックしたいドメインを入れるようです。 <script type="text/javascript"&gt …

category: Technology

date: March 21, 2012

Flashで外部ファイル読み込み時にキャッシュを読まないようにする方法

ちょっとメモ。Flashで外部ファイルを読み込んでいる際、更新性のあるものはキャッシュに対するケアをしておかないと、ユーザが古い情報を読んでしまいます。 URLRequest時に、以下のようにファイル名の後にパラメータを付けます。 new URLRequest(“ …

category: Technology

date: March 21, 2012

新しいタブで開くときの処理を追加

リンクをクリックした際にreturn false;していたため、target=”_blank”が設定されていないリンクをブラウザの機能でoption + click（Mac）で別タブとして開けなくなっていました。 そのため、リンクURLに自サイトのドメ …

category: Technology

date: March 21, 2012

Sprite3D.jsを使ったCSSによる3D表現

ちょっとメモ。The Boxは、Sprite3D.jsを使ったデモサイトです。 jsとCSS Transformを使用しているようです。 The Box | Demo Studio | Mozilla Developer Network ref. http://techwav …

category: Technology

date: March 21, 2012

jPlayer – 音楽/動画をサイトに埋め込めこむためのjQueryプラグイン

jPlayerは、音楽/動画をサイトに埋め込めこむためのjQueryプラグインです。 結構便利に使えそうです。 対応ブラウザ Windows: Firefox, Chrome, Opera, Safari, IE6, IE7, IE8, IE9 OSX: Safari, Fi …

category: Technology

date: March 20, 2012

Facebookページにアプリのタブを追加する方法

Facebookの仕様変更により、FacebookのApplication Profile Pagesは2012年2月1日に廃止されました。 それで、Facebookページにアプリのタブを追加する方法が全くわからなくなりました・・・・・・・・・・・・・・。ともかくリンクがない …

category: Technology

date: March 19, 2012

FacebookのApplication Profile Pagesは2012年2月1日に廃止

Facebookページにアプリが追加できなくて困っているんですが、FacebookのApplication Profile Pagesは2012年2月1日に廃止されたようです。 Removing App Profile Pages アプリもFacebookページとして作成する …

category: Technology

date: March 19, 2012

PARALLAX CONTENT SLIDER – パララックス効果を備えたスライドショー

PARALLAX CONTENT SLIDERは、パララックス効果を備えたスライドショーです。 オブジェクトが時間差でスライドします。 PARALLAX CONTENT SLIDER WITH CSS3 AND JQUERY

category: Technology

date: March 19, 2012

dotdotdot – はみ出したテキストを「…」に変えてくれるjQueryプラグイン

dotdotdotは、はみ出したテキストを「…」に変えてくれるjQueryプラグインです。 日本語の2バイトでの確認は必要かもですが、簡単に実装できるようです。 dotdotdot

category: Technology

date: March 15, 2012

レスポンシブデザインに使えるjQueryプラグイン集

「20 Useful jQuery Plugins for Responsive Web Design」という記事で、レスポンシブデザインに使えるjQueryプラグインが20個まとまっています。 上記はPHOTO SWIPE。スマートフォン用に、スワイプできるスライドショーを …

category: Technology

date: March 13, 2012

JavaScript, HTML5のツール集

50+ JavaScript & HTML5 Frameworks and Related Toolsという記事で、JavaScript, HTML5のツールがまとまっています。 jQueryやTwitter BootstrapといったFull-stack Fram …

category: Technology

date: March 13, 2012

PageSlide – クリックするとページをスライドさせてサイドコンテンツを表示するjQueryプラグイン

PageSlideは、クリックするとページをスライドさせてサイドコンテンツを表示するjQueryプラグインです。 なかなかいい。 PageSlide

category: Technology

date: March 13, 2012

BACKSTRETCH – 背景画像をブラウザいっぱいに敷くことができるjQueryプラグイン

BACKSTRETCHは、背景画像をブラウザいっぱいに敷くことができるjQueryプラグインです。 ・背景画像を1枚敷く ・スライドショーでクロスフェードしながら切り替える ・クリックで背景画像を切り替える といったことができます。 これはいい。 BACKSTRETCH

category: Technology

date: March 13, 2012

Color animation – 色や背景色をアニメーションさせられるjQueryプラグイン

jQueryのanimateメソッドは数値形式のCSSしか指定できないですが、このプラグインを使えば、以下のプロパティーをアニメーションさせることが可能です。 ・color ・backgroundColor ・borderColor ・borderBottomColor ・b …

category: Technology

date: March 12, 2012

新Facebookページ（2012.03.30以降）でタイムライン化される際のサイズ・注意点

2012.03.30以降、新Facebookページでタイムライン化される際のサイズ・注意点のリンクをまとめておきます。 ・Facebookカバー画像（851 x 315px）を用意する ・いいねしていない人に見せるためのデフォルトページ設定は不可の模様 ・「いいねしてね！」の …

category: Technology

date: March 11, 2012

Favs – TwitterやFacebookのfavoriteを統合できるMac用アプリ

Favsは、TwitterやFacebookのfavoriteを統合できるMac用アプリです。 Facebookの「いいね！」やTwitterやGoogleリーダーでスターをつけた記事などを、一カ所で管理できる特長を持っています。 Favs

category: Technology

date: March 10, 2012

blur.js – 画像にぼかしをかけられるjQueryプラグイン

blur.jsは、画像にぼかしをかけられるjQueryプラグインです。 オーバーレイで色を重ねたりすることも可能なようです。 blur.js

category: Technology

date: March 09, 2012

フルスクリーンのスライドショーを可能にする「jQuery HTML5 Fullscreen Slideshow」

jQuery HTML5 Fullscreen Slideshowは、フルスクリーンのスライドショーを可能にするプラグインです。 画像をクリックするとフルスクリーン表示になり、複数の画像を見ることができます。 jQuery HTML5 Fullscreen Slideshow

category: Technology

date: March 08, 2012

WordPressをサーバ移転してドメインが変わった場合の設定方法

WordPressをサーバ移転してドメインが変わった場合、「WordPress のアドレス」と「ブログのアドレス」は古い情報を持っているので、ログインできなくなります。 その場合、wp-config.phpに、以下を追記することで解決します。 define(‘WP …

category: Technology

date: March 08, 2012

Lion（Mac OS 10.7）を初期化する方法

Snow Leopard（10.6）からLion（Mac OS 10.7）になって初期化の方法が変わったようなのでメモ。 Lion（Mac OS 10.7）を初期化するには、以下のようにします。 Lionでは、リカバリーHDがデフォルトで入っているようですね。 ・起動ボタンを …

category: Technology

date: March 08, 2012

レスポンシブデザインに対応した「foodsense」

foodsenseは、一部崩れがありますがレスポンシブデザインに対応していて、ヘッダ部分に端末ごとのCSSを切り替えられるようになっています。 ちょっとおもろい。 foodsense

category: Technology

date: March 08, 2012

JavaScriptのデバッグ方法

JavaScriptをデバッグする際は、以下のように書くと便利です。 <script> console.log("test"); alert("test"); </script> コンソールに「test」、アラー …

category: Technology

date: March 07, 2012

WordPressにプラグインを入れたら画面が真っ白になる場合の対処法

WordPressにプラグインを入れたら、特におかしいはずはないのに画面が真っ白になる場合がありますが、 メモリ不足が原因の場合、以下を.htaccessに記述することで回避できることがあります。 php_value memory_limit 60M

category: Technology

date: March 06, 2012

コーポレートサイトを少し修正

コーポレートサイトでは、円を生成して拡大して消えていくアニメーションを実装しているんですが、今までは要素の追加（append）をしたままで、永遠に要素が増えていくようになっていたため、修正。 idを付与して、表示後にremoveするようにしました。 今までは開きっぱなしだとど …

category: Technology

date: March 05, 2012

jQueryのanimateメソッドは数値形式のCSSしか指定できない

ちょっとメモ。 jQueryのanimateメソッドは数値形式のCSSしか指定できません。 $(this).stop().animate({opacity: 1, left:400},2000); のようにopacityやleftなどは指定できますが、color:#000;の …

category: Technology

date: March 02, 2012

魅力的なプレゼンをするためのHTML5/CSS3フレームワーク6選

「6 Best HTML5/CSS3 Presentation Frameworks」という記事で、魅力的なプレゼンをするためのHTML5/CSS3フレームワークが紹介されています。 html5 Slides Slides Presentation with HTML5 CS …

category: Technology

date: March 02, 2012

奥行きのある回転を可能にする「Roundabout」

Roundaboutは、奥行きのある回転を可能にするjQueryプラグインです。 その他にも、動きのスムーズなデジタル時計や、CSS3 3D Transformsのサンプルなどがあります。 Roundabout

category: Technology

date: February 29, 2012

CSS3で作るドロップシャドウ

「Creating Different CSS3 Box Shadows Effects」という記事で、CSS3のbox-shadowを使っていい感じのシャドウをかけたソースが公開されています。 デモは以下から。 CSS Box Shadow Effects Demo

category: Technology

date: February 29, 2012

jq.carousel – シンプルでカスタマイズ可能なカルーセルギャラリープラグイン

jq.carouselは、シンプルでカスタマイズ可能なカルーセルギャラリープラグインです。 以下のブラウザに対応しているようで、とても使いやすそうです。 ・IE6+ ・and modern browsers ・Mobile Safari また海外から便利そうなのが出たと思った …

category: Technology

date: February 24, 2012

HTML5の対応状況をチェックするための2サイト

ちょっとメモ。HTML5の対応状況をチェックするための2サイトです。 HTML5 Please caniuse.com

category: Technology

date: February 22, 2012

MAMP PROが半額に（あと10分）

MAMP PROが半額になっているので、ぜひ。あと10分くらいで終わります。

category: Technology

date: February 22, 2012

TypeSquareを使ってみました

TypeSquareが開始されたので、早速使ってみました。 べたに新ゴ Rを使っています。 使い方は、 1. ユーザ登録後、マイページにログインし、クラウドフォントを利用するWebサイトのURLを「サイト登録」で登録 2. TypeSquare専用タグのJavaScriptを …

category: Technology

date: February 22, 2012

CSS3のコーディングに役立つツール8選

「8 Best Tools to Make Easy CSS3 Development」という記事で、CSS3のコーディングに役立つツールがまとまっていたのでご紹介します。 CSS3 CSS3ジェネレータ。プレビューしたり対応ブラウザの表示もあります CSS3 Pie IE6 …

category: Technology

date: February 21, 2012

オーバーレイなどのブレンドモード効果を与えられる「jQuery Blend Modes」

これはすごい、かも。オーバーレイなどのブレンドモード効果を与えられるjQueryプラグインです。 マウスオーバーすると画像が変化します。 オーバーレイ効果 焼き込み効果 $7で配布中のようです。 jQuery Blend Modes

category: Technology

date: February 20, 2012

画像等をクロスフェードするJavaScript5選

画像等をクロスフェードするJavaScriptをまとめておきます。 InnerFade with JQuery bsn.Crossfader CrossSlide jQuery Cycle Plugin Simplest jQuery Slideshow 関連エントリー フェ …

category: Technology

date: February 20, 2012

jQuery easingのメモ

ちょっとメモ。 jQueryでeasingを使うときは、以下のように書きます。 Example 1: $(function() { $(“#menu li”).click(function () { $(“#content”).stop().animate({opacity: …

category: Technology

date: February 17, 2012

Sequence.js – ページの要素をばらばらにアニメーションするjQueryプラグイン

Sequence.jsは、ページの要素をばらばらにアニメーションするjQueryプラグインです。 とても気持ちいい動きをするので、ぜひ見てみてください。 水平のスライドやパララックスのスライドなどがあります。 Sequence.js

category: Technology

date: February 17, 2012

Steve Jobsの動画集決定版

動画共有サイト「Chill」のThe Ultimate Steve Jobs Collectionというページに、Steve Jobsの動画がたくさん集まっています。 The Ultimate Steve Jobs Collection

category: Technology

date: February 16, 2012

Glisse.js – 動きの気持ちいいjQueryフォトビューア

Glisse.jsは、動きの気持ちいいjQueryフォトビューアです。 左右の矢印キーで、いろいろなトランジションが試せます。 Glisse.js – 動きの気持ちいいjQueryフォトビューア

category: Technology

date: February 15, 2012

MarsEditめっちゃいい

MarsEdit使っていますが、めちゃくちゃいいですね！！すごい快適。 GraphicuはWordPressなのでそれも設定したんですが、以下のようにPostsだけでなくPagesも表示されます。 しかも、MT4だとできない、タグの入力補完やカテゴリーの新規追加も、WP3の場 …

category: Technology

date: February 14, 2012

MarsEditをテスト中

ちょっと気になっていたブログエディタ、MarsEditをテスト中。CREAMUはMovableTypeで動いているので、その設定諸々です。 「/img/」に画像を置いているので、GeneralのHomepage URLを「/mt」に設定（最後のスラッシュを省いた形）して、画像 …

category: Technology

date: February 14, 2012

カーテンが上がるような動きを演出する「Curtain.js」

Curtain.jsは、カーテンが上がるような動きを演出するJavaScriptです。 スクロールだけでなく、矢印キーでもスムーズに動きますね。 Curtain.js

category: Technology

date: February 14, 2012

noty – オプションの豊富な通知を表示するjQueryプラグイン

notyは、オプションの豊富な通知を表示してくれるjQueryプラグインです。 Twitterでも、上部に通知メッセージ（notification）が表示されてフェードアウトしますね。それと同じ感じのものが実装できます。 noty

category: Technology

date: February 11, 2012

パスに沿ってぐるぐると遷移する「jQuery Scroll Path」

jQuery Scroll Pathは、パスに沿ってぐるぐると遷移させられるJavaScrpitです。 githubからソースをダウンロードでき、demo.jsの内容を変更することで、パスを変えられるようです。 jQuery Scroll Path

category: Technology

date: February 10, 2012

HoverBar – iPadを空中に固定するためのアーム

これは面白いプロダクト！iPadを空中に固定するためのアームです。 こうやったり、 こうやったり、 こうやって使うことができます。すげえ。 価格は$79.99。BUY NOWボタンがあるので、ぜひどうぞ。 HoverBar

category: Technology

date: February 05, 2012

STELLAR.JS – パララックス効果を実装するJavascript

STELLAR.JSは、パララックス（視差）効果を実装するためのJavascriptです。 デモは以下から。 PC用：Parallax Backgrounds iOS用：iOS (Using Scrollability) ソースはgithubからダウンロードが可能です。 ST …

category: Technology

date: February 05, 2012

CSS3で作るふわっと浮き上がるツールチップ

「HOW TO CREATE ANIMATED TOOLTIPS WITH CSS3」という記事で、CSS3で作るふわっと浮き上がるツールチップのチュートリアルが紹介されています。 デモは以下から。 DEMO 動きが自然で気持ちいいですね。 HOW TO CREATE ANI …

category: Technology

date: January 30, 2012

Zocial – CSS3で作られたソーシャルボタン・アイコンセット

Zocialは、CSS3で作られたソーシャルボタン・アイコンセットです。 Githubからソースをダウンロードできます。 /* Code written by Sam Collins (@smcllns) of www.eventasaur.us */ /* You are …

category: Technology

date: January 29, 2012

コーディングに役立つCSSスニペット集

「Useful CSS Snippets for Your Coding Arsenal」という記事で、コーディングに役立つCSSスニペット集が紹介されています。 垂直方向のセンタリング div { width:100px; height:100px; } div p { l …

category: Technology

date: January 27, 2012

Magnus – シンプルなiPadスタンド

Magnusは、シンプルなiPadスタンドです。とてもクールなデザインですね。 磁石でフィットさせているようです。現在は$49.55で購入できます。 Magnus

category: Technology

date: January 22, 2012

iPhone, iPadで使えるVimエディタ

Vimは、iOSで使えるVimエディタです。 無料となっているので、Vimユーザの方はぜひどうぞ。 Vim

category: Technology

date: January 19, 2012

画像hover時にテキスト等を表示するjQueryプラグイン

jQuery ContentHover Pluginは、画像hover時にテキスト等を表示するjQueryプラグインです。 補足情報をシンプルに見せる形として、省スペースで効果的ではないでしょうか。 アニメーションも気が利いていて、透過度などを変更することができます。 jQu …

category: Technology

date: January 19, 2012

FacebookカバーデザインをiPhoneから作れるアプリ

Facebook Cover Designerは、FacebookカバーデザインをiPhoneから作れるアプリです。 Facebookカバーのサイズにトリミングしたり、フィルタをかけられるようです。 Facebook Cover Designer

category: Technology

date: January 12, 2012

スマートフォンサイトのソースを確認する方法

スマートフォンサイトのソースは、ユーザーエージェントなどで切り替えている場合通常見られませんが、Safariで開くと見ることができます。 「環境設定 / 詳細 / メニューバーに”開発”メニューを表示」で開発メニューを表示 「開発 / ユーザーエージェ …

category: Technology

date: January 11, 2012

Lightview – 実装が容易でクールな画像オーバーレイスクリプト

Lightviewは、実装が容易でシンプル&クールなデザインの画像オーバーレイスクリプトです。 IE6にも対応しており、クロスブラウザで動作するようです。 Lightview

category: Technology

date: January 09, 2012

再起動画面だけを集めた「The Restart Page」

The Restart Pageは、いろいろなOSの再起動画面だけを集めたサイトです。 再起動ボタンをクリックすると、実際にPCが再起動・・・してしまうわけではなく、ブラウザ上で再起動の様子がアニメーションされます。 OS9なんかは懐かしいですね。 結構面白いので、一度試して …

category: Technology

date: December 16, 2011

Facebookカバーのサイズ

Facebookカバーが始まりましたね。 サイズは「851 x 315px」でぴったり綺麗に表示されるので、ぜひみなさんもやってみてください！ 僕のページも、よろしくお願いします。 http://www.facebook.com/creamu

category: Technology

date: December 10, 2011

FacebookページをSSLに対応させる方法

ちょっとメモ。 Facebookでは、Facebookページのサイドバーにページを追加する場合、アプリとして作ってiframeで読み込みますが、そのアプリとして作るページが、今年の10月（2011年10月1日）からSSL必須になっています。 そのため、ユーザが「アカウント設定 …

category: Technology

date: December 06, 2011

会社のFacebookページを更新しました

ちょっと会社のFacebookページを更新してみましたのでご覧ください。 Facebookが結構熱いことになっていますが、Facebookページの制作やキャンペーン等、ご相談に乗りますのでぜひご連絡ください。 CREAMU, Inc. | Facebook

category: Technology

date: December 06, 2011

Codaで使うzen-coding

ショートカットでがんがんコードが書けるzen-codingがとても便利ですが、Mac用のテキストエディタであるCodaは、バージョンが違うとzen-coding用のショートカットが変わってしまうようなのでメモ。 TEA for Coda（Coda用のzen-coding）をイ …

category: Technology

date: December 05, 2011

コーポレートサイトをリニューアルしました

Circluのサイトをいじっていたらテンションが上がったので、一気にコーポレートサイトをリニューアルしました。 まだ諸々調整中ですが、ご覧いただければと思います。 CREAMU, Inc. | 株式会社クリーム

category: Technology

date: December 04, 2011

サイトをFacebookのOGP（Open Graph Protocol）に対応させる方法

ちょっとメモ。 Facebookのいいねボタンを押したときに、OGPの対応（metaタグ等の追加）をしていないと、Facebookのウォールにはページタイトルしか表示されなかったり、意図しないサムネイルが表示されてしまいますが、対応をすると以下のように、設定した内容を表示する …

category: Technology

date: December 03, 2011

HTML5 / CSS3 / JavaScriptのデモサイト「Circlu」を作りました

無性にアニメーションが作りたくなって、HTML5 / CSS3 / JavaScriptのデモサイト「Circlu」を作りました。 @daiskipさんからペパボの新サービス「ギフポ」のドメインをプレゼントしてもらったので、よっしゃ何かささっと作ってUPしてみようかなっと思い …

category: Technology

date: October 26, 2011

Mac OS 10.7 LionのFinderで選択中のファイル数を確認する方法

Lionにしてから、Finder内で選択しているファイル数がわからなくなっていたんですが、「表示 / ステータスバーを表示（ショートカットはcommand + /）」で、「○○○項目中の○項目を選択」みたいに出るようになりました！ よかった・・。

category: Technology

date: October 14, 2011

モバイルファーストの概念とレスポンシブWebデザインが学べる電子書籍

SwapSkillsさんから献本いただいたので、ざっと読ませていただきました。 モバイルファーストの概念や、レスポンシブWebデザインにおけるMedia Queriesの技術的なところが解説されています。 パブーさんでPDFとePub形式で配布されているので、一度見てみてくだ …

category: Technology

date: September 29, 2011

スマートフォンサイト制作に関する本を書きました

スマートフォンサイト制作に関する本を書きました。「スマートフォンサイト制作ハンドブック」というタイトルで、秀和システムさんから発売されます！ クライアントの依頼から始まり、情報設計、デザイン、コーディング、プログラミング、サーバへのUPまで、一貫した流れでスマートフォンサイト …

category: Technology

date: September 28, 2011

スマートフォンサイト制作時にデザイン・UIの参考になるサイト集

ちょっとスマートフォンサイト制作時にデザイン・UIの参考になるサイトをまとめておきます。 iPhoneデザインボックスiShowcase スマートフォンサイト集めました。 iPhoneデザインアーカイブ 絶対見ておきたい有名企業のスマホサイトまとめ CSS iPhone &# …

category: Technology

date: September 22, 2011

facebookページのURL変更は25いいねを集めなくても可能

今までfacebookページのURL変更は、25いいねを集める必要がありましたが、今月あたりから25いいねなくても可能になったようです！ただし25いいねを集めなくてもURL変更できるのは、1回だけのようです（2011年9月時点）。 いいね言い過ぎて意味分からなくなってきました …

category: Technology

date: August 23, 2011

驚きの速さ、MBAでParallels6のWindows7

Parallelsにlion対応のアップデータが出ていたので、6にアップデートしました！ さすがにParallels上のWinはMBAでも重いかな・・と思っていたんですが、びっくりする速さです。想像以上に速く、Macのネイティブアプリっていってもいいくらいの速さでWindow …

category: Technology

date: August 05, 2011

新しいMacBook Airのスピード2

MacBook Air速すぎます。50MBくらいのPSDを5個くらい開いたら、パフォーマンスMBPよりやっぱり落ちるかな・・、と思っていたら、MBPより速いくらいで、ほとんどもたつきを感じません！すげぇ。軽くて薄い、素晴らしいプロダクトを手にしました。 MBPが薄くなるってい …

category: Technology

date: July 31, 2011

新しいMacBook Airのスピード

新しいMacBook Airが届きました！！軽くて薄くて最高です。 やっと・・移行が終わりました。 はじめThunderboltケーブルで電光石火で移行しようと思っていたんですが、移行には使えないようで（正確には移行アシスタントがThunderboltに対応していないようです …

category: Technology

date: July 25, 2011

Mac OS 10.7 Lionで3本指のブラウザの戻る・進むを使う方法

Lionにしてから唯一3本指のブラウザの戻る・進むが使えなくなっていて困っていたんですが（Safariは使えていました）、以下の設定をすることで使えるようになりました！やっぱりこれがないと。 「システム環境設定 / トラックパッド」を選択 「その他のジェスチャ / ページ間を …

category: Technology

date: June 29, 2011

HTML5でベクターグラフィックを描画する「Paper.js」

HTML5でベクターグラフィックを描画する「Paper.js」です。 paper.jsと、サンプルHTML（Smoothing.html）の中に入っているjsを呼んで以下のHTMLを記述することで、描画できます。 HTML5 <canvas id="canva …

category: Technology

date: June 25, 2011

Flashで選択したオブジェクトの座標の小数点以下を切り捨てる方法

ちょっとメモ。 Flashで選択したオブジェクトの座標の小数点以下を切り捨てる方法です。 JSFL（JavaScript）を使います。 Flashでcommand + nで新規ファイル作成時に、「Flash JavaScript ファイル」を選択してOKします。 以下のソース …

category: Technology

date: June 17, 2011

HTML5でミュージックプレイヤーが作れるjQueryプラグイン

HTML5が割と熱い感じになってきましたが、こちらはミュージックプレイヤーが作れるjQueryプラグインです。 かっこいい感じで実装できるようなので、一度見てみてください。 デモは以下から。 Demo アーティストのサイトなど、ぜひ手がけてみたいですね。 HTML5 Musi …

category: Technology

date: May 12, 2011

gettyimages様 Facebookでのいいねボタンキャンペーン開始

本日、gettyimages様のFacebookでのいいねボタンキャンペーンを開始しました。キャンペーンページとaboutページを制作させて頂いています。 今年の3月にfbmlからiframe推奨になったため、iframeで実装しました。 シンプルに、いいね！するだけのページ …

category: Technology

date: May 12, 2011

facebookのiframeページからウォール等にサイト内リンクを貼る方法

ちょっとうまくいったのでメモ。 facebookのiframeページからウォール等にサイト内リンクを貼る方法です。 target指定をしないと、リンクをクリックした後にfacebookのアイコンが出てきて、直接飛べませんが、なぜかtarget=”_top&#822 …

category: Technology

date: May 11, 2011

facebookでページをiframeで読み込む方法

facebookをいじっているんですが、ものすごくわかりにくいですね・・・。 やっとページをiframeで読み込めたんですが、次は覚えてなさそうなので、メモしておきます。 ※2011年5月11日時点の情報です。 まず、width:520px以下でページを作成します。 ※hei …

category: Technology

date: April 09, 2011

mov（QuickTimeの動画）をリサイズ後、flvに変換してflashで再生するメモ

ちょっとメモ。mov（QuickTimeの動画）をリサイズ後、flvに変換してflashで再生する方法です。 Adobe Media Encoder CS5を起動し、movファイルをドラッグ 設定をクリック プリセット：FLV – ソースの属性と同じ（高品質）を選 …

category: Technology

date: April 09, 2011

MacのFinderのサイドバーから項目を削除できなくなった人へ

MacのFinderのサイドバーから項目を削除できなくなった人へ、朗報です！というか解決策が見つかったので共有させていただきます。 少し前からFinderのサイドバーから項目を削除できなくなって困っていたんですが、結論から言うと仕様変更のようです。 Mac OS X v10. …

category: Technology

date: April 09, 2011

jQueryモバイルを使ったスマートフォンサイトギャラリー

「jQuery Mobile Gallery」というサイトで、jQuery Mobileを使ったサイトやアプリがたくさん紹介されています。 スマートフォン用のサイトやアプリの参考に、一度見てみてください。 jQuery Mobile Gallery

category: Technology

date: March 23, 2011

CSS3のベンダープレフィクスを自動で追加してくれる「CSSPrefixer」

ブラウザ毎に先行実装しているCSS3のプロパティを使う際、-webkit-（Webkit系ブラウザ（Safari, Chrome））や-moz-（Mozilla系ブラウザ（Firefox））などのベンダープレフィクスをプロパティの前につける必要がありますが、「CSSPrefi …

category: Technology

date: March 09, 2011

Macで複数人のファイル共有をする方法

ちょっとメモ。Macで複数人のファイル共有をする方法です。 先日募集させて頂いた求人情報ですが、無事採用者が決まりました。とてもいい方なので、がんばってもらいたいと思っています。 そこで、TimeCapsuleのワイヤレスのネットワークを使っているんですが、そこにアクセス許可 …

category: Technology

date: March 05, 2011

MacBook Pro 2.7GHz 13.3inch セットアップ完了

MacBook Pro 2.7GHz 13.3inchを昨日購入して、セットアップ完了！ なぜかFirewireを使ってターゲットディスクモードで移行できなかったので、TimeMachineのバックアップから復元。たぶん3時間くらいで終わって、スムーズに移行できました。 メモ …

category: Technology

date: February 17, 2011

キーボード付きのiPadケース「clamcase」

これはいい！キーボード付きのiPadケースです。去年の秋に発売されたようですね。 いい感じの角度でスタンドとして利用できたりして、すごく楽しそうです。 Macを買うまでもない、iPadで何かをしたい人にはいいのではないでしょうか？ 価格は119ドル。 動画もかっこいいので、見 …

category: Technology

date: January 22, 2011

画像周りのjQueryプラグイン10

ちょっとメモ。画像周りのjQueryプラグイン集です。 Slides使いやすいスライドショー Fullscreenr背景画像をフルスクリーンにしてくれるjs MobilyNotes下から上にスライドしてくるjs jQuery Easy Slidesキャプション付きのスライドシ …

category: Technology

date: January 15, 2011

iPhone・iPad用サイト制作について講演します

告知が遅くなりましたが（開催は明日です！）、明日「スマートフォンページ制作　 〜開発環境設定＋マークアップ＋JavaScript〜」ということで、スピーカーとして出演します。 SwapSkillsさんにお声がけいただきました。80名くらいいらっしゃるようなので緊張していますが …

category: Technology

date: November 12, 2010

インテリア好きのためのiPadアプリ11

以前インテリア好きのためのiPhoneアプリを紹介しましたが、今回はそのiPad版です。 多くはiPhoneアプリをユニバーサル対応したものですが、中にはiPadならではの特徴を上手く生かした独自アプリなどもあります。 LivingRoom for iPad家具や家電のレイア …

category: Technology

date: September 20, 2010

WordPressで同じ日付が表示されない場合の対処法

ちょっとメモ。WordPressで同じ日付の投稿があった際に、ループしていると一つの投稿にしか日付が表示されない場合があります。原因はthe_dateを使っているためで、the_timeにすることで回避できます。 【修正前】 <?php the_date("Y …

category: Technology

date: August 21, 2010

アニメーションの美しいポートフォリオサイト

HTML5でサイトを作りたい。 そんなときに参考になるのが、「S5 Style」。アニメーションの美しいポートフォリオサイトです。 shogo Tabuchiさんというデザイナーの方のサイトですね。アーキタイプさんにいらっしゃるようです。 Processing.jsを使って、 …

category: Technology

date: August 19, 2010

黒ベースの動きの洗練されたフルフラッシュサイト

クールなフルフラッシュサイトを作りたい。 そんなときに参考になるのが、「Despark」と「nano・universe × sony “α”」。どちらも、とてもかっこいいサイトになっています。 上記は「Despark」。画面の切り替えやスクロール時の表 …

category: Technology

date: August 19, 2010

デザイナー・デベロッパーのためのjQueryプラグイン30

jQueryを使ってクールなインターフェースを実装したい。 そんなときにおすすめなのが、「30 Useful Jquery Plugins For Developer & Designer」。デザイナー・デベロッパーのためのjQueryプラグイン集です。 結構いい感 …

category: Technology

date: August 18, 2010

浮遊する動きが独特な「PANOPLIE」

Flashでディテールの動きを表現したい。 そんなときに参考になるのが、「PANOPLIE」。浮遊する動きが独特なサイトです。 フランスの制作会社のようですね。ふわふわうにょうにょと浮遊する動きが独特です。 ポートフォリオをクリックして、拡大後に矢印をクリックすると、布をめく …

category: Technology

date: August 18, 2010

facebookのいいねボタンを付けました

ふと思い立って、facebookのいいねボタンを付けました（思い立ちすぎやろ）。 IE6と7でも正常に表示されて、んーちょっとうれしいです・・・。 なかなかいい感じかも。僕もよくわかってないんですが、facebookにログインしていると、いいね！と投票できるようです。押した後 …

category: Technology

date: August 03, 2010

Flashの美しいMarc Jacobsのサイト

グラフィックと動きの美しいサイトを作りたい。 そんなときに参考になるのが、『Marc Jacobs Bang』。Flashの美しいMarc Jacobsのサイトです。 白をうまく使った美しいデザインになっています。アニメーションも遅くない速度で気持ちいいし、アルミ箔が広がるモ …

category: Technology

date: August 02, 2010

デザイナーのためのiPadアプリ30

83286959, Ciaran Griffin/ Lifesize/ Thinkstock iPadでスケッチをしたりメモを取りたい。 そんなあなたにおすすめなのが、『30 Essential iPad Apps for Designers and Creatives』。デ …

category: Technology

date: July 31, 2010

リニューアルされたヴィダルサスーンのサイト

ヴィダルサスーンのTV CMで、アンジェラベイビーが起用されてすごく刺激的なCMになっていますが、サイトの方もすごくかっこいいです。 titleに「FASHION, MUSIC, VIDAL SASSOON」とあって、このブランディングはとてもいいですね。 スクロールするとコ …

category: Technology

date: July 31, 2010

jQueryでアニメーションさせた静的なサイト

動きのある静的なサイトを作りたい。 そんなときに参考になるのが、『G2』。jQueryでアニメーションさせたレストランのサイトです。 ロード時に、ロゴが上から落ちてきてぼよーんとなりますが、「jquery.rotate.js」を使ってアニメーションしているようですね。フェード …

category: Technology

date: July 28, 2010

美しい服飾ブランドのサイト

美しいFlashサイトを作りたい。 そんなときに参考になるのが、『European Culture』。美しい服飾ブランドのサイトです。 落ち着いた、美しいサイトになっています。ゆったりとした動きの映像が綺麗だし、ナビゲーションや商品の見せ方もいい感じですね。 ドラッグして36 …

category: Technology

date: July 27, 2010

背景画像をうまく使ったデザインエージェンシーのサイト

斬新なレイアウトがしたい。 そんなときに参考になるのが、『hauser lacour』。背景画像をうまく使ったデザインエージェンシーのサイトです。 大きい背景画像がインパクトありますね。2枚の画像が重ねられていて、1枚は1200px程度の写真、もう1枚は、1200px程度のグ …

category: Technology

date: July 25, 2010

jQueryを使ったストレッチする背景画像

背景に大きくビジュアルを使いたい。 そんなときに参考になるのが、『Image Now』。jQueryを使った、背景画像がストレッチするサイトです。 jquery.backstretch.jsが使われていて、width:1024pxの画像が、ブラウザサイズに合わせて伸縮しますね …

category: Technology

date: July 23, 2010

かっこいいイメージスライダー集

クールなスライドショーを実装したい。 そんなときにおすすめなのが、『BEST jQuery Plugins For Image Galleries And Sliders』。かっこいいイメージスライダー集です。 いい感じのものが揃っていますね。 jQuery Content …

category: Technology

date: July 22, 2010

デンマークの制作会社のFlashサイト

かっこいいFlashサイトが作りたい。 そんなときに参考になるのが、『DesignBolaget』。デンマークの制作会社のFlashサイトです。 フルフラッシュになっていて、デザインとUIがとてもいいですね。→のナビゲーションをクリックすると、カーソルを動かさずに次々と見てい …

category: Technology

date: July 09, 2010

CSS3で作るクールなお問い合わせフォーム

フォームをCSS3で作りたい。 そんなときに参考になるのが、『Create A Clean and Stylish CSS3 Contact Form』。CSS3で作るクールなお問い合わせフォームです。 角丸やグラデ、シャドウなどをCSSで指定していますね。デモは以下から。 …

category: Technology

date: June 28, 2010

Flashで作られたクールなポートフォリオサイト

かっこいいFlashサイトを作りたい。 そんなときに参考になるのが、『Mariana Bukvic』。Flashで作られたクールなポートフォリオサイトです。 ニューヨークのクリエイティブディレクターのサイトのようですね。ボックスがサイコロみたいにくるくると回転するのが面白い感 …

category: Technology

date: June 26, 2010

フォーム周りに使えるjQueryプラグイン50

フォームをより使いやすくしたい。 そんなときに使えそうなのが、『50 jQuery Plugins for Form Functionality, Validation, Security and Customisation』。フォーム周りに使えるjQueryプラグイン集です …

category: Technology

date: June 23, 2010

HTML5を使ったドロップダウンメニュー

HTML5でメニューを作りたい。 そんなときに参考になるのが、『How to Create a Drop-down Nav Menu with HTML5, CSS3 and jQuery』。HTML5を使ったドロップダウンメニューです。 CSS3で、角丸やグラデーションが適 …

category: Technology

date: June 21, 2010

jQueryを使った、動きのあるナビゲーションメニューチュートリアル集

スムーズな動きのナビゲーションメニューを作りたい。 そんなときにおすすめなのが、『Excellent jQuery Navigation Menu Tutorials』。jQueryを使った、動きのあるナビゲーションメニューチュートリアル集です。 いい感じのものが揃っています …

category: Technology

date: June 11, 2010

文字列を扱うPHPのコードスニペット10

95555725/ Hemera/ Thinkstock PHPで文字列を操作したい。 そんなときにおすすめなのが、『10 PHP code snippets for working with strings』。文字列を扱うPHPのコードスニペット集です。 使いやすそうなコー …

category: Technology

date: June 08, 2010

WordPressのfunctions.phpを編集する便利なテクニック25+

100768523/ Hemera/ Thinkstock WordPressをカスタマイズしたい。 そんなときにおすすめなのが、『25+ Extremely Useful Tricks for the WordPress Functions File』。WordPressの …

category: Technology

date: June 07, 2010

美しいiPadアプリサイト34

iPadのデザインやiPadアプリが好きだ。 そんなあなたにおすすめなのが、『34 Inspiring iPad Application Websites』。美しいiPadアプリサイト集です。 洗練されたサイトが揃っていますね。 SortedToDo管理アプリ。美しい背景と、 …

category: Technology

date: June 06, 2010

floatした画像の横のテキストの回り込みをクリアするCSS

floatした画像の横のテキストを回り込ませたくない。 そんなときにおすすめなのが、『Correcting Orphans w/ Overflow』。floatした画像の横のテキストの回り込みをクリアするCSSです。 右に配置したテキストをwrapするdivに、widthを指 …

category: Technology

date: June 02, 2010

ユーザビリティーについて動画で解説するサイト

ユーザビリティーの改善をしたい。 そんなときに参考になるのが、『Usable Efficiency』。ユーザビリティーについて動画で解説するサイトです。 第一回目が余白、第二回目がPNGのファイルサイズ削減と最適化、第三回目がユーザビリティーを損なう5つの間違い、ということで …

category: Technology

date: June 01, 2010

Windows7のような透過ウィンドウを実現するjQueryプラグイン

Windows7のようにウィンドウを透過させたい。 そんなときに使えそうなのが、『AeroWindow』。Windows7のような透過ウィンドウを実現するjQueryプラグインです。 divを透過させて、重なったときに後ろが透けて見せることができますね。ダブルクリックすると、 …

category: Technology

date: May 29, 2010

jQueryとPHPで作るサムネイルがスライドするギャラリー

サムネイル表示のあるフォトギャラリーを作りたい。 そんなときに参考になるのが、『Fresh Sliding Thumbnails Gallery with jQuery and PHP』。jQueryとPHPで作るサムネイルがスライドするギャラリーです。 マウスオーバー状態で …

category: Technology

date: May 26, 2010

フリーのWordPressテーマがダウンロードできるサイト

WordPressのテーマを探している。 そんなときにおすすめなのが、『FREE PREMIUM WORDPRESS THEMES』。フリーのWordPressテーマがダウンロードできるサイトです。 かわいいものやかっこいいもの、シンプルなものがたくさん紹介されています。プレ …

category: Technology

date: May 25, 2010

CSS3を使ったボタンジェネレータ

CSS3で表現できることを知っておきたい。 そんなときに参考になるのが、『Button Maker』。CSS3を使ったボタンジェネレータです。 スライダーでボタンの大きさやfont-size、角丸の度合いを設定できたり、ボーダーやグラデーションの色を設定できますね。 「Vie …

category: Technology

date: May 21, 2010

クリエイターがiPadの壁紙を公開していく『iPadVision』

FLOP DESIGNの方から連絡いただいて、面白そうなのでご紹介します。 グラフィックデザイナーやイラストレータが集まって、iPad用の壁紙を次々と公開していくようですね。 すでに何枚か公開されています。 下記がイベント概要となっています。 開催日： 5/28〜12/30 …

category: Technology

date: May 12, 2010

シンプルでかっこいいWordPressのテーマ40+

シンプルなWordPressのテーマを探している。 そんなときにおすすめなのが、『40 More Stylish, Minimal and Clean Free WordPress Themes』。シンプルでかっこいいWordPressのテーマ集です。 かっこいものが揃ってい …

category: Technology

date: May 11, 2010

さくらのサーバでWordPressが真っ白になってしまった場合の対処法

またまたメモ。さくらのサーバでWordPressの管理画面が真っ白になってしまって困っていたんですが、解決しました。原因はfunctions.phpにありました。初歩的なPHPの書き方が間違っていたんですが、これまた前にも同じことがあったので気をつけます。 ただエラーを出して …

category: Technology

date: May 11, 2010

かっこいい画像オーバーレイ表示スクリプト31

画像やswfなどをかっこよくオーバーレイで表示したい。 そんなときにおすすめなのが、『31 mind blowing collection of jQuery light box』。かっこいい画像オーバーレイ表示スクリプト集です。 いいものが揃っているので、いくつかご紹介しま …

category: Technology

date: May 08, 2010

SSIについてのメモ

うーんこれにははまった。過去にも同じことではまったのでいろいろメモ。 HTMLの中でインクルード<!–#include virtual="/dirname/filename.html" –>サイトルート相対パスでOK P …

category: Technology

date: May 06, 2010

WordPress構築前にやっておくこと

もう一つメモ。WordPressをローカルで構築して、テストサーバ、本番サーバにインポートして移行する場合、画像のファイルパスには気をつける必要があります。 画像のファイルパスは絶対パスでDBに入るので、外部サーバに持って行ったときにDBの中を書き換える手間が発生してしまうん …

category: Technology

date: May 06, 2010

WordPressがMAMPローカルで真っ白になってしまった場合の対処法

ちょっとメモ。かなり個人的ですが。 作業途中でwp-adminにアクセスすると、急に真っ白になってしまいました。PHPなのでなにかどこかでエラーが起きていると思うんですが、エラー出力も面倒なので（出ないことが多いし）、いろいろ悶々と調べたりしていたんですが解決せず。 ほぼ同じ …

category: Technology

date: May 05, 2010

a要素のマウスオーバー時にテキストをふわっと切り替えるjQuery

マウスオーバー時のエフェクトに凝りたい。 そんなときに使えそうなのが、『HoverAttribute jQuery plugin』。a要素のマウスオーバー時にテキストをふわっと切り替えるjQueryです。 アンカーテキストにマウスオーバーすると、a要素かrel要素に指定してあ …

category: Technology

date: May 03, 2010

2010年の間に見ておきたいjQueryプラグイン12

jQueryのプラグインをチェックしておきたい。 そんなときにおすすめなのが、『12 Helpful jQuery Plugins to Check Before Ending April 2010』。2010年の間に見ておきたいjQueryプラグイン集です。 いい感じのもの …

category: Technology

date: May 02, 2010

WordPressをハックするためのTips集

98431998, iStockphoto/ Thinkstock WordPressをカスタマイズしたい。 そんなときに参考になるのが、『Top WordPress hacks of early 2010』。WordPressをハックするためのTips集です。 なかなか面白 …

category: Technology

date: May 02, 2010

サイトをかっこよくするためのjQueryプラグイン25+

サイトにかっこいいUIを実装したい。 そんなときにおすすめなのが、『25+ Best jQuery Plugins To Beautify Your Website』。サイトをかっこよくするためのjQueryプラグイン集です。 初めて見るものもあっていい感じです。 YoxVi …

category: Technology

date: April 29, 2010

WordPressでwp_get_archivesにクラスを指定する方法

ちょっとメモ。 WordPressで、たとえば年別アーカイブのリンクを表示したい場合は以下のように書きますが、素のリストタグが生成されて、クラス指定ができません。 <?php wp_get_archives(‘type=yearly’); ?&g …

category: Technology

date: April 28, 2010

かっこいいスライドショーを使ったWebデザイン30

サイトにスライドショーを使いたい。 そんなときに参考になるのが、『30 Examples Of Great Slideshows In Web Design』。かっこいいスライドショーを使ったWebデザイン集です。 洗練されたデザインが揃っていますね。 AgnarsonjQu …

category: Technology

date: April 28, 2010

CSSだけでJavaScriptのような動きを実装するサンプル30

96332132, iStockphoto/ Thinkstock CSSでかっこいいUIを実装したい。 そんなときにおすすめなのが、『30 Pure CSS Alternatives to Javascript』。CSSだけでJavaScriptのような動きを実装するサンプ …

category: Technology

date: April 26, 2010

MacのMAMP PROとParallelsで、IEのテストをする方法

最新版は以下。【2024年版】MacのMAMP PROとParallelsで、IEのテストをする方法MAMP PROとParallelsで、IEのブラウザ確認がローカルアドレスでできるようになったのでメモ。 MAMP PROを使えば、バーチャルドメインを設定して、「http: …

category: Technology

date: April 26, 2010

HTML5 / CSS3のソースがダウンロードできるサンプル

HTML5 / CSSでできることをざっくり掴みたい。 そんなときに参考になるのが、『Create An Elegant Website With HTML 5 And CSS3』。HTML5 / CSS3のソースがダウンロードできるサンプルです。 HTML5で使われる&lt …

category: Technology

date: April 24, 2010

フェードイン&アウトで切り替わるjQueryのスライドショー

83317481, Maria Teijeiro/ Lifesize/ Thinkstock フェードイン&アウトで切り替わるスライドショーが作りたい。 そんなときにおすすめなのが、『Build a Simple Image Slideshow with jQuer …

category: Technology

date: April 22, 2010

WordPressで構築された美しいサイト40

サイトをWordPressで作りたい。 そんなときに参考になるのが、『40 WordPress-Powered Websites With Awesome Designs』。WordPressで構築された美しいサイト集です。 かなりかっこいいサイトが揃っています。 Theme …

category: Technology

date: April 19, 2010

見ておきたいFlashサイト60

Flashサイトからインスピレーションを得たい。 そんなときにおすすめなのが、『60 Creative Flash Websites You Should Not Miss』。見ておきたいFlashサイト集です。 かっこいいのが揃っているので、いくつかご紹介します。 If Y …

category: Technology

date: April 18, 2010

新しいjQueryのプラグイン25

86501330, Jupiterimages/ Goodshoot/ Thinkstock かっこいい動きが実装できるjQueryプラグインを探している。 そんなときにおすすめなのが、『25 Amazing and Fresh jQuery Plugins』。新しいjQue …

category: Technology

date: April 16, 2010

モックアップのユーザビリティーをテストできるサイト

モックアップ作成時に、ユーザビリティーを検証したい。 そんなときに使えそうなのが、『navflow』。モックアップのユーザビリティーをテストできるサイトです。 画像をアップロードすることで、サイトを訪れたユーザにテストしてもらうことができます。 「Recent tests」か …

category: Technology

date: April 15, 2010

画像をオーバーレイで拡大できる jQuery.popeye 2.0

lightbox系の、画像拡大スクリプトを探している。 そんなときにおすすめなのが、『jQuery.popeye 2.0』。画像をオーバーレイで拡大できるスクリプトです。 マウスオーバーすると、前後の画像へのリンクと、拡大アイコンが表示されます。動作が速くて、ユーザビリティー …

category: Technology

date: April 15, 2010

クロスブラウザで動作するCSSグラデーション

CSSでグラデーションを表現したい。 そんなときにおすすめなのが、『Cross-Browser CSS Gradient』。クロスブラウザで動作するCSSグラデーションです。 画像を使わずに、ブラウザ上でグラデーションを描く方法ですね。CSS3の書き方ではFirefox3.6 …

category: Technology

date: April 15, 2010

画像ディレクトリから自動で読み込むPHPのフォトギャラリー

86509412/ Brand X Pictures/ Thinkstock PHPでフォトギャラリーが作りたい。 そんなときにおすすめなのが、『Automatically Generate a Photo Gallery from a Directory of Images …

category: Technology

date: April 11, 2010

マウスカーソルの横にローディング画像を表示するjQueryプラグイン

Ajaxの処理中にローディングバーを表示させたい。 そんなときに使えそうなのが、『prettyLoader』。マウスカーソルの横にローディング画像を表示するjQueryプラグインです。 マウスカーソルの側っていうのがわかりやすくていい感じですね。 This script is …

category: Technology

date: April 09, 2010

WordPressをもっと楽しむためのプラグイン30

92985009/ iStockphoto/ Thinkstock WordPressをもっと楽しみたい。 そんなときにおすすめなのが、『30 Most useful WordPress Plugins – May 2009』。WordPressをもっと楽しむため …

category: Technology

date: April 07, 2010

自分でWordPressのテーマが作れるようになるプラグイン

WordPressのテーマを作りたい。 そんなときにおすすめなのが、『Elastic Theme Editor』。自分でWordPressのテーマが作れるようになるプラグインです。 ダウンロードした「elastic-theme-editor」フォルダを、「wp-content …

category: Technology

date: April 05, 2010

jQueryのかっこいいスライドショースクリプト28

かっこいいスライドショーを作りたい。 そんなときにおすすめなのが、『28 Useful JQuery Sliders You Need To Download』。jQueryのかっこいいスライドショースクリプト集です。 かなりいい感じのものが揃っています。 Automatic …

category: Technology

date: April 02, 2010

かっこいいMac用アプリケーションのサイト10

96373151/ iStockphoto/ Thinkstock Macのデザインが好きだ。 そんなあなたにおすすめなのが、『10 Stunning Mac software websites』。かっこいいMac用アプリケーションのサイト集です。 かなりクールなサイトが集ま …

category: Technology

date: March 30, 2010

above-the-foldのラインを示してくれるサイト

ブラウザの解像度別に、ファーストビューでどう見られているかを知りたい。 そんなときに便利なのが、『Where is the fold?』。above-the-foldのラインを示してくれるサイトです。 URLを入力してボタンを押すと、以下のように解像度別のラインを表示してくれ …

category: Technology

date: March 28, 2010

ブラウザ上でプレゼンができるjQueryプラグイン

89540785, Comstock Images/ Comstock/ Thinkstock ブラウザ上でプレゼンがしたい。 そんなときに使えそうなのが、『jQuery Presentation Plugin』。ブラウザ上でプレゼンができるjQueryプラグインです。 シン …

category: Technology

date: March 26, 2010

バナーをクリックしたときに、くるっと回転させたように見せるjQuery

画像をクリックしたときに、くるっと回転させたい。 そんなときに使えそうなのが、『Sponsor Flip Wall With jQuery & CSS』。バナーをクリックしたときに、くるっと回転させたように見せるjQueryです。 動きがなかなか滑らかで気持ちいいで …

category: Technology

date: March 25, 2010

かっこいい水平メニュー20

水平メニューをかっこいいデザインにしたい。 そんなときに参考になるのが、『20 Stunning Examples of Horizontal Navigation Menus』。かっこいい水平メニュー集です。 いい感じのものが揃っているのでご紹介します。 David Hel …

category: Technology

date: March 24, 2010

ユーザーのマウス・キーボードの動きを記録するユーザビリティーテストツール

サイト上でのユーザーの動きを知りたい。 そんなときにおすすめなのが、『userfly』。ユーザーのマウス・キーボードの動きを記録するユーザビリティーテストツールです。 これはすごい感じですね。いろんなサイトでも話題になってるし。 ユーザーのマウスがどこからどう動いて、どこをク …

category: Technology

date: March 23, 2010

jQueryのとてもかっこいいイメージスライダー

かっこいいスライダーを実装したい。 そんなときにおすすめなのが、『Nivo Slider』。jQueryのとてもかっこいいイメージスライダーです。 これはかっこいい！まるでFlashですね。キャプションも入れられるし、使い方も難しくなさそうです。 The Most Aweso …

category: Technology

date: March 23, 2010

複数カラムのアコーディオンメニューを実装するjQuery

複数カラムの情報をかっこよく見せたい。 そんなときにおすすめなのが、『Grid Accordion with jQuery』。複数カラムのアコーディオンメニューを実装するjQueryです。 dlタグが繰り返されていて、すべてテキストになっています。動きが滑らかで気持ちいいです …

category: Technology

date: March 17, 2010

Macのセカンドモニターにもメニューバーを表示するツール

ちょっと面白いのでご紹介。 Secondbarという、Macのセカンドモニターにもメニューバーを表示するツールが公開されています。Macでデュアルモニターにすると、メインのモニターの方にしかメニューバーは表示されませんが、それをセカンドの方にも表示できるようですね。 使いどこ …

category: Technology

date: March 16, 2010

CSS3で何が実現できるかがわかるジェネレータ

CSS3で何ができるかを知りたい。 そんなときにおすすめなのが、『CSS3 Generator』。CSS3で何が実現できるかがわかるジェネレータです。 border-radiusやbox-shadowなど、CSS3の様々なプロパティーをセレクトボックスから選んで、プレビューす …

category: Technology

date: March 12, 2010

クライアントへの納品時につけたいWordPressプラグイン9

WordPressでサイトを構築してクライアントに納品する。 そんなときにおすすめなのが、『9 Plugins Your Clients Will Love For Their WordPress Website』。クライアントへの納品時につけたいWordPressプラグイン …

category: Technology

date: March 11, 2010

ピュアHTMLでキャラクターと背景がアニメーションするjQuery

Flash以外でサイトに動きをつけたい。 そんなときに参考になるのが、『Spritely』。ピュアHTMLでキャラクターと背景がアニメーションするjQueryです。 Spritelyは、sprite()とpan()というメソッドを使って、背景画像に動きをつけているようですね。 …

category: Technology

date: March 10, 2010

jQueryで作るスライドするラベル

おっと思わせる仕掛けのあるフォームを実装したい。 そんなときにおすすめなのが、『Sliding Labels v2』。jQueryで作るスライドするラベルです。 フォームにフォーカスすると、ラベルがすっと左に移動しますね。とてもさりげない動きなので、ユーザビリティーを損なわず …

category: Technology

date: March 09, 2010

クールなCSSグリッドフレームワーク

CSSのフレームワークを使ってサイトを作りたい。 そんなときにおすすめなのが、『ZURB』。クールなCSSグリッドフレームワークです。 カラム数や幅を指定して、CSSを生成できますね。Screen Widthを変えて確認することもできて、なかなかいい感じです。 似たサイトだと …

category: Technology

date: March 09, 2010

MAMP PROを導入

Macのローカルサーバ環境にMAMPを使っていたんですが、以前から複数のサイトを確認するときに、ドキュメントルートを設定したかったんですね。 どうすればいいのかな、とずっと悩んでいたんですが、MAMP PROにすることで一瞬で解決しました。 なんと複数のサイトをバーチャルホス …

category: Technology

date: March 09, 2010

EmobileをD31HWに変更

今月でちょうどD02HWの2年契約が切れるので、キャンペーンのはがきをもらったのをきっかけにD31HWに機種変更。月々1,000円高くなるけど、速くなるならいいかな、と思って変えてきました。 使ってみた感じ、かなり速い！体感でも結構違うので、満足しています。 これでモバイルで …

category: Technology

date: March 08, 2010

MacBook Proを購入

2月末はいろいろありました。。。。。 MacBookが起動しなくなってしまったんですが、原因はファームウェアアップデートの強制終了。PCがかなり重くなったので再起動すると、たまっていたソフトウェアアップデートと一緒にいろいろアップデートが始まり、急いでいたのと時間がかかってい …

category: Technology

date: March 06, 2010

jQueryで作るiTunesライクなスライダー

手動で切り替えられるフォトスライダーを作りたい。 そんなときにおすすめなのが、『How to Create a Simple iTunes-like Slider』。jQueryで作るiTunesライクなスライダーです。 右に表示される矢印アイコンをクリックすることで、サムネ …

category: Technology

date: March 05, 2010

有料で価値のあるWordPressプラグイン15

WordPressをブログ以外の機能的なサイトで使いたい。 そんなときにおすすめなのが、『15 Useful Premium Plugins for WordPress』。有料で価値のあるWordPressプラグイン集です。 便利そうなのが揃っているのでいくつかご紹介します。 …

category: Technology

date: March 04, 2010

かっこいいjQueryのTips&トリック26

jQueryでクールなインターフェースを実装したい。 そんなときにおすすめなのが、『26 cool and useful jQuery tips, tricks & solutions』。かっこいいjQueryのTips&トリック集です。 いろいろと便利そ …

category: Technology

date: March 03, 2010

画像をより魅力的に使うためのWordPressプラグイン20

WordPressで作ったサイトをより魅力的にしたい。 そんなときにおすすめなのが、『20 WordPress Plugins For Better Image Handling』。画像をより魅力的に使うためのWordPressプラグイン集です。 おっと思うようなプラグインが …

category: Technology

date: March 02, 2010

MacのStackの動きを実装するjQuery

洗練されたインターフェースを実装したい。 そんなときに参考になるのが、『”Outside the Box” Navigation with jQuery』。MacのStackの動きを実装するjQueryです。 MacのDock風の動きはよく見られますが …

category: Technology

date: February 26, 2010

画像にFlashのようなエフェクトをかけられるjQuery

画像をかっこよく見せたい。 そんなときにおすすめなのが、『jqFancyTransitions』。画像にFlashのようなエフェクトをかけられるjQueryです。 画像にシュパシュパシュパッと切り刻んだような効果をつけられますね。かなりかっこいいです。これがjQueryででき …

category: Technology

date: February 25, 2010

アイコンがふわっと拡大するjQuery

マウスオーバー時に気持ちのいい効果をつけたい。 そんなときにおすすめなのが、『BubbleUP』。アイコンがふわっと拡大するjQueryです。 アイコンにマウスオーバーすると、ふわっとサイズが大きくなりますね。動きが滑らかで気持ちいいです。 デモは以下から。 jQuery M …

category: Technology

date: February 22, 2010

フォームで使えるjQuery25

フォーム周りでjQueryを使いたい。 そんなときにおすすめなのが、『25 jQuery Tutorials for Creating and Working with Forms』。フォームで使えるjQuery集です。 かっこいいものが揃っていますね。いくつかご紹介します。 …

category: Technology

date: February 19, 2010

ラベル入りのフォーム要素を実装する方法2つ

最近のフォーム要素にはラベル（透かしテキスト）を入れているものが多いですが、通常の実装方法は以下のソースで可能ですね。JavaScriptのonfocus、onblurイベントハンドラでvalueを切り替えています。 XHTML, JavaScript <input t …

category: Technology

date: February 18, 2010

jQueryで作る垂直メニュー7

jQueryでシンプルな動きのメニューを作りたい。 そんなときにおすすめなのが、『7 Vertical Menus With jQuery Effects』。jQueryで作る垂直メニュー集です。 メニューにマウスオーバーすると、　中のテキストがすっと右にずれたり、背景がびよ …

category: Technology

date: February 13, 2010

かっこいいアニメーションでフィルタ&並べ替えができる『Qucicksand』

フィルタ&ソートにもかっこいい演出をしたい。 そんなときにおすすめなのが、『Quicksand』。かっこいいアニメーションでフィルタ&並べ替えができる、jQueryプラグインです。 「Filter by type」と「sort by」からフィルタ / ソー …

category: Technology

date: February 09, 2010

説明を追加できる、jQueryを使ったドロップダウンメニュー

グローバルメニューに説明を加えたい。 そんなときに使えそうなのが、『jDiv』。説明を追加できる、jQueryを使ったドロップダウンメニューです。 メニューにマウスオーバすると、メニューのリストと説明の入る部分が大きく表示されますね。ふわっと表示される動きが気持ちいいです。 …

category: Technology

date: February 07, 2010

フッタをブラウザ下部に固定配置するCSSテクニック

フッタをブラウザ下部に固定配置したい。 そんなときにおすすめなのが、『cleanstickyfooter』。フッタをブラウザ下部に固定配置するCSSテクニックです。 IE6とそれ以前のブラウザ用に、ハックは1つしか使っていないとのこと。min-heightの部分のハックのよう …

category: Technology

date: February 07, 2010

WordPressのブログ以外の使い方10

WordPressをECサイトやwikiのCMSとして使いたい。 そんなときにおすすめなのが、『10 Alternative Uses for WordPress』。WordPressのブログ以外の使い方です。 有料のものが多いですが、便利そうですね。 eCommerceWo …

category: Technology

date: February 06, 2010

CSS3でIEにも角丸を適用させるhtcファイル

CSS3で最も簡単にクロスブラウザの角丸を実装したい。 そんなときにおすすめなのが、『curved-corner』。CSS3でIEにも角丸を適用させるhtcファイルです。 Google Codeで、CSS3でIEにも角丸を実装させるファイルが配布されていますね。 クロスブラウ …

category: Technology

date: February 02, 2010

IEをモダンブラウザのように扱う方法10

IEにだけできないことを可能にしたい。 そんなときにおすすめなのが、『10 ways to make Internet Explorer act like a modern browser』。IEをモダンブラウザのように扱う方法です。 便利そうなのが揃っているので、ざっとご紹 …

category: Technology

date: January 26, 2010

紙芝居のようなスライドショーを実装するjQueryプラグイン

ちょっと変わったスライドショーを実装したい。 そんなときにおすすめなのが、『sexyCycle image jQuery plugin』。紙芝居のようなスライドショーを実装するjQueryプラグインです。 画像をクリックすると、横にすっすっとスライドしますね。加速減速する動き …

category: Technology

date: January 21, 2010

かっこいいCSSナビゲーション30

クールなナビゲーションを実装したい。 そんなときにおすすめなのが、『30 Cutting Edge Examples Of CSS Navigation』。かっこいいCSSナビゲーション集です。 気になったのをいくつかご紹介しますね。 Pixlogixマウスオーバー時にツール …

category: Technology

date: January 17, 2010

動きの洗練されたjQueryのスライドギャラリー

かっこいいスライドギャラリーを実装したい。 そんなときにおすすめなのが、『GalleryView』。動きの洗練されたjQueryのスライドギャラリーです。 キャプションを付けられたり、画像だけフェードイン&アウトで切り替えたり、いろいろなタイプがありますね。しかも動 …

category: Technology

date: January 14, 2010

iPhoneでも動作するFlash実行環境『Gordon』

githubに、GordonというオープンソースのFlashランタイムがリリースされています。JavaScriptで作られていますね。 gordon.jsを読み込んで、bodyのonloadでswfを指定することで動くようです。iPhoneでも表示されますね。 デモは以下から …

category: Technology

date: January 12, 2010

クールで動きが気持ちいいjQueryのツールチッププラグイン

かっこいいツールチップを実装したい。 そんなときにおすすめなのが、『TIp Tip』。クールで動きが気持ちいいjQueryのツールチッププラグインです。 「tip_bottom」「tip_right_top」のように表示位置を指定できるほか、実装方法も簡単そうですね。 ライセ …

category: Technology

date: January 10, 2010

素晴らしい3DのFlashサイト50

かっこいいFlashサイトが作りたい。 そんなときに参考になるのが、『50 Superb 3D Flash Websites You Must See!!!』。素晴らしい3DのFlashサイトです。 かなり刺激的なものが揃っていますね。 Element動きが大胆でとてもクール …

category: Technology

date: January 10, 2010

jQueryを使った画像ギャラリープラグイン集

Flashを使わずに画像を魅力的に見せたい。 そんなときにおすすめなのが、『37 Fresh jQuery Image And Gallery Display Solutions』。jQueryを使った画像ギャラリープラグイン集です。 結構かっこいいのが揃っていますね。 Im …

category: Technology

date: January 09, 2010

Twitterのような通知バーを実装するjQueryプラグイン

ポップアップメッセージをありきたりのものにしたくない。 そんなときにおすすめなのが、『Notify Bar』。Twitterのような通知バーを実装するjQueryプラグインです。 Twitterで投稿したりすると、ブラウザの上部にぴょこっと表示されるメッセージですね。dela …

category: Technology

date: January 08, 2010

CSSとjQueryで作るカラフルなアナログ時計

Flashを使わずにアナログ時計を作りたい。 そんなときにおすすめなのが、『A Colorful Clock With CSS & jQuery』。CSSとjQueryで作る、カラフルなアナログ時計です。 1秒ごとに数字と、画像が動いている見せ方ができますね。仕組み …

category: Technology

date: January 07, 2010

Snow Leopardでファンクションキーが効かないときの対処法

Snow Leopardにしてから、よくファンクションキーが効かなくなって困っていたんですが、ふと調べてみると解決方法があったようです。 Terminalから、以下のコマンドを打って、Finderを再起動することでひとまず効くようになります。 killall Dock Exp …

category: Technology

date: January 05, 2010

クールなjQueryのlightbox系スクリプト集

サイトのデザインに合うlightbox系スクリプトを探している。 そんなときにおすすめなのが、『The Best jQuery Lightbox Scripts』。クールなjQueryのlightbox系スクリプト集です。 知らないのもあったりでいい感じのものが揃っていますよ …

category: Technology

date: January 05, 2010

jQueryで実装するクールなスライダー

jQueryでかっこいいスライダーを実装したい。 そんなときにおすすめなのが、『bxSlider』。jQueryで実装するクールなスライダーです。 ↑は、「prev」、「next」をクリックすると、シュッシュッとスライドしてコンテンツが切り替わるタイプ。他に以下の3つのスライ …

category: Technology

date: January 03, 2010

ソフトウェアキーボードを実装するjQueryプラグイン

フォームのinputやtextarea要素にキーボード機能をつけたい。 そんなときにおすすめなのが、『jQuery Keypad』。ソフトウェアキーボードを実装するjQueryプラグインです。 ↑の例は、inputにフォーカスすると、キーボードが現れるタイプです。キーボードに …

category: Technology

date: January 02, 2010

PHPとFlashで動的なグラフを作るスクリプト

アニメーションするグラフを、DBと連携して作成したい。 そんなときにおすすめなのが、『PHP/SWF Charts』。PHPとFlashで動的なグラフを作るスクリプトです。 PHP/SWF Charts is a simple, yet powerful PHP tool t …

category: Technology

date: January 02, 2010

HTMLからCSSのベースを作ってくれるサービス

テーブルなどをHTMLで組んだ後に、CSSコーディングを簡略化したい。 そんなときにおすすめなのが、『Primer』。HTMLからCSSのベースを作ってくれるサービスです。 HTMLをペーストして、「PRIME IT」ボタンを押すと、idやclass名からCSSのベースを作っ …

category: Technology

date: December 29, 2009

WordPressのダッシュボードハックス

WordPressのダッシュボード（管理画面）をカスタマイズしたい。 そんなときにおすすめなのが、『10 WordPress dashboard hacks』。WordPressのダッシュボードハックスです。 クライアントにCMSとしてWordPressを提案して納品する場合 …

category: Technology

date: December 26, 2009

WordPressでパンくずリストを表示するシンプルなコード

WordPressでパンくずリストを使いたい。 そんなときにおすすめなのが、『How To: Breadcrumbs in WordPress』。WordPressでパンくずリストを表示するシンプルなコードです。 ネストされたカテゴリーやページにも対応しているようですね。 パ …

category: Technology

date: December 22, 2009

Appleのようなデザインをするためのコーディングチュートリアル15

Appleのサイトのような、かっこいいインターフェースを実装したい。 そんなあなたにおすすめなのが、『15 Incredible Apple Webdesign Style Coding Tutorials』。Appleのようなデザインをするためのコーディングチュートリアル集 …

category: Technology

date: December 20, 2009

グラフを描画するための便利なFlashコンポーネント10

Flashでグラフを描きたい。 そんなときにおすすめなのが、『10 Useful Flash Components for Graphing Data』。グラフを描画するための便利なFlashコンポーネントです。 いい感じのが揃っていますね。 Open Flash Chart …

category: Technology

date: December 20, 2009

jQueryで作る軽快なスライドナビゲーション

マウスオーバーすると、すっとスライドするナビゲーションが作りたい。 そんなときにおすすめなのが、『hoverFlow』。jQueryで作る軽快なスライドナビゲーションです。 マウスオーバーすると右にすっと移動して、マウスアウトすると元の位置に戻ります。動きが軽快でいいですね。 …

category: Technology

date: December 19, 2009

jQueryで実装する、奥行きのある回転テーブルの動き

普通と違った、奥行きのあるインターフェースを実装したい。 そんなあなたにおすすめなのが、『jQuery Roundabout』。jQueryで実装する、奥行きのある回転テーブルの動きです。 シンプルなul, liのHTMLを、奥行きのあるインターフェースにしてくれます。しかも …

category: Technology

date: December 19, 2009

なにこれおもしろい2

またなにこれおもしろいなサイトを見つけました。 「Play」を押すと、小ウィンドウが現れてピンポンが始まります。それだけです。それだけなう！ 途中ポップアップがブロックされたりしますが気にしないでください。 「Human」に2つともチェックを入れるとかなり忙しいことになります …

category: Technology

date: December 17, 2009

CSS３を使った、強くて速いデザイン例

CSS3でできることをいち早く知っておきたい。 そんなあなたにおすすめなのが、『Stronger, Better, Faster Design with CSS3』。CSS３を使った、強くて速いデザイン例です。 以下の例が紹介されています。 Inline Form Label …

category: Technology

date: December 16, 2009

Facebookスタイルのインターフェースを実装するスクリプト・素材20

Facebookのようなかっこいいインターフェースを実装したい。そんなあなたにおすすめなのが、『20 Excellent Facebook Scripts and Resources』。Facebookスタイルのインターフェースを実装するスクリプト・素材20です。 とてもかっ …

category: Technology

date: December 14, 2009

デザインのインスピレーションになるWordPressデザイン55

WordPressを洗練されたデザインにしたい。そんなあなたにおすすめなのが、『55 Excellent WordPress Site Design for Design Inspiration』。デザインのインスピレーションになるWordPressデザインです。 いくつかご …

category: Technology

date: December 11, 2009

とてもシンプルなjQueryのタブコンテンツ

シンプルなタブ切り替えコンテンツを作りたい。そんなときにおすすめなのが、『Simple jQuery tabs』。とてもシンプルなjQueryのタブコンテンツです。 activeクラスをJavaScriptでaddしたり、removeしたりしているようですね。HTMLも含めて …

category: Technology

date: December 10, 2009

マウスオーバーするとスライド式で現れるナビゲーション

Codropsというサイトで、マウスオーバーするとスライド式で現れるナビゲーションの作り方が公開されています。 ul,liのシンプルなメニューに、jQueryで動きをつけています。動きがスムーズで気持ちいいですね。 デモは以下から。手書きのデザインでなかなか斬新なものになって …

category: Technology

date: December 09, 2009

かっこいいjQueryのスライダー25

WebDesignFanで、かっこいいjQueryのスライダーがまとまっています。 いくつかご紹介しますね。似たようなエントリーを書いていますが、あまり見たことのないものがいろいろあります。 jQuery Plugin – Feature List左にナビゲーショ …

category: Technology

date: December 05, 2009

jQueryのイメージギャラリープラグイン20

speckyboyで、jQueryのイメージギャラリープラグインがたくさん紹介されています。 いくつかご紹介しますね。 ColorBox – Customizable Lightbox Plugin画像だけでなく、スライドショー、HTML、Flashをlightb …

category: Technology

date: December 04, 2009

サイト内リンクでページ遷移するAjaxサイトの作り方

yensdesignというサイトで、サイト内リンクでページ遷移するAjaxサイトの作り方が公開されています。 ↑がナビゲーションになっていて、クリックすると、「#home」や「#tutorials」という形でパラメータがついて、ページ遷移します。 リロードが必要ないので、ペー …

category: Technology

date: December 03, 2009

ツールチップ表示に使えるかっこいいスクリプト35

VANDELAY DESIGNで、ツールチップ表示に使えるかっこいいスクリプトがまとまっています。 かっこいいものが揃っていますね。 Prototip 2Prototypeを使って、シンプルなものや手の込んだツールチップを作成 Coda Popup BubblesCodaで使 …

category: Technology

date: November 30, 2009

ピュアCSSで作る効果的なエフェクト23

web anthologyで、ピュアCSSで作る効果的なエフェクトが紹介されています。 ざっといくつかご紹介。 3-state Button using CSS通常時、マウスオーバー時、クリック時の3種類のボタンをCSSスプライトで作るチュートリアル Pure CSS Pol …

category: Technology

date: November 29, 2009

フレッシュで便利なjQueryプラグイン5

aext.netで、フレッシュで便利なjQueryプラグインが紹介されています。 ざっとご紹介しますね。 jQSlickWrapfloatした画像の周りにテキストを配置させるプラグイン jQuery Slider plugin (Safari style)Safariスタイル …

category: Technology

date: November 25, 2009

Mac OS X用の幻想的なテキストエディタ

OMMWRITERというアプリを見つけました。Mac OS X用のテキストエディタです。 起動すると、フルスクリーンモードで、↑のような画面が立ち上がります。ドットのラインで枠が表示されて、テキストの大きさを変えたりウェイトを変えたりは、右側にあるアイコンから可能です。アイコ …

category: Technology

date: November 24, 2009

新しくて便利なWordPressのプラグイン20+

net tuts+で、新しくて便利なWordPressのプラグインがたくさん紹介されています。 いくつかご紹介しますね。 Drag To ShareMashableに見られる、画像をドラッグしてTwitterなどに投稿できるプラグイン Paginatorスクロールでページを切 …

category: Technology

date: November 23, 2009

建設業を多くの人に知ってもらうために生まれたサイト『BUILDUP！』

ブロガーズラウンジからの案内をもらったのでご紹介。 建設業のサイトは普段見ないですが、すごくかっこいいサイトになっています。 以下の4つのコンテンツが用意されていますね。 Kensetsu FILMS明日をつくる建設。その「今」を映し出す建設ドキュメンタリー BUILDUP …

category: Technology

date: November 22, 2009

WordPressのアクセス解析用プラグイン集

WebDesignFanで、WordPressのアクセス解析用プラグインがまとまっています。 いくつかご紹介しますね。 Google Analyticatorテンプレートを編集不要で、Google Analyticsの解析を可能にするJavaScriptを追加する WP-St …

category: Technology

date: November 21, 2009

Webデベロッパーのためのフォトギャラリー作成スクリプト

TutZoneというサイトで、Webデベロッパーのためのフォトギャラリー作成スクリプトがいろいろと紹介されています。 いくつかご紹介しますね。 Carousel.usMooToolsを使った3DのJavaScriptカルーセル。Firefox 2+, Opera 9+, Sa …

category: Technology

date: November 16, 2009

魅力的なCSSメニュー10

DESIZN TECHで、魅力的なCSSメニューの作り方が紹介されています。 ↑のようなメニューですね。シンプルですが、MIT & GPLライセンスのjQuery Corner Pluginで角丸を実装していたりします。 ソースがダウンロードできるので、参考に一度見 …

category: Technology

date: November 15, 2009

TwitterとWordPressを連携するツール7

makeuseof.comで、TwitterとWordPressを連携するツールが紹介されています。 ざっといくつかご紹介。 Twitter Avatars in CommentsメールアドレスからTwitterのアイコンを調べてアバターとして表示してくれる Twitip I …

category: Technology

date: November 13, 2009

かっこいいデザインのナビゲーションメニュー40

VANDELAY DESIGNで、かっこいいデザインのナビゲーションメニューがたくさん紹介されています。 ざっといくつかご紹介。 ↑は、Utah Travel。 MailChimp Michael Dick Mission Community Church Southern …

category: Technology

date: November 10, 2009

シンプルだけど便利なCSSプロパティー5

WebDesignerWallで、シンプルだけど便利なCSSプロパティーが紹介されています。 ざっとご紹介しますね。 CSS Clip画像にレクタングルのマスクをかける Min-height 高さの最小値を指定する「min-height」。コンテンツの高さがサイドバーよりも低 …

category: Technology

date: November 08, 2009

WordPressを魅力的にするプラグイン9

woorkupで、WordPressを魅力的にするプラグインが紹介されています。 ざっといくつかご紹介。 I Like Thisクリックで記事に対して「気に入った」投票をすることができる Quick AdsenseGoogleアドセンスのコードを簡単なコードで貼付けられるプラ …

category: Technology

date: November 06, 2009

新しくてかっこいいWordPressテーマ40

speckyboyで、新しくてかっこいいWordPressテーマがたくさん紹介されています。 ざっといくつかご紹介。 ↑はMonkeyPr。 Touchriver Maalaga Selecta AppCloud – Ecommerce Theme シンプルなテー …

category: Technology

date: November 03, 2009

リアルタイムにバリデートしてくれるクールなJavaScript

Validatious2.0という、リアルタイムにバリデートしてくれるクールなJavaScriptを見つけました。 emailを必須にしたい場合、以下のようにシンプルな書き方でバリデートすることができるようです。 <input type="text" …

category: Technology

date: November 02, 2009

デベロッパーなら知っておきたいCSSテクニック

ExtraTutsというサイトで、デベロッパーなら知っておきたいCSSテクニックが紹介されています。 いくつかご紹介しますね。 CSS Browser SelectorOS・ブラウザごとにCSSを切り替えられる1行のJavaScript adding a CSS StyleS …

category: Technology

date: November 01, 2009

jQueryで作るランダム表示・ローテーションするコンテンツ

css globeで、jQueryで作るランダム表示・ローテーションするコンテンツの作り方が紹介されています。 デモは以下から。 リロードごとにランダム表示 ランダムローテーション どちらもJavaScriptは短くてシンプルになっていますね。 一度見てみてください。 Sim …

category: Technology

date: October 31, 2009

独自のWordPressテーマを作るチュートリアル20+

TUTORIAL LOUNGEで、独自のWordPressテーマを作るチュートリアルがたくさん紹介されています。 ざっといくつかご紹介。 Photoshopで作るモックアップ（PSDダウンロード付き） WordPressのテーマを一から作る方法 Part 1（PSDダウンロー …

category: Technology

date: October 30, 2009

テーブル周りの素晴らしいjQueryプラグイン30

jQuery Wisdomというサイトで、テーブル周りの素晴らしいjQueryプラグインが紹介されています。 ざっといくつかご紹介。 graphTable: graph data from HTML table using flotHTMLのテーブルデータからグラフを作ってく …

category: Technology

date: October 30, 2009

HTML5のクールなサイト

DIVE INTO HTML5というサイトを見つけました。 HTML5でサイトを作っていますね。フォントには@font-faceを使って、EOTファイルを使っています。 HTML5からWeb Fontsとして、サーバにフォントファイルをアップロードすることで、ユーザのPCにイ …

category: Technology

date: October 29, 2009

読んでおきたいユーザビリティーに関するブログ10

UX Boothというサイトで、読んでおきたいユーザビリティーに関するブログがまとまっています。 ざっといくつかご紹介。 Usability Post見た目だけでなく、機能的に美しいデザインをテーマにしているブログ Boxes and Arrowsグラフィックデザインやインタ …

category: Technology

date: October 29, 2009

jQueryベースのWordPressプラグイン25

CSS REFLEXというサイトで、jQueryベースのWordPressプラグインがたくさん紹介されています。 いくつかご紹介しますね。 WordPress jQuery Lightbox Pluginページにオーバーレイで画像を表示できる WP-Slimbox2 Plug …

category: Technology

date: October 28, 2009

関連するエントリーを表示しました。

ふと思い立って、エントリー下部に関連するエントリーを表示しました。 プラグインとかもいろいろ試したんだけど、小粋空間さんの以下のエントリーを参考に構築しました。 ブログ記事に同一カテゴリーのブログ記事リストを表示（MT4版） ソースは以下の通り。 関連するエントリーのソース …

category: Technology

date: October 28, 2009

高さが可変するタブ型コンテンツの作り方

CSS TRICKSで、高さが可変するタブ型コンテンツの作り方が紹介されています。 タブをクリックすると、フェードイン&アウトでコンテンツが切り替わって、高さもコンテンツの量に合わせて可変しますね。 デモは以下から。CSS TRICKSのサイドバーに実装されています …

category: Technology

date: October 26, 2009

Mootoolsでレトロなパタパタ時計を作るチュートリアル

net tuts+で、Mootoolsでレトロなパタパタ時計を作るチュートリアルが紹介されています。 1秒ごとに、パタッパタッとめくれる時計ですね。 上の部分と下の部分でHTMLを分けていて、CSSでスタイリング、Mootoolsで動きをつけているようです。時計もjavasc …

category: Technology

date: October 24, 2009

ソースコードを書くときのスタイルシート

最近ソースコードを書く機会が時々あるので、HTMLとCSSを整備してみました。 実体参照への変換は、今までDreamweaverのデザインビューにペーストして、コードビューで変換されたものを使っていたんだけど、<br />が入っちゃうんですよね。 なのでakiya …

category: Technology

date: October 22, 2009

フェードしながらスライドするjQueryプラグイン

POSITION ABSOLUTEというサイトで、フェードしながらスライドするjQueryプラグインの実装方法が紹介されています。 トグルスイッチをクリックすると、中のコンテンツがフェードしながらスライドして表示されます。 デモは以下から。 View demo ソースコードは …

category: Technology

date: October 22, 2009

jQueryを使ってCSSを補強するテクニック15

Web Developer Plusで、jQueryを使ってCSSを補強するテクニックが紹介されています。 ざっといくつかご紹介。 jQueryでカラムの高さを統一するequalHeights pluginを使って、一行でカラムの高さを同じにする 入力中のフォームをハイライト …

category: Technology

date: October 21, 2009

WordPressのコーディングテクニック10

Smashing Magazineで、WordPressのコーディングテクニックが紹介されています。 これは自分的にもタイムリー。ざっとご紹介しますね。 エントリーごとのスタイルを変えるpost_class()を使って、「.henry」「.sticky」「.category- …

category: Technology

date: October 20, 2009

サイトを魅力的にするjQuery10+

cats who codeで、サイトを魅力的にするjQueryがいろいろ紹介されています。 いくつかご紹介。 Easy Display Switch with CSS and jQueryボタンクリックでリスト表示とカラム表示を切り替えられる Turn any webform …

category: Technology

date: October 20, 2009

ユーザーエクスペリエンスを向上させるjQueryプラグイン7

Shiny Blogで、ユーザーエクスペリエンスを向上させるjQueryプラグインが紹介されています。 いくつかご紹介しますね。 iconDockMacのDock風拡大エフェクト Simple Controls Gallery 自動でスライドするイメージギャラリー Flip! …

category: Technology

date: October 20, 2009

CSS3・HTML5のブラウザ対応状況一覧

Deep Blue Skyというサイトで、CSS3・HTML5のブラウザ対応状況一覧がまとまっています。 自分のブラウザのCSS3・HTML5対応状況を調べてくれるjavascriptライブラリ、Modernizrを使って調べたようですね。 ↑はMac Firefox3.5。 …

category: Technology

date: October 19, 2009

Windows,Mac,Linuxで使えるエディタ18

net tuts+で、Windows,Mac,Linuxで使えるエディタが紹介されています。 エディタは自分に合った、理想的なものを探したいですよね。 いくつかご紹介します。 Windows用 Visual Web Developer無料で使えるエディタ phpDesigne …

category: Technology

date: October 18, 2009

jQueryで作るメガメニュー

iHwy, Inc.というサイトで、jQueryで作るメガメニューが紹介されています。 ↑のようにマウスオーバーすると、その中に含まれるリストが綺麗なレイアウトで表示されます。ECサイトなど、たくさんのリンクがある場合に有効そうですね。 デモは以下から。 View the D …

category: Technology

date: October 16, 2009

Flickrのティッカーを作りました。

前から作りたかったFlickrのティッカーを作りました。AS3ですね。ばり楽しい。サイドバーで順番にフェードイン&アウトして表示するようにしています。 Flash Playerは10でもいいかな、と思ったんだけど、ユーザに影響が少ないように9で書き出しています。 j …

category: Technology

date: October 15, 2009

jQueryのスライドショーがかっこいいpinch/zoomのサイト

モバイル&Webアプリの制作チームであるpinch/zoomのサイトがかっこいいです。 jQueryを使ったスライドショーをメインに置いていて、とてもクールですね。遷移する感じが気持ちいいし、タイポグラフィーやイラストもすごくいいです。 全体的に絶妙な角丸のインター …

category: Technology

date: October 14, 2009

Mac + FlashDevelop + Flash CS4の環境を整えた

AS使いが絶賛するFlashDevelopを前から使いたかったんですが、Windows版しかなくて使っていなかったんですね。だけど思い立って設定したぞ。ばり快適。 MacのParallelsのWindows XPでFlashDevelopを動かして、そのままswfをパブリッシ …

category: Technology

date: October 10, 2009

マウスオーバー時にリンクが右にずれるjQueryプラグイン

David Walsh Blogで、マウスオーバー時にリンクが右にずれるjQueryプラグインが公開されています。 ↑のように、マウスオーバーするとリンク部分がすっと右に移動しますね。 以前はMooToolsのバージョンを作っていたとのことですが、今回jQueryのバージョン …

category: Technology

date: October 10, 2009

使えるユーザビリティーガイドライン10

遅いエントリーですが、Smashing Magazineで使えるユーザビリティーガイドラインがまとまっています。 ざっとご紹介しますね。 1. フォームのラベルはフィールドの上がベスト study by UX Mattersによると、フォームのラベルはフィールドの上が理想的と …

category: Technology

date: October 08, 2009

ぐにゃぐにゃ動く WONDERWALL INC. のサイト

久々に面白い動きのサイトを見つけました。WONDERWALL INC.というインテリアデザイン会社のサイトです。 マウスオーバーするとぐにゃぐにゃ動いて、クリックするとビビッドな色のページに遷移して、次のページに行くとまたぐんにゃっとかっこよく遷移してくれます。なんだこれかっ …

category: Technology

date: October 08, 2009

コメントセクションを充実させるWordPressプラグイン33

1st webdesignerで、コメントセクションを充実させるWordPressプラグインが紹介されています。 ざっといくつかご紹介。 » WP Ajax Edit Comments 　ユーザと管理者にコメントの編集を可能にするプラグイン。ユーザには回数制限があ …

category: Technology

date: October 04, 2009

URLを短縮するフリーのPHPスクリプト

BRIAN CRAYというサイトで、URLを短縮するフリーのPHPスクリプトが配布されています。 短縮URLと言えば、Twitterなどで使われている、bit.lyなどのサービスですね。 Apache,PHP,MySQL環境で動くとのことで、SQL文も用意されています。 ライ …

category: Technology

date: October 03, 2009

Mootoolsを使ったlightboxスクリプトTOP10

LINE25で、Mootoolsを使ったlightboxスクリプトTOP10がまとまっています。 ざっといくつかご紹介。 » Smoothbox 　画像、インナーHTML、Ajax、iframeをサポート » Multibox 　画像、インナーHTML …

category: Technology

date: October 02, 2009

jQueryで作る便利なツールチップ25

speckyboyで、jQueryで作る便利なツールチップが紹介されています。 ざっといくつかご紹介。 » qTip 　ツールチップに画像を表示させたり、コンテンツの入ったボックスを表示したりできる » jQuery Tooltip – T …

category: Technology

date: September 30, 2009

有料のテーマに匹敵するフリーのWordPressテーマ20

遅いエントリーですが、Design Reviverで有料のテーマに匹敵するフリーのWordPressテーマが紹介されています。 ざっといくつかご紹介。 ↑はSubtly Made Phyto WP Premium Theme KeKo Zinmag Futura 背景やサイド …

category: Technology

date: September 30, 2009

刺激的なjQueryプラグイン37

Listelogで、刺激的なjQueryプラグインが紹介されています。 いくつかご紹介しますね。 » Digg Header 　Diggヘッダーのレプリカ。可変幅とドロップダウンメニューなどを実装 » jMP3 　ほとんどのサイトで直接MP3を再生でき …

category: Technology

date: September 29, 2009

あまり知られていない便利なJavascriptライブラリ5

nettuts+で、あまり知られていない便利なJavascriptライブラリが紹介されています。 ざっとご紹介。 ・IE6での透過PNG表示を可能にする、DD_BelatedPNG ・好きなフォントでテキストを表現する、Cufon　※日本語非対応 ・Firefox以外のブラウ …

category: Technology

date: September 27, 2009

素晴らしいjQueryチュートリアル集

AjaxLineで、素晴らしいjQueryチュートリアルがまとまっています。 ざっといくつかご紹介。 » Animated Menu Using jQuery 　jQueryを使ったアニメーションするメニュー » How to create tab w …

category: Technology

date: September 24, 2009

PHPで確認メール付きのユーザー登録フォームを作るチュートリアル

nettuts+で、PHPで確認メール付きのユーザー登録フォームを作るチュートリアルが紹介されています。 仮登録後、確認メールが送られてきて、URLをクリック後に本登録となるシステムですね。 DBの設計も書かれていて、本登録ユーザーに対してはactiveフラグを用意して、0と …

category: Technology

date: September 22, 2009

ポートフォリオ・フォトログ用のWordPressテーマ14

The Photo Argusというサイトで、ポートフォリオ・フォトログ用のWordPressテーマが紹介されています。 いくつかご紹介。 ↑はGrace。 Viewport Photo-Biyori Spotless Shutterbug かなりかっこいいものが揃っています …

category: Technology

date: September 22, 2009

サムネイルをスムーズに拡大するjQuery

Build Internet!で、Elastic Thumbnail Menuというサムネイルをスムーズに拡大するjQueryが紹介されています。 これはかなりいいですね。マウスオーバーすると、うにゅ、うにゅっとサムネイルが拡大します。動きがとても気持ちいい。 デモは以下から …

category: Technology

date: September 21, 2009

jQueryを使ったドロップダウンメニューの作り方

woorkで、jQueryを使ったドロップダウンメニューの作り方が紹介されています。 ↑のようなシンプルで必要充分なメニューですね。マウスオーバーするとメニューの背景色が変わったり、レイアウトもかっちりしているので使いやすそうです。 HTML / CSSとjQueryのコード …

category: Technology

date: September 21, 2009

lightbox系のシンプルに画像を拡大できるJavaScript

ちょい遅いですが使いやすそうなのでエントリー。 DYNAMICDRIVEというサイトで、lightbox系のシンプルに画像を拡大できるJavaScriptが紹介されています。 ヘッダでjsを読み込んで、画像にclass=”magnify”を指定すること …

category: Technology

date: September 21, 2009

ブログ復旧しました。

やっと復旧しました。。。。。どうなるかと思った。 snow leopardにアップグレードしてだいぶ落ち着いてきたかな、と思っていたら、今度はこのブログにアクセスしづらくなりました。 まぁそういうこともあるわな、と2、3日様子を見ていたんですが、一向によくならなかったのです。 …

category: Technology

date: September 14, 2009

snow leopardにアップグレードしました。

さて、、やっとsnow leopardにアップグレードできて、安定してきました。 先週の金曜日からずーっとやっていたのです。。 はじめ10.5.8のままインストールディスクを入れて、まぁ大丈夫かな、と勢いで上書きアップグレードしようとすると、1時間後に「インストールに失敗しま …

category: Technology

date: September 14, 2009

Webデザインに使えるjQuery UIライブラリ

jQuery TOOLSというjQueryのUIライブラリを見つけました。 ↑のようなスライドショーや、バブル型でふわっと浮き上がるツールチップ、気持ちのいいフェードイン&アウトで切り替わるコンテンツなど、たくさんのエフェクトが紹介されています。 以下からデモを見ら …

category: Technology

date: September 13, 2009

WordPressのチートシート

nettuts+で、WordPressのチートシートが紹介されています。 テーマの構造やループ、テンプレートタグ、ナビゲーションメニューの書き方などがまとまっています。 シンプルで見やすいので、一度見てみてはいかがでしょうか？ » WordPress Cheat …

category: Technology

date: September 10, 2009

Googleカスタム検索を導入しました。

諸々ブログを整備中。Googleカスタム検索を導入しました。 前までGoogleにインデックスされていないページは検索対象に含まれないと思っていたから、導入は考えていなかったんだけど、調べてみるとGoogleカスタム検索は独自のインデックスをしてくれるようで、問題なさそうだか …

category: Technology

date: September 10, 2009

魅力的なUIにするためのjQueryプラグイン20

Six Revisionsで、魅力的なUIにするためのjQueryプラグインが紹介されています。 ざっといくつかご紹介。 » SimpleModal 　シンプルなモーダルウィンドウ » Panel Gallery 　ユニークなトランジションを持つスライ …

category: Technology

date: September 09, 2009

WordPressをカスタマイズして自分のものにする10の方法

Pro Blog Designで、WordPressをカスタマイズして自分のものにする方法が紹介されています。 ざっとご紹介。 1. カスタムのgravatarを使う 2. コメントをスタイリングする 3. アバウトページを充実させる 4. フッターを効果的に使う 5. ユニ …

category: Technology

date: September 08, 2009

自動でスクロールするシンプルなニュースティッカーの作り方

nettuts+で、自動でスクロールするシンプルなニュースティッカーの作り方が公開されています。 id=”ticker”のdlを用意して、dt、ddタグでリストを記述。CSSを指定して、JavaScriptを記述。マウスオーバーするとストップするティッ …

category: Technology

date: September 08, 2009

超クールなJavaScriptプラグイン40

nettuts+で、超クールなJavaScriptプラグインがまとまっています。 いくつかご紹介しますね。 » JQuery Validate 　jQueryによるクライアントサイドのバリデート » PrettyCheckboxes – j …

category: Technology

date: September 06, 2009

jQueryを使ったドラッグ&ドロップパネルのチュートリアル

Web Designer plusで、jQueryを使ったドラッグ&ドロップパネルチュートリアルが紹介されています。 iGoogleやWordPressの管理画面で見られるインターフェースですね。 HTMLとCSS、jQueryのソースが公開されています。 ソートの …

category: Technology

date: September 04, 2009

WordPressを高速化するテクニック18

wpbeginnerで、WordPressを高速化するテクニックが紹介されています。 いくつかご紹介しますね。 ・キャッシュする 　WP Super Cacheプラグインを使ってページをキャッシュ ・直リンクを禁止する 　以下の.htaccessで直リンクを禁止 #disab …

category: Technology

date: September 03, 2009

MacBookのスタンドを買いました。

デュアルにするとディスプレイとMacBookの高さが合わなかったので、スタンドを購入。GriffinのElevator Laptop Standです。 これでワークスペースはほぼ完成だな。このスタンドはすごくいいですね。MacBookを乗せると、24インチディスプレイのちょう …

category: Technology

date: September 02, 2009

知っておきたい使えるCSSテクニック25

Web Developer plusで、知っておきたい使えるCSSテクニックが紹介されています。 いくつかご紹介しますね。 ・テキストハイライト時の色を変更する SafariやFirefoxでテキストを選択した時の色を変更できる。コードサンプルは以下 ::selection{ …

category: Technology

date: August 28, 2009

画像hover時にズームアイコンを表示するチュートリアル

JANKOで、画像hover時にズームアイコンを表示するチュートリアルが紹介されています。 jQueryを使ったフェードイン&アウトのサンプルがかっこいいです。 デモは以下から。 » View live demo spanエレメントを動的に削除して、アニ …

category: Technology

date: August 27, 2009

フォームを使いやすくするためのjQueryプラグイン&チュートリアル20

speckyboyで、フォームを使いやすくするためのjQueryプラグイン&チュートリアルがまとまっています。 いくつかご紹介しますね。 » In-Field Labels jQuery Plugin 　inputの中に透かしのラベル名を入れられるプラグ …

category: Technology

date: August 21, 2009

フリーのjQueryコンテンツスライダー15

VISIONWIDGETというサイトで、フリーのjQueryコンテンツスライダーがまとまっています。 ざっといくつかご紹介。 » jFlow 　かわいいフォトスライダー » Create Featured Content Slider Using jQ …

category: Technology

date: August 21, 2009

画像にオーバーレイのキャプションをつけられるjQuery

Quenessで、jQueryを使って画像にオーバーレイのキャプションをつけるサムネイルギャラリーの作り方が紹介されています。 ソースは以下のようになっていて、とてもシンプルですね。 <div class="photo"> <div cl …

category: Technology

date: August 19, 2009

Webデザイナーのための美しいjQueryプラグイン22

Tutorial9で、Webデザイナーのための美しいjQueryプラグインが紹介されています。 ざっといくつかご紹介。 » jQuery.popeye – an inline lightbox alternative 　lightboxをギャラリーのよ …

category: Technology

date: August 18, 2009

画像以外もOKのクールなスライダー

Anything Sliderというスクリプトを見つけました。かなりすごそうだ。 Slides are HTML Content (can be anything) とのことで、画像以外にもdiv内のタグ（h2,h3やul liなど）をスライドの対象にできるようですね。 オプ …

category: Technology

date: August 15, 2009

プロジェクトに使えるオンラインテキストエディタ8

In The Woodsで、プロジェクトに使えるオンラインテキストエディタが紹介されています。 ざっといくつかご紹介。 » TinyMCE 　web上で最も有名なテキストエディタの一つ » FCKeditor 　TinyMCEに比べて軽い。ファイルマネ …

category: Technology

date: August 13, 2009

新しいWordPressのテクニック&ハック30+

HONGKIATで、新しいWordPressのテクニック&ハックがまとまっています。 いくつかご紹介しますね。 » Antivirus for WordPress 　悪質なインジェクションを関知して警告してくれる » Custom &#821 …

category: Technology

date: August 08, 2009

CSSとjQueryで実装するタブコンテンツ

nettuts+で、CSSとjQueryで実装するタブコンテンツが紹介されています。 タブをクリックすると、アニメーションしながらスムーズにコンテンツを切り替えてくれます。 デモは以下から。 » Demo 一度見てみてください。 » Create a …

category: Technology

date: August 08, 2009

jQueryで作るリアルなホーバーエフェクト

これはすごい。思わずうなってしまった。 Adrian Pelletierさんのブログ&デザインポートフォリオサイトの記事です。 マウスオーバーすると、ふわっとアイコンが浮き上がって、マウスアウトですっと下に落ちます。 落ちた時のバウンドも実装されているので、有機的で …

category: Technology

date: August 07, 2009

jQueryを使ったフェードイン&アウトエフェクト23

GEEK Sucksというサイトで、jQueryを使ったフェードイン&アウトエフェクトが紹介されています。 ざっといくつかご紹介。 » Jquery Fade In.Fade Out 　サイトに来たときには30%の透過、マウスオーバーで100%。画像やテ …

category: Technology

date: August 05, 2009

マウスのスクロールでページネーションを実装するスクリプト

HORINAJAという、マウスのスクロールでページネーションを実装するスクリプトを見つけました。 scriptaculousとjQueryの2パターンがあって、しかもフリーとなっています。 I’m D.Massiani, i developpe this clas …

category: Technology

date: August 04, 2009

ドロップダウンメニューを作るならこのスクリプト

HONGKIATで、ドロップダウンメニューを作るスクリプトがまとまっています。 ざっといくつかご紹介。 » CSS Drop-Down Menu Framework 　GNUライセンスのCSSドロップダウンメニューフレームワーク » CSS Expre …

category: Technology

date: August 03, 2009

クオリティーの高いフリーのWordPress2.7テーマ20

TOXEL.COMで、クオリティーの高いフリーのWordPress2.7テーマが紹介されています。 ざっといくつかご紹介。 ↑はElegant Grunge Theme。 The Unstandard Theme Milano Theme Gallery Theme Type …

category: Technology

date: July 31, 2009

ポートフォリオに使えるフリーのWordPressテーマ

Smashing Magazineで、ポートフォリオに使えるフリーのWordPressテーマが紹介されています。 ちょっとごちゃっとしていますが、ポートフォリオ用っていうのがいいですね。 PSDファイルもダウンロードできるのでデザインの参考になるのではないでしょうか？ ライセ …

category: Technology

date: July 29, 2009

ドロップダウンメニューをjQueryを使ってリデザインする方法

JANKOで、ドロップダウンメニューをjQueryを使ってリデザインする方法が紹介されています。 For me, standard HTML Select element is pretty much annoying. It’s ugly. It can&#82 …

category: Technology

date: July 28, 2009

ブログにかっこいいパーツをつけるチュートリアル10

DESIGNM.AGで、ブログにかっこいいパーツをつけるチュートリアルが紹介されています。 ざっといくつかご紹介。 » Create Fancy Share Box with CSS and jQuery 　マウスオーバでピュッと飛び出すjQueryを使ったソーシ …

category: Technology

date: July 27, 2009

WordPressをカスタマイズするTips10

WPSHOUTというサイトで、WordPressをカスタマイズするTipsが紹介されています。 いくつかご紹介しますね。 ・カスタムフィールドを使わずにトップページにリサイズされたサムネイル画像を表示する 　WebDeveloperPlusを参考に実装 ・ピックアップコンテン …

category: Technology

date: July 26, 2009

jQueryを使ったクリエイティブなイメージギャラリーいろいろ

webstandard blogで、jQueryを使ったクリエイティブなイメージギャラリーが紹介されています。 ざっといくつかご紹介。 » Full screen Image-Gallery 　フルスクリーンのクールなイメージギャラリー » Image …

category: Technology

date: July 25, 2009

トレンドをゆくWordPressテンプレート10

IN THE WOODSで、トレンドをゆくWordPressテンプレートが紹介されています。 ざっといくつかご紹介。 ↑はStylish Grey。 UpTown Atlantica Vanilla Business Planet $25くらいの有料になりますが、他と差別化す …

category: Technology

date: July 23, 2009

他と差別化するナビゲーションデザイン

nettuts+で、ちょっと変わったナビゲーションデザインが紹介されています。 When designing a new site, web designers usually face the age-old question: vertical or horizontal …

category: Technology

date: July 20, 2009

ユーザーをしびれさせるjQueryチュートリアル&プラグイン20

spyrestudiosというサイトで、かなり魅力的なjQueryチュートリアル&プラグインが紹介されています。 ざっといくつかご紹介。 » Creating a Keyboard with CSS and jQuery 　CSSとjQueryでPCのキ …

category: Technology

date: July 17, 2009

PHPで作るオンラインファイルストレージ

nettuts+で、PHPで作るオンラインファイルストレージが公開されています。 In this tutorial, I will show you how easy it is to create an online file storage system with PHP …

category: Technology

date: July 15, 2009

紙の質感が綺麗なフリーのWordPressテーマ

Smashing Magazineで、Paper Wallという紙の質感が綺麗なフリーのWordPressテーマが配布されています。 Download and use the theme for free! You can use the theme for all of y …

category: Technology

date: July 13, 2009

かっこいいボタンを作る方法

GIANT ROBOTSというサイトで、かっこいいボタンを作る方法が紹介されています。 まずPhotoshopを使ってボタンをデザインしていく方法が書いてありますね。レイヤースタイルが細かく書かれているので参考になるのではないでしょうか。 CSSでの実装方法も書いてあります。 …

category: Technology

date: July 11, 2009

WordPressを使っている有名ブランド企業21

wpbegginerというブログで、WordPressを使っている有名ブランド企業が紹介されています。 ざっといくつかご紹介。 » Yahoo » Digg Blog » Ford » Wall Street Journal & …

category: Technology

date: July 10, 2009

美しいデザインのMac&iPhoneアプリ系サイト13

WEB DESIGN LEDGERで、美しいデザインのMac&iPhoneアプリ系サイトが紹介されています。 ざっといくつかご紹介。 ↑はMacRabbit。 atebits Acrylic Tao Effect その他のリストは以下からどうぞ。 » 1 …

category: Technology

date: July 10, 2009

メニューの背景画像をアニメーションで切り替えてくれるjQuery

かなりいいスクリプトを見つけました。 メニューの背景画像をアニメーションで切り替えてくれるjQueryです。 メニューにマウスオーバーすると、ふわーっとアニメーションして画像が切り替わります。Flashじゃなくてもこれでいい感じのが作れますね。 ライセンスはMIT Licen …

category: Technology

date: July 09, 2009

リストからサイトマップを作ってくれる『SlickMap CSS』

SlickMap CSSという、リストからサイトマップを作ってくれるサイトを見つけました。 これは面白いですね。参考にいい感じのデザインでジェネレータを作ってみても面白いかもしれません。 一度見てみてください。 » SlickMap CSS

category: Technology

date: July 07, 2009

サイトをかっこよくするCSSテクニック10

WEB HOSTINGというサイトで、サイトをかっこよくするCSSテクニックが紹介されています。 ざっといくつかご紹介。 » Image gallery with hover box preview 　画像マウスオーバー時に拡大表示してくれる » Al …

category: Technology

date: July 06, 2009

CSSを軽くするステップ5

SOHTANAKAで、CSSを軽くするステップが紹介されています。 同じスタイルを書くときにコロンで区切って書く方法や、同じソースはまとめて1カ所に書く方法、idとclassをうまく使う方法、CSSの簡略表記、@importでスタイルを読み込む方法などがまとまっています。 基 …

category: Technology

date: July 05, 2009

フリーのJavaScriptアニメーションライブラリ

jsAnimというフリーのJavaScriptアニメーションライブラリを見つけました。 examplesのページでデモが見られます。Animate!ボタンをクリックすると、オブジェクトが直線的だったり曲線的に動きますね。 サイト自体もアニメーションして面白い動きをするので、一 …

category: Technology

date: June 27, 2009

PSDからHTML/CSSを作っていくチュートリアル20+

dzineblogで、PSDからHTML/CSSを作っていくチュートリアルが紹介されています。 ざっといくつかご紹介。 ↑はFrom PSD to HTML, Building a Set of Website Designs Step by Step The Design …

category: Technology

date: June 27, 2009

美しいFlashサイト50

Smashing Magazineで、美しいFlashサイトがたくさん紹介されています。 ざっといくつかご紹介。 ↑はOn Toyota’s mind。 Sensisoft Edwin Murat Ganter Portfolio Pantagonia WWF B …

category: Technology

date: June 24, 2009

シンプルなjQueryチュートリアルTOP12

WebAir blogというブログで、シンプルなjQueryチュートリアルが紹介されています。 ざっとご紹介。 » Amazing Music Player Using Mouse Gestures and Hotkeys 　XHTMLとjQueryで実装されたミ …

category: Technology

date: June 23, 2009

シンプルでクールなCSSジェネレータ

Tyler Tateさんによる、The 1KB CSS Gridというサイトを見つけました。 とてもシンプルでクールなCSSジェネレータとなっています。 Downloadボタンをクリックした時のアニメーションがとてもかわいいし、無彩色のグリッドレイアウトも綺麗ですね。右上のF …

category: Technology

date: June 15, 2009

タブで切り替わるインターフェースの決定版

In The WoodsのCoda Slider and More With jQuery Toolsという記事で、jQuery Toolsで実装したCodaのスライダーのようなインターフェースが紹介されています。 デモは以下から。 » View the Exam …

category: Technology

date: June 13, 2009

ドラッグでスクロールできるjQuery

jQuery for Designersというサイトで、ドラッグでスクロールできるインターフェースが紹介されています。 マウスで水平方向にドラッグしてスクロールできますね。 説明とデモ、コードが公開されているので、ぜひ見てみてはいかがでしょうか。 サイトのデザインとインターフ …

category: Technology

date: June 12, 2009

かっこいいフリーのWordPressテーマ45

BlogPerfumeというサイトで、かっこいいフリーのWordPressテーマがまとまっています。 ざっといくつかご紹介。 ↑はManifest。 BranfordMagazine WordPress Premium WP Coda Sharpfolio シンプルで使いやす …

category: Technology

date: June 11, 2009

ページのめくれを実装する方法5

WebDesignBoothで、ページのめくれを実装する方法が紹介されています。 ざっとご紹介。 » imple Page Peel Effect with jQuery and CSS by Soh Tanaka 　Soh Tanakaによる、jQueryとCS …

category: Technology

date: June 10, 2009

次のプロジェクトに使えるPHPフレームワーク16

sitepointで、次のプロジェクトに使えるPHPフレームワークがまとまっています。 ざっといくつかご紹介。 » Agavi 　PHP5ベースのMojavi系フレームワーク。完成度の高いアプリを開発することにフォーカスしている » Akelos 　複 …

category: Technology

date: June 10, 2009

CSSスプライトを使ったメニューの作り方

LINE25というサイトで、CSSスプライトを使ったメニューの作り方が紹介されています。 1枚の背景画像を使って、こんな感じでCSSを指定していきます。 デモは以下から。 » View Demo ソースファイルもダウンロードできますね。 ぜひ見てみてくださいー。 …

category: Technology

date: June 09, 2009

ユーザビリティーに関連するフリーテンプレート

zef[a]mediaというサイトで、ユーザビリティーに関連するフリーテンプレートが配布されています。 ワイヤーフレームやプロトタイプ、タスクフローなどがPDFやExcel、Visio形式でダウンロードできます。 Since then I’ve had numer …

category: Technology

date: June 08, 2009

ユーザビリティーを学ぶための20サイト

Inspired Magazineというサイトで、ユーザビリティーを学ぶための20サイトが紹介されています。 ざっといくつかご紹介。 » UX Booth 　デザイナー、デベロッパのためになるユーザビリティーレビュー » UX Magazine 　記事 …

category: Technology

date: June 07, 2009

デザインに彩りを与えるCSS・jQueryソリューション21

SmashingAppsで、デザインに彩りを与えるCSS・jQueryソリューションが紹介されています。 ざっといくつかご紹介。 » Fancy Thumbnail Hover Effect w/ jQuery 　画像にマウスオーバーするとスムーズに拡大してくれる …

category: Technology

date: June 04, 2009

SEOの順位を上げるためのWordPressプラグイン10

WebDesignBoothというサイトで、SEOの順位を上げるためのWordPressプラグインが紹介されています。 ざっとご紹介。 » All in One SEO Pack 　ページごとにtitle、description、タグを設定できる » …

category: Technology

date: June 03, 2009

ブラウザからSWFファイルをダウンロードする方法

makeuseof.comで、ブラウザからSWFファイルをダウンロードする方法がまとまっています。 Firefox,IE,Operaでの方法が載っていますね。 Firefoxでは、右クリックの「ページの情報を表示」から「メディア」タブを選択し、保存するという流れになっています …

category: Technology

date: May 30, 2009

Mootoolsで作るアコーディオンメニュー『BySlideMenu』

ByScriptsというサイトで、Mootoolsで作るアコーディオンメニューが紹介されています。 水平にも垂直にも作ることができて、ulにidをつければOKのようですね。オプションもいろいろと設定できます。 ライセンスはOpen Source MIT Licenseなので自 …

category: Technology

date: May 27, 2009

ダウンロード数の多いWordPressプラグインTOP18

HowToMakeMyBlogというブログで、ダウンロード数の多いWordPressプラグインTOP18が紹介されています。 それぞれ20万回以上ダウンロードされているようですね。 ざっといくつかご紹介。 » NextGEN Gallery 　イメージギャラリープ …

category: Technology

date: May 23, 2009

jQueryで作るタブ型コンテンツローテーター

Raymond Seldaさんのブログで、jQueryで作るタブ型コンテンツローテーターが公開されています。 一定時間ごとにタブでコンテンツが切り替わりますね。 デモは以下から。 » working demo 「source files」からソースもダウンロードで …

category: Technology

date: May 22, 2009

Javascriptのメニュースクリプト30

Quenessというサイトで、Javascriptのメニュースクリプトがまとまっています。 ざっといくつかご紹介。 ・アコーディオンメニュー » Dynamic drive Accordion menu » i-MarcojQuery Accordio …

category: Technology

date: May 14, 2009

リストをデザインするためのCSSプラクティス20+

devSnippetsで、リストをデザインするためのCSSプラクティスが紹介されています。 ざっといくつかご紹介。 » Elastic Calendar Styling with CSS 　CSSでデザインしたカレンダー。↑のキャプチャはこちら » S …

category: Technology

date: May 10, 2009

jQueryを使ったフルスクリーンのスライドショー『supersized』

supersizedというjQueryを使ったフルスクリーンのスライドショーを見つけました。 特徴は以下の3つですね。 ・画像の縦横比を維持しながらブラウザに合うように画像をリサイズする ・フェードイン&アウトしながら画像を切り替える ・ナビゲーションで「一時停止・ …

category: Technology

date: May 06, 2009

WordPressをCMSにする方法

noupeで、WordPressをCMSにする方法が紹介されています。 ざっといくつかご紹介。 ・静的なトップページを作る ・ナビゲーションバーに表示させるものを制御してカスタマイズする ・編集できない部分を作る ・WordPress Widgetsを使ってサイドバーをカスタ …

category: Technology

date: May 06, 2009

MacBookの外部電源『HyperMac』

HyperMacというMacのノートブック用の外部電源を見つけました。これはいいかも。 HyperMac is the world’s first and only external battery and car charger solution that wo …

category: Technology

date: May 05, 2009

ギャラリー風のWordPressテーマ

Smashing Magazineで、ギャラリー風のWordPressテーマが紹介されています。 Gallery is a beautiful, free, gallery-style Thematic child theme for WordPress, designed …

category: Technology

date: May 03, 2009

水平方向のjQueryアコーディオンメニュー

dev.portalZINEというサイトで、水平方向のjQueryアコーディオンメニューが紹介されています。 メニューにマウスオーバーすると、コンテンツが切り替わりますね。 デモは以下から。 » Horizontal Accordion Examples Hi. …

category: Technology

date: April 28, 2009

FlashとAction Script3.0のチュートリアル30

noupeで、FlashとAction Script3.0のチュートリアルが紹介されています。 ざっといくつかご紹介。 » Create an Impressive Magnifying Effect with ActionScript 3.0 　displace …

category: Technology

date: April 24, 2009

jQueryのタブスライダープラグイン『tabSwitch』

HieuUKというサイトで、jQueryのタブスライダープラグインが公開されています。 タブをクリックすると、すーっとスライドしますね。 デモは以下から。 » example All the code is commented to explain itself. …

category: Technology

date: April 22, 2009

jQueryのサンプルTOP10

MyPHPDuniaというサイトで、jQueryのサンプルTOP10がまとまっています。 かなり使えるものばかりな感じですね。 » スライドタブボックス » Appleのサイトで使われているようなメニュー » 画像をズーム » …

category: Technology

date: April 21, 2009

シンプルなWordPressテーマ40

Speckyboy Design Magazineで、シンプルなWordPressテーマがたくさん紹介されています。 ざっといくつかご紹介。 ↑はDie Neue Typographie。 Cardeo Minimal Typogriph Simplicity Thunder …

category: Technology

date: April 17, 2009

ちょっと変わったCSSナビゲーションテクニック30

Six Revisionsで、ちょっと変わったCSSナビゲーションテクニックが紹介されています。 ざっといくつかご紹介。 » The Menu menu 　メニューアイテムにマウスオーバーすると、サブメニューが現れる » Pure CSS hover …

category: Technology

date: April 16, 2009

WordPressをこじゃれたものにするためのテクニック10

devSnippetsで、WordPressをこじゃれたものにするためのテクニックが紹介されています。 ざっといくつかご紹介。 » Implement a Nice & Clean jQuery Sliding Panel in WordPress 2. …

category: Technology

date: April 15, 2009

かっこいいWordPressテーマ41

HONGKIATで、かっこいいWordPressテーマが紹介されています。 ざっといくつかご紹介。 ↑はFREEmium。 WaterColor Deskspace Maasahan Zinmag Futura かなりかっこいいデザインが揃っていますね。 その他のリストとダウ …

category: Technology

date: April 13, 2009

オンラインのPHPエディタ『PHPanywhere』

オンラインでPHPのコーディングができる「PHPanywhere」というサイトを見つけました。 とてもクールなサイトで、インターフェースが綺麗ですね。 ↓エディタ画面はこんな感じです。 ただリモートのサーバ設定をしないといけなくて、ローカルのファイルは編集できないっぽいので（ …

category: Technology

date: April 11, 2009

メモリ4GBにしました。

さてさて、MacBookのメモリを4GBにしました！ そんなに変わらないかもな、と思ってたんだけど、結構違いますね。起動時間も速いし、ネットのブラウジングもかなり速くなりました。Adobe系のソフトも、まだ大量に開いたりしてないけどさくさくな感じです。 少し前までは4GBなん …

category: Technology

date: April 09, 2009

MooToolsのクールなテクニック20

devSnippetsでMooToolsのクールなテクニックがたくさん紹介されています。 ざっといくつかご紹介。 » MooGenda 　MooToolsベースのjavascriptカレンダー » Morph Effect on mouseenter/ …

category: Technology

date: April 07, 2009

Finderのショートカットと特殊キーシンボル（Mac）

ちょっとFinderのショートカットを覚えたのでご紹介。 command + shift + D　・・・　「デスクトップ」フォルダを開く command + shift + A　・・・　「アプリケーション」フォルダを開く command + delete　・・・　ファイルを削 …

category: Technology

date: April 05, 2009

かっこいいフリーのWordPressテーマ40

Six RevisionsでかっこいいフリーのWordPressテーマがたくさん紹介されています。 ざっといくつかご紹介。 ↑はPortfolio – WPESP。 Irresistible Individual The Morning After Eleganc …

category: Technology

date: April 05, 2009

Macのメニューバーに日付を表示する方法

こちらもちょっとメモ。 今までメニューバーに日付を表示させるのに成功してなかったんだけど、新しいMacだし、久々にやったらできました☆ ↑みたいになりますね。すごく便利。 デフォルトの表示。 システム環境設定 / 日付と時刻 / “言語環境を開く…&# …

category: Technology

date: April 05, 2009

Firefoxの設定を移行する方法（Mac）

ちょっとメモ。 Mac間でFirefoxの移行をするときは、以下のフォルダ配下のファイルを、すべて上書きすることで可能です。 /Users/ユーザー名/Library/Application Support/Firefox/Profiles/xxxxxxxx.default …

category: Technology

date: April 05, 2009

MacBook買いました。

MacBook買いました！よぅしテンション上がってきたぞ。 MacBook Airを愛用してきたけど、重いPSDを開くときとかはやっぱりパワー不足だし、今後のことも考えて購入。 Airの薄さと軽さはさいこーだけど、CPUはintelに特注で作ってもらっているらしく、HDとかも …

category: Technology

date: March 27, 2009

JSでモーダルウィンドウを実装する方法20+

「DESIGN LABEL」で、JSでモーダルウィンドウやダイアログボックスを実装する方法がたくさん紹介されています。 ざっといくつかご紹介。 » Prototype Window 　prototypeフレームワークをベースにしたjavascript &raquo …

category: Technology

date: March 25, 2009

MovableTypeのバックアップ方法

画像をたくさんUPしたためだと思うけど、転送量でサーバに負荷がかかっているようでつながりにくくなっていると思います。何度かリロードしてもらえれば大丈夫だと思うのでよろしくお願いしますm(_ _)m さて、それに関して、サーバにはいつでも障害が起こり得ます。RAIDでミラーリン …

category: Technology

date: March 12, 2009

画像マウスオーバ時のborder表示テクニック

「CSS TRICKS」で、画像にマウスオーバしたときにborderでレイアウトを崩さないテクニックが紹介されています。 デモがとてもわかりやすいのでぜひ見てみてください。 » View Demo 一つは、「a:hover img」にネガティブマージンを設定する方 …

category: Technology

date: March 11, 2009

jQueryを使ったシンプルなスライドショー

Timothy van Sasさんのブログで、jQueryを使ったシンプルなスライドショーの作り方が紹介されています。 ↑アニメGIFにしてみた。こんな感じでナビゲーションをクリックするとフェードインして表示されます。 jQueryとCSS、HTMLコードが載っているので、ぜ …

category: Technology

date: March 10, 2009

画像を使わずに角丸を描画する『Liquid Canvas』

「ruzee.com」で、HTMLのcanvas要素の中に描画できるJavaScriptライブラリ「Liquid Canvas」が公開されています。 ↑のような背景が作れてしまう、とのことですね。 デモは以下から見られます。 » Demo » basi …

category: Technology

date: February 26, 2009

jQueryを使ったシンプルなドロップダウンメニュー

ドロップダウンメニューを簡単に実装したい。 そんなときにおすすめなのが、『Simple jQuery Dropdowns』。jQueryを使ったシンプルなドロップダウンメニューだ。 このエントリーでは、↑のようなメニューの実装方法が紹介されている。ソースファイルをダウンロード …

category: Technology

date: February 25, 2009

CSSで天地中央に配置するテクニック集

CSSでコンテンツを天地中央に配置したい。 そんなときにおすすめなのが、『Vertical Centering With CSS』。CSSで天地中央に配置するテクニック集だ。 このエントリーでは、以下のようなソースで天地中央に配置する例がいくつか紹介されている。 <di …

category: Technology

date: February 24, 2009

雑誌のようなフリーのWordPressテーマ『Magazeen』

新しいWordPressのテーマを探している。 そんなあなたにおすすめなのが、『Magazeen』。Smashing Magazineによる、雑誌のようなフリーのWordPressテーマだ。 このエントリーでは、↑のようなクールなWordPressテーマが配布されている。 T …

category: Technology

date: February 20, 2009

かっこいいフリーのWordPressテーマ『Compositio』

かっこいいWordPressのテーマを探している。 そんなときにおすすめなのが、『Compositio』。かっこいいフリーのWordPressテーマだ。 A special feature of this theme is the logo changer. You can …

category: Technology

date: February 18, 2009

かっちりとしたグリッドCSSが手に入る『the-golden-grid』

グリッドレイアウトを簡単に実装したい。 そんなときにおすすめなのが、『the-golden-grid』。かっちりとしたグリッドCSSが手に入るページだ。 このGoogle Codeのページでは、↑のようなグリッドデザインを作るためのCSSが紹介されている。 動作確認も以下のブ …

category: Technology

date: February 15, 2009

jQueryでiCalライクなカレンダーを作るチュートリアル

jQueryでクールなカレンダーを作りたい。 そんなときにおすすめなのが、『Create astonishing iCal-like calendars with jQuery』。jQueryでiCalライクなカレンダーを作るチュートリアルだ。 このエントリーでは、↑のような …

category: Technology

date: February 10, 2009

見ておきたいCSSツール40選

CSSのツールを便利に使ってみたい。 そんなときにおすすめなのが、『40+ “Must see” CSS Tools』。見ておきたいCSSツール40選だ。 以下にいくつかご紹介。 » CSS Type Set 　CSSをいじりながらフォント …

category: Technology

date: February 08, 2009

jQueryを使ったフェードインするポップアップバブル

クールにツールチップを表示させたい。 そんなときにおすすめなのが、『Create a jQuery Popup Bubble』。jQueryを使ったフェードインするポップアップバブルだ。 このエントリーでは、↑のようにマウスオーバーでフェードイン&アウトするチールチ …

category: Technology

date: February 06, 2009

デザイン会社の名前を提示してくれる『Breadline Design Naming Machine』

会社名がなかなか思いつかない。 そんなときにおすすめなのが、『Breadline Design Naming Machine』。デザイン会社の名前を提示してくれるサイトだ。 このサイトでは、スロット上に3つの単語を表示することで、デザイン会社の名前を提案してくれる。 やってみ …

category: Technology

date: February 06, 2009

素晴らしいjQueryのチュートリアル45選

jQueryでクールなインターフェースを実装したい。 そんなときにおすすめなのが、『40+ Excellent jQuery Tutorials』。素晴らしいjQueryのチュートリアル45選だ。 以下にいくつかご紹介。 » デザイナーのためのjQueryチュート …

category: Technology

date: February 05, 2009

綺麗でユーザビリティーのあるナビゲーションメニュー50選

綺麗なメニューを作りたい。 そんなときに参考になるのが、『50 Beautiful And User-Friendly Navigation Menus』。Smashing Magazineによる、綺麗でユーザビリティーのあるナビゲーションメニュー50選だ。 以下にいくつかご …

category: Technology

date: February 01, 2009

jQueryのチートシート

jQueryを使いこなしたい。 そんなあなたにおすすめなのが、『jQuery Cheat Sheet』。jQueryのチートシートだ。 このエントリーでは、↑のようなチートシートが公開されている。 Memorizing the hundreds of jQuery metho …

category: Technology

date: January 30, 2009

Facebookスタイルのツールチップテキスト『tipsy』

かっこいいツールチップテキストを実装したい。 そんなあなたにおすすめなのが、『tipsy』。Facebookスタイルのツールチップテキストだ。 Tipsy is a jQuery for creating a Facebook-like tooltips effect bas …

category: Technology

date: January 30, 2009

画像を回転できるjQueryプラグイン『wilq32』

画像を違った風に見せたい。 そんなときにおすすめなのが、『wilq32』。画像を回転できるjQueryプラグイン『wilq32』だ。 このサイトでは、↑のように画像を傾けるJavaScriptが公開されている。 ソースは以下の通り。マウスオーバすると画像を回転させることもでき …

category: Technology

date: January 29, 2009

無料で使えるプレミアムなWordPressテーマ13選

かっこいいWordPressのテーマを探している。 そんなあなたにおすすめなのが、『13 Premium-Like WordPress Themes That Are Free And Stunning』。無料で使えるプレミアムなWordPressテーマ13選だ。 以下にいく …

category: Technology

date: January 28, 2009

クールなグリッドレイアウトのテンプレートを配布する『Fluid 960 Grid System』

かっこいいグリッドレイアウトでデザインしたい。 そんなときにおすすめなのが、『Fluid 960 Grid System』。クールなグリッドレイアウトのテンプレートを配布するサイトだ。 このサイトでは、↑のようなグリッドのソースが紹介されている。メニューの「Download …

category: Technology

date: January 28, 2009

MovableType4.2でカテゴリーアーカイブをドロップダウンにする方法

ちょっとメモ。 MovableType4では、「ウィジェット」っていう名前で、サイドバーのコンテンツが管理できます。 「検索」や「最近のブログ記事」などですね。MT3で「module」タグが使われている箇所です。 サイドバーのコンテンツをドラッグ&ドロップで表示・非 …

category: Technology

date: January 26, 2009

無料で使えるFlashギャラリー『dfGallery 2.0』

クールなFlashギャラリーをブログやサイトに設置したい。 そんなときにおすすめなのが、『dfGallery 2.0』。無料で使えるFlashギャラリーだ。 このギャラリーでは、自分のFlickrやPicasaの写真を読み込むことができる。テーマやスキンをカスタマイズしたり、 …

category: Technology

date: January 25, 2009

ブログのサイドバーに使えるjQueryのアコーディオンメニュー

サイドバーにアコーディオンメニューを設置したい。 そんなときにおすすめなのが、『Exactly How to Create a Custom jQuery Accordion』。ブログのサイドバーに使えるjQueryのアコーディオンメニューだ。 このエントリーでは、↑のような …

category: Technology

date: January 23, 2009

ブラウザの下部にフッターを固定表示する『CSS Sticky Footer』

フッターをブラウザの下部に常に表示させたい。 そんなときにおすすめなのが、『CSS Sticky Footer』。ブラウザの下部にフッターを固定表示するCSSだ。 クロスブラウザで、IEやFxはもちろん、Opera、Safari、Google Chrome、Chaminoなど …

category: Technology

date: January 22, 2009

Vimeoライクなトップナビゲーションの作り方

かっこいいナビゲーションをデザインしたい。 そんなときに参考になるのが、『Create Vimeo-like top navigation 』。Vimeoライクなトップナビゲーションの作り方だ。 このエントリーでは、↑のようなクールなナビをデザインする方法が紹介されている。 …

category: Technology

date: January 20, 2009

ページがめくれる効果を演出してくれるjQueryプラグイン

ページに面白い効果をつけたい。 そんなときにおすすめなのが、『The Sexy Curls jQuery Plugin! 』。ページがめくれる効果を演出してくれるjQueryプラグインだ。 このエントリーでは、↑のようなパーツを実装する方法が紹介されている。ドラッグすることで …

category: Technology

date: January 13, 2009

実用的でクリエイティブなjQueryの使用例20選

クールで使える機能をjQueryで実装したい。 そんなときに参考になるのが、『The 20 Most Practical and Creative Uses of jQuery』。実用的でクリエイティブなjQueryの使用例20選だ。 以下にいくつかご紹介。 ↑のキャプチャは …

category: Technology

date: January 10, 2009

素晴らしいCSSメニュー120選

CSSでかっこいいメニューをデザインしたい。 そんなときに参考になるのが、『120 Excellent Examples of CSS Horizantal Menu』。素晴らしいCSSメニュー120選だ。 以下にいくつかご紹介。 ↑のキャプチャはandreaugusto。 …

category: Technology

date: January 08, 2009

PSDやWordPressのテーマ30選

テンプレートをカスタマイズしてかっこいいサイトが作りたい。 そんなときにおすすめなのが、『The 30 Most Usable Themes from ThemeForest.net』。PSDやWordPressのテーマ30選だ。 以下にいくつかご紹介。 ↑のキャプチャはCr …

category: Technology

date: January 07, 2009

jQueryのイメージ&コンテンツスライダー

画像をスライドさせるギャラリーが作りたい。 そんなときにおすすめなのが、『jQuery plugin – Easy Image or Content Slider』。jQueryのイメージ&コンテンツスライダーだ。 これを使えば、水平方向や垂直方向に画像 …

category: Technology

date: January 04, 2009

素晴らしいjQueryナビゲーション8選

jQueryでクールなナビゲーションを作りたい。 そんなときにおすすめなのが、『8 Sites with Excellent jQuery Navigation』。素晴らしいjQueryナビゲーション8選だ。 以下にいくつかご紹介。 ↑のキャプチャはMacHeist Loot …

category: Technology

date: January 01, 2009

WebデザイナーのためのユーザビリティーTips10選

ユーザビリティーの高いサイトが作りたい。 そんなあなたにおすすめなのが、『10 Usability Tips for Web Designers』。WebデザイナーのためのユーザビリティーTips10選だ。 以下にご紹介。 Tagline（キャッチフレーズ）を書くTaglin …

category: Technology

date: December 31, 2008

CSS Spriteを使って角丸を実装する方法

クールでクリーンに角丸を作りたい。 そんなあなたにおすすめなのが、『CSS Sprites + Rounded corners』。CSS Spriteを使って角丸を実装する方法だ。 このエントリーでは、↓のような画像を使って角丸を実装する方法が紹介されている。 デモは以下から …

category: Technology

date: December 30, 2008

WordPressブロガーのための便利ツール15選

WordPressをもっと楽しみたい。 そんなあなたにおすすめなのが、『15 Useful Tools for WordPress Bloggers』。WordPressブロガーのための便利ツール15選だ。 以下にご紹介。 » ScribeFire 　ブログエディ …

category: Technology

date: December 21, 2008

MacBook Air SuperDriveを買いました。

必要になったので、MacBook Air SuperDriveを購入。 デザインがすごくいいね。余分なものは一切ないシンプルなデザイン。テーブルにそっと置いておいてもさまになります。 MacBook Air、相変わらず大活躍中です。ブログも制作も全部これでやっていますね。これ …

category: Technology

date: December 20, 2008

画像にマウスオーバでルーペ効果を与えてくれる『jQZoom Evolution』

画像をマウスオーバで拡大して見られる機能をつけたい。 そんなときにおすすめなのが、『jQZoom Evolution』。画像にマウスオーバでルーペ効果を与えてくれるスクリプトだ。 『jQZoom Evolution』は、モダンブラウザに対応したjQueryプラグイン。画像から …

category: Technology

date: December 01, 2008

知っておきたいCSSテクニック15選

CSSのテクニックを知りたい。 そんなときにおすすめなのが、『15 CSS Tricks That Must be Learned』。知っておきたいCSSテクニック15選だ。 このエントリーでは、CSSスプライトやスライディングドアテクニック、クロスブラウザの透過やクロスブラ …

category: Technology

date: November 27, 2008

画像にアニメーションするレイヤーを重ねられる『s3Slider』

画像にかっこいいキャプションをつけたい。 そんなときにおすすめなのが、『s3Slider』。画像にアニメーションするレイヤーを重ねられるプラグインだ。 『s3Slider』は、jQueryのプラグイン。jsを読み込んでimgタグを書き、<span>にテキストを書け …

category: Technology

date: November 18, 2008

JavaScriptで作られたドラムマシン『JS-909』

ドラムマシンで遊びたい。 そんなときにおすすめなのが、『JS-909』。JavaScriptで作られたドラムマシンだ。 『JS-909』では、キックやスネアなどをオンにすることでドラムのビートを作ることができる。 右上のアイコンから見られるビジュアルがいい感じだ。 とてもシン …

category: Technology

date: November 18, 2008

軽量なCSSライブラリ『Malo』

クロスブラウザなCSSでサイトを素早く作りたい。 そんなときにおすすめなのが、『Malo』。軽量なCSSライブラリだ。 『Malo』は、2〜5カラムのCSSライブラリ。 なぜMaioを使うのか？という問いに対して、 ・超軽量(0.25kbのものや8行のものまで！) ・%, p …

category: Technology

date: November 16, 2008

無料で使えるCSSのテンプレート配布サイト8選

CSSのテンプレートでサイトやページをさくっと作りたい。 そんなときにおすすめなのが、『CSS Tools: Free Templates』。無料で使えるCSSのテンプレート配布サイト8選だ。 以下にご紹介。 » FreeCSStemplates.org &raq …

category: Technology

date: November 05, 2008

HTMLにエンベッドできるWYSIWYGエディタ6選

HTMLにWYSIWYGエディタを搭載したい。 そんなときにおすすめなのが、『6 Embeddable HTML Editors for Your Website Compared』。Mashableによる、HTMLにエンベッドできるWYSIWYGエディタ6選だ。 以下にご紹 …

category: Technology

date: October 31, 2008

複数カラムの高さをそろえるクロスブラウザなCSS

複数のdivの高さをそろえたい。 そんなときにおすすめなのが、『Equal Height Columns with Cross-Browser CSS & No Hacks』。複数カラムの高さをそろえるクロスブラウザなCSSだ。 このエントリーでは、↑のようにdiv …

category: Technology

date: October 26, 2008

PHPでRSSリーダーコンテンツを作る方法

PHPでさくっとRSSをparseしたい。 そんなときにおすすめなのが、『How to Read an RSS Feed With PHP – screencast』。NETTUTSによる、PHPでRSSリーダーコンテンツを作る方法だ。 このエントリーでは、↑のよ …

category: Technology

date: October 22, 2008

優れたサイトを作るためのリソース&チュートリアル

ちょっと気の利いたサイトが作りたい。 そんなときにおすすめなのが、『Useful resources and tutorials for developing stunning web sites』。Woorkによる、優れたサイトを作るためのリソース&チュートリアル …

category: Technology

date: October 21, 2008

スムーズに開閉するJavascriptアコーディオンメニュー

スムーズに開閉するアコーディオンメニューが作りたい。 そんなときにおすすめなのが、『Animated JavaScript Accordion V2』。スムーズに開閉するJavascriptアコーディオンメニューだ。 このエントリーでは、気持ちのいい動きのアコーディオンメニュ …

category: Technology

date: October 17, 2008

MacのFinderで使えるショートカット40選

Macをもっと素早く操作したい。 そんなあなたにおすすめなのが、『40 Mac Keyboard Shortcuts for Finder』。MacのFinderで使えるショートカット40選だ。 以下にいくつかご紹介。 ・Command-D　選択したアイテムを複製 ・Comm …

category: Technology

date: October 15, 2008

CSSや画像を排除して表示してくれる『Finch』

もっと軽いデータでブラウズしたい。 そんなあなたにおすすめなのが、『Finch』。CSSや画像を排除して表示してくれるサイトだ。 このサイトは、CSSや画像を切って、早くページをロードすることを目的としている。遅いネット環境でも快適なインターネットを、というコンセプトだ。 そ …

category: Technology

date: October 13, 2008

アニメーションするタブ&アコーディオンメニュー集

Javascriptでアニメーションして遷移するメニューが作りたい。 そんなときにおすすめなのが、『30+ Animated Tab-Based Interface and Accordion Scripts』。アニメーションするタブ&アコーディオンメニュー集だ。 …

category: Technology

date: October 11, 2008

Mac OS XのDockライクなメニューを実装したブログ

ちょっと面白かったのでご紹介。 Mac OS XのDockライクなメニューを実装したブログです。 ↑のように、常に最下部に表示されていますね。スムーズに拡大縮小するし、なかなかインパクトがあります。 ただ最下部だとコンテンツが見えなくなるので、ブラウザの左か右に絶対配置で置く …

category: Technology

date: October 07, 2008

フリーのかっこいいWordPressテーマ集

WordPressでかっこいいテーマを探している。 そんなときにおすすめなのが、『15 High Quality Premium-Like Free WordPress Themes』。フリーのかっこいいWordPressテーマ集だ。 以下にいくつかご紹介。 ↑のキャプチャは …

category: Technology

date: September 20, 2008

かっこいいWordPressテーマ12選

かっこいいWordPressのテーマを使いたい。 そんなときにおすすめなのが、『Top 12 Stunning WordPress Themes』。Mashableによる、かっこいいWordPressテーマ12選だ。 以下にいくつかご紹介。 ↑のキャプチャはF8。 Wood …

category: Technology

date: September 19, 2008

モダンなインターフェースデザインのチュートリアル7選

モダンなインターフェースをデザインしたい。 そんなあなたにおすすめなのが、『7 Stunning tutorials to design modern interfaces for websites 』。モダンなインターフェースデザインのチュートリアル7選だ。 以下にご紹介。 …

category: Technology

date: September 15, 2008

jQueryやCSSを使ったナビゲーションメニュー300選

かっこいいナビゲーションメニューをさくっと実装したい。 そんなあなたにおすすめなのが、『300+ Jquery, CSS, MooTools and JS navigation menus』。jQueryやCSSを使ったナビゲーションメニュー300選だ。 以下にいくつかご紹介 …

category: Technology

date: September 13, 2008

覚えておきたいMacのターミナルコマンド集

ちょっとMacのターミナルコマンドがまとめてみたくなったのでまとめてみます！ whatisコマンドの用途を教えてくれる。$ whatis cpcp(1) – copy files sleep指定秒後にコマンドを自動実行。$ sleep 60; open ./tes …

category: Technology

date: September 13, 2008

Macでマウスポインタと一緒にスクリーンショットを撮る方法

ちょっとメモ。 Macでマウスポインタと一緒にスクリーンショットを撮る方法です。 いつもは「Command + Shift + 4」でスクリーンショットを撮ってるんだけど、これだとマウスポインタが含まれません。 アプリケーションの「グラブ」を使うんですね。 1. まず、「アプ …

category: Technology

date: September 13, 2008

まじで使えるJavascriptライブラリ75選

Javascriptで優れたインターフェースを実装したい。 そんなあなたにおすすめなのが、『75 (Really) Useful JavaScript Techniques』。まじで使えるJavascriptライブラリ75選だ。 以下にいくつかご紹介。 » Lig …

category: Technology

date: September 06, 2008

有望なJavascriptフレームワーク10選

使いやすいJavascriptフレームワークを探している。 そんなあなたにおすすめなのが、『10 Promising JavaScript Frameworks』。有望なJavascriptフレームワーク10選だ。 以下にご紹介。 » SproutCore 　デス …

category: Technology

date: September 01, 2008

ラベルやボタンに動詞を使うユーザビリティTips

なかなか面白い記事を見つけました。 ｢The Usability Post｣による、『Usability Tip: Use Verbs as Labels on Buttons』。ラベルやボタンに動詞を使うユーザビリティTipsです。 ボタンには「OK」や「キャンセル」をよく …

category: Technology

date: August 27, 2008

オープンソースのPHPスクリプトがダウンロードできる『Open Source PHP』

オープンソースのPHPをもとに何か開発がしたい。 そんなあなたにおすすめなのが、『Open Source PHP』。オープンソースのPHPスクリプトがダウンロードできるサイトだ。 このサイトでは、オープンソースのPHPスクリプトがギャラリーになって並んでいる。インターフェース …

category: Technology

date: August 25, 2008

jQueryを使った超クールなRSSティッカー『Technosophos RSS Widget』

さて、ちょっといろいろ調べていて、RSSティッカーを実装しました！！ Evernoteで使われているティッカーですね。実装したくなり調べていたんですが、MITライセンスのJavascriptだということがわかり、使わせてもらいました。 RSSがふわっふわっとフェードイン・アウ …

category: Technology

date: August 25, 2008

jQueryの便利なプラグイン10選

jQueryでかっこいいUIを実装したい。 そんなときにおすすめなのが、『10 useful jQuery plugins』。jQueryの便利なプラグイン10選だ。 以下にご紹介。 ・jQuery UI　 　Webアプリをデスクトップアプリのように動作させる。タブメニューや …

category: Technology

date: August 24, 2008

MooToolsで作るクールなフォトギャラリー

かっこよくアニメーションするフォトギャラリーが作りたい。 そんなあなたにおすすめなのが、『Create a Spectacular Photo Gallery with MooTools』。MooToolsで作るクールなフォトギャラリーだ。 このエントリーでは、↑のようなフォ …

category: Technology

date: August 22, 2008

コーディングをさっと済ませるためのCSSテンプレート集

コーディングはさっと済ませたい。 そんなあなたにおすすめなのが、『Blank Themes, Frameworks and Templates: Resources to Speed Up Your Development Time』。コーディングをさっと済ませるためのCSS …

category: Technology

date: August 20, 2008

表示・非表示の切り替えができるログインパネル

ログインパネルなどで、表示・非表示の切り替えがしたい。 そんなときにおすすめなのが、『Show/hide a nice Login Panel using Mootools 1.2』。表示・非表示の切り替えができるログインパネルだ。 このエントリーでは、クリックで表示・非表示 …

category: Technology

date: August 19, 2008

iPhone用サイトを作る方法

iPhone用のサイトを作りたい。 そんなあなたにおすすめなのが、『Learn How To Develop For The iPhone』。iPhone用サイトを作る方法だ。 このエントリーでは、ロゴとテキストがあるシンプルなiPhone用のページをコーディングする方法が紹 …

category: Technology

date: August 18, 2008

画像を保存するのを防ぐJavascript『dwProtector』

右クリックなどで画像を保存するのを禁止したい。 そんなあなたにおすすめなのが、『dwProtector』。画像を保存するのを防ぐJavascriptだ。 このエントリーでは、↓のように画像を保存するのを禁止するJavascriptが紹介されている。 ・右クリックで「別名で画像 …

category: Technology

date: August 15, 2008

CSSでベストな「&」を指定してみるサンプル『Use the Best Available Ampersand』

フォントごとの「&」のデザインが知りたい。 そんなときにおすすめなのが、『Use the Best Available Ampersand』。CSSでベストな「&」を指定してみるサンプルだ。 このエントリーは、OSごとに「&」がどのように表示され …

category: Technology

date: August 11, 2008

Movabletypeのカテゴリーアーカイブページなどをカスタマイズ中『Customizing archive pages』

サーバ移行をして、パフォーマンスを見直して、次にアーカイブページなどの整理をしています。大体終わったかな☆ 今までは、カテゴリーアーカイブと月別アーカイブは、エントリーの内容をそのまま表示していたんだけど、ユーザビリティとパフォーマンスの観点から、タイトルだけのリンクにしたか …

category: Technology

date: August 09, 2008

ブログパーツの作り方『How to make blog parts』

かなり簡単な話題ですが。。メモ的にエントリー。 ブログパーツを作りたいとき、Flashなどで動的に作ったものをユーザに貼付けてもらうとすると、以下のようなソースを提供すればいいですね。 <script language=”JavaScript” …

category: Technology

date: August 09, 2008

無料で使える素晴らしいWordPressテーマ集『Best Free WordPress Themes』

Wordpressのテーマを探している。 そんなときにおすすめなのが、『Best Free WordPress Themes』。無料で使える素晴らしいWordpressテーマ集だ。 このサイトでは、シンプルで使いやすいものからクリエイティブなものまで、たくさんのテーマが紹介さ …

category: Technology

date: August 06, 2008

無料で使えるかなりクールなWordPressテーマ『fervens』

WordPressでかっこいいテーマを探している。 そんなあなたにおすすめなのが、『fervens』。無料で使えるかなりクールなWordPressテーマだ。 このエントリーでは、↑のようなクールなテーマが紹介されている。 固定幅の3カラムデザインで、サイドバーの位置のバリエー …

category: Technology

date: August 05, 2008

MAMPでBasic認証する方法『Basic Authentification on Mac』

認証を作っていて15分くらいでBasic認証するぞーと思ったらちょっとはまったのでメモ。 (1) 「.htaccess」を以下のように記述。 AuthUserFile /Applications/MAMP/htdocs/dirname/.htpasswd AuthGroupF …

category: Technology

date: July 30, 2008

web creators 9月号の巻頭特集で4記事を執筆しました。

web creators9月号が昨日発売されました。今号は巻頭特集の4記事を担当しています。 「表現の制約を乗り越えるWEBデザインの技」というタイトルで、Flashを使わないでリッチなインターフェースを実装する方法の紹介です。 JavaScriptでアニメーションを実装する …

category: Technology

date: July 21, 2008

ブログやサイトに投票機能をつけられる『Poll Everywhere』

サイトに投票機能をつけたい。 そんなときにおすすめなのが、『Poll Everywhere』。ブログやサイトに投票機能をつけられるサービスだ。 『Poll Everywhere』は、↑のような投票機能をjavascriptで提供してくれる。日本語も通るようだ。 複数の選択肢で …

category: Technology

date: July 18, 2008

折れ線チャートを生成してくれるjQueryプラグイン『jQuery Sparklines』

サイト上で簡単にチャートを作りたい。 そんなときにおすすめなのが、『jQuery Sparklines』。折れ線チャートを生成してくれるjQueryプラグインだ。 このプラグインは、↑のように<input>に数値を入力することで表を生成してくれる。 サイズや色を変 …

category: Technology

date: July 17, 2008

クールにアニメーションしてハイライトしてくれるJavascript『Create a Simple, Powerful Product Highlighter with MooTools』

クールなインターフェースを実装したい。 そんなあなたにおすすめなのが、『Create a Simple, Powerful Product Highlighter with MooTools』。クールにアニメーションしてハイライトしてくれるJavascriptだ。 このエント …

category: Technology

date: June 28, 2008

1枚の画像で伸縮するボタンをデザインする方法『CSS Sliding Door using only 1 image』

CSSで横幅が可変するボタンをデザインしたい。 そんなあなたにおすすめなのが、『CSS Sliding Door using only 1 image』。1枚の画像で伸縮するボタンをデザインする方法だ。 このエントリーでは、1枚の画像で幅が可変するボタンを作る方法が紹介されて …

category: Technology

date: June 12, 2008

サイトにコマンドラインの検索レイヤーを埋め込める『podipodi』

サイトにクールな検索インターフェースを実装したい。 そんなあなたにおすすめなのが、『podipodi』。サイトにコマンドラインの検索レイヤーを埋め込めるサービスだ。 『podipodi』は、Youtube, Google search, Flickr, Yahooといった検索 …

category: Technology

date: June 04, 2008

Codaのサイトで使われているスライダーエフェクト『Coda Slider Effect』

タブをかっこよくスライドさせて見せたい。 そんなときにおすすめなのが、『Coda Slider Effect』。Codaのサイトで使われているスライダーエフェクトだ。 このエントリーでは、↑で見られるようにMac用のエディタであるCodaのサイトで使われているスライダーエフェ …

category: Technology

date: May 28, 2008

Javascriptで音を奏でられる『SoundManager 2』

サイトで音を使いたい。 そんなときにおすすめなのが、『SoundManager 2』。Javascriptで音を奏でられるサンプルだ。 このサイトでは、雨の音やドラムマシンの音など、様々な音がJavascriptを通して提供される。 ライセンスはBSDライセンスとなっている。 …

category: Technology

date: May 26, 2008

jQueryで実装するDate Rangeピッカー『jQuery Interactive Date Range Picker with Shortcuts』

日付の範囲を選択できるUIを実装したい。 そんなあなたにおすすめなのが、『jQuery Interactive Date Range Picker with Shortcuts』。jQueryで実装するDate Rangeピッカーだ。 このエントリーでは、↑のように日付の範囲 …

category: Technology

date: May 19, 2008

jQueryで実装するiPodスタイルのドリルダウンメニュー『jQuery iPod-style Drilldown Menu』

かっこいいメニューが作りたい。 そんなあなたにおすすめなのが、『jQuery iPod-style Drilldown Menu』。jQueryで実装するiPodスタイルのドリルダウンメニューだ。 このエントリーでは、↑のようなiPodスタイルのメニューが紹介されている。 ク …

category: Technology

date: May 15, 2008

あなたが忘れているかもしれないMacでできることTOP10『Top 10 Things You Forgot Your Mac Can Do』

Macをもっと使いこなしたい。 そんなあなたにおすすめなのが、『Top 10 Things You Forgot Your Mac Can Do』。あなたが忘れているかもしれないMacでできることTOP10だ。 以下にご紹介。 1.ターゲットディスクモード 　Macから別のM …

category: Technology

date: May 14, 2008

無料で使えるCSSテンプレート配布サイト『CSS 4 Free』

かっこいいCSSテンプレートで簡単にサイトを作りたい。 そんなときにおすすめなのが、『CSS 4 Free』。無料で使えるCSSテンプレート配布サイトだ。 『CSS 4 Free』では、GPL、あるいはCreative Commonsライセンスのもと、たくさんのCSSテンプレ …

category: Technology

date: May 13, 2008

スライドするドアのように使いやすいボタンをCSSで作る方法『Make fancy buttons using CSS sliding doors technique』

汎用性のあるボタンが作りたい。 そんなあなたにおすすめなのが、『Make fancy buttons using CSS sliding doors technique』。スライドするドアのように使いやすいボタンをCSSで作る方法だ。 このエントリーでは、↑のようなボタンをC …

category: Technology

date: May 12, 2008

jQueryを使ってマウスオーバ時に画像プレビューを実装する方法『Easiest Tooltip and Image Preview Using jQuery』

サムネイルをマウスオーバ時に画像を拡大したい。 そんなときにおすすめなのが、『Easiest Tooltip and Image Preview Using jQuery』。jQueryを使ってマウスオーバ時に画像プレビューを実装する方法だ。 このエントリーでは、サムネイルの …

category: Technology

date: May 11, 2008

素晴らしいAjax + CSSフォーム47選『47+ Excellent Ajax CSS Forms』

Ajax + CSSでさくっとフォームを実装したい。 そんなあなたにおすすめなのが、『47+ Excellent Ajax CSS Forms』。素晴らしいAjax + CSSフォーム47選だ。 以下にいくつかご紹介。 » Uni Form 　セマンティックでカス …

category: Technology

date: May 10, 2008

CSSであまり使われていないが使った方がいいフォント8選『8 fonts you probably don’t use in css, but should』

CSSでフォント指定をちょっと凝ってみたい。 そんなあなたにおすすめなのが、『8 fonts you probably don’t use in css, but should』。CSSであまり使われていないが使った方がいいフォント8選だ。 以下にご紹介。 ・Pa …

category: Technology

date: May 01, 2008

クリエイティブなFlashフォトブラウザ『andrew berg’s flash photo browser』

クリエイティブなサイトを探している。 そんなあなたにおすすめなのが、『andrew berg’s flash photo browser』。クリエイティブなFlashフォトブラウザだ。 このサイトでは、写真をめくるようにブラウズすることができる。「Thumbnai …

category: Technology

date: April 26, 2008

シンプルなJavacriptダイアログボックス『Custom JavaScript Dialog Boxes』

Javascriptでダイアログボックスを実装したい。 そんなあなたにおすすめなのが、『Custom JavaScript Dialog Boxes』。シンプルなJavacriptダイアログボックスだ。 『Custom JavaScript Dialog Boxes』では、エ …

category: Technology

date: April 22, 2008

クリエイティブなCSSサンプル&チュートリアル50選『Using CSS to Do Anything: 50+ Creative Examples and Tutorials』

クリエイティブなCSSを実装したい。 そんなあなたにおすすめなのが、『Using CSS to Do Anything: 50+ Creative Examples and Tutorials』。クリエイティブなCSSサンプル&チュートリアル50選だ。 以下にいくつ …

category: Technology

date: April 16, 2008

あのサイトのAjax、Javascriptを実装するための方法60選『60 More AJAX- and Javascript Solutions For Professional Coding』

あのかっこいいサイトのAjaxを取り入れたい。 そんなあなたにおすすめなのが、『60 More AJAX- and Javascript Solutions For Professional Coding』。あのサイトのAjax、Javascriptを実装するための方法60選 …

category: Technology

date: April 11, 2008

ダウンロードできるMooToolsのAjaxサンプル41選『41 of the Best MooTools Ajax Example Downloads』

Ajaxでクールなインターフェースが実装したい。 そんなあなたにおすすめなのが、『41 of the Best MooTools Ajax Example Downloads』。ダウンロードできるMooToolsのAjaxサンプル41選だ。 以下にいくつかご紹介。 &raqu …

category: Technology

date: April 10, 2008

DOSのようにテキストエディティングが楽しめる『DarkCopy』

DOSのインターフェースが大好きだ。 そんなあなたにおすすめなのが、『DarkCopy』。DOSのようにテキストエディティングが楽しめるエディタだ。 『DarkCopy』では、黒バックに緑文字というインターフェースで、DOSコマンドを打つようにテキストをうつことができる。 「 …

category: Technology

date: April 09, 2008

時間を節約してくれるCSSツール14選『14 CSS Tools to Save you Time』

CSS周りのツールを使ってみたい。 そんなあなたにおすすめなのが、『14 CSS Tools to Save you Time』。時間を節約してくれるCSSツール14選だ。 以下にいくつかご紹介。 » CSS Optimizer 　CSSのファイルサイズを減らして …

category: Technology

date: April 06, 2008

Appleのサイトで使われているようなアコーディオンメニューを作成する方法『Slide out and drawer effect』

クールなアコーディオンメニューが作りたい。 そんなあなたにおすすめなのが、『Slide out and drawer effect』。Appleのサイトで使われているようなアコーディオンメニューを作成する方法だ。 このエントリーでは、jQueryを使ったクールなアコーディオン …

category: Technology

date: April 05, 2008

Macで一度アップした.htaccessを編集して上書きする方法『How to manage .htaccess on Mac』

Macで.htaccessを作成する場合、新規にアップロードだけなら簡単なんですが、サーバ上に置いてある.htaccessを編集して上書きしたい、というときにとまどってしまったのでまとめておきます。 まずはFTPクライアント。いつもはRBrowserを使っているんですが、.h …

category: Technology

date: April 02, 2008

美しいJavascript & Flashギャラリー33選『33 Most Beautiful Javascript and Flash Galleries』

写真をディスプレイできるギャラリーを作りたい。 そんなあなたにおすすめなのが、『33 Most Beautiful Javascript and Flash Galleries』。美しいJavascript & Flashギャラリー33選だ。 以下にいくつかご紹介。 …

category: Technology

date: April 02, 2008

スライドインする垂直型メニューをCSS+Javascriptで作成するチュートリアル『Two CSS vertical menu with show/hide effects』

スライドイン&アウトするメニューが作りたい。 そんなあなたにおすすめなのが、『Two CSS vertical menu with show/hide effects』。スライドインする垂直型メニューをCSS+Javascriptで作成するチュートリアルだ。 このエ …

category: Technology

date: March 31, 2008

デザイナーのための素晴らしいjQueryのチュートリアル8選『8 Fantastic jQuery Tutorials for Designers』

jQueryでクールなインターフェースを実装したい。 そんなあなたにおすすめなのが、『8 Fantastic jQuery Tutorials for Designers』。デザイナーのための素晴らしいjQueryのチュートリアル8選だ。 以下にご紹介。 ・Slide out …

category: Technology

date: March 27, 2008

ちょっと変わった独特なデザインのWordPressテーマ10選『10 Unusual & Original WordPress Themes』

WordPressのテーマで人と違ったものを探している。 そんなあなたにおすすめなのが、『10 Unusual & Original WordPress Themes』。ちょっと変わった独特なデザインのWordPressテーマ10選だ。 以下にいくつかご紹介。 &r …

category: Technology

date: March 25, 2008

CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』

CSSでmin-heightをブラウザに関係なく使いたい。 そんなあなたにおすすめなのが、『Easiest cross-browser CSS min-height』。CSSでmin-heightをクロスブラウザにする最も簡単な方法だ。 There are still eno …

category: Technology

date: March 23, 2008

100%ピュアCSSのレイアウトサンプルが見られる『750 pixel Pure CSS Layouts』

CSSのサンプルから簡単にサイトが作りたい。 そんなあなたにおすすめなのが、『750 pixel Pure CSS Layouts』。100%ピュアCSSのレイアウトサンプルが見られるサイトだ。 このサイトでは、750px、900px、および100%（ブラウザいっぱい）のサイ …

category: Technology

date: March 19, 2008

Ajaxのフォームバリデータ11選『List of Ajax form Validators』

Ajaxでフォームの入力チェックがしたい。 そんなあなたにおすすめなのが、『List of Ajax form Validators』。Ajaxのフォームバリデータ11選だ。 以下にいくつかご紹介。 » fValidator 　MooTools v1.1。1ページ …

category: Technology

date: March 16, 2008

MacBook Air買いました。

悩んで待った末、MacBook Airを買いました！さいこーです☆ というわけで内容はあまりないですがエントリー。 やっぱり軽さと性能のまずまずのよさ、あとビックカメラでE-MOBILEとセットで3万円引きだったので買っちゃった。これでいつでもどこでもネットライフです。ますま …

category: Technology

date: March 11, 2008

CSSでセクシーなヘッダをデザインするチュートリアル『How to design a sexy header for your site using CSS』

CSSでかっこいいヘッダをデザインしたい。 そんなあなたにおすすめなのが、『How to design a sexy header for your site using CSS』。CSSでセクシーなヘッダをデザインするチュートリアルだ。 このエントリーでは、Photosho …

category: Technology

date: March 02, 2008

LeopardのDockスタイルを管理できる『Dock Library』

LeopardのDockデザインをカスタマイズして管理したい。 そんなあなたにおすすめなのが、『Dock Library』。LeopardのDockスタイルを管理できるソフトだ。 このソフトは、LeopardDocks.comやLeopardDocks.netでダウンロードし …

category: Technology

date: March 01, 2008

テキストとリンク先を変えるだけで実装できる美しいCSSナビゲーション『Elegant navigation bar using CSS』

美しいナビゲーションメニューを実装したい。 そんなあなたにおすすめなのが、『Elegant navigation bar using CSS』。テキストとリンク先を変えるだけで実装できる美しいCSSナビゲーションだ。 このエントリーでは、↑のような美しいメニューのHTMLソー …

category: Technology

date: February 22, 2008

効果的なコーディングのための強力CSSテクニック集『Powerful CSS-Techniques For Effective Coding』

かっこいいインターフェースをCSSで実現したい。 そんなあなたにおすすめなのが、『Powerful CSS-Techniques For Effective Coding』。Smashing Magazineによる、効果的なコーディングのための強力CSSテクニック集だ。 以下 …

category: Technology

date: February 15, 2008

素晴らしいjQueryのサンプル50選『50+ Amazing Jquery Examples- Part1』

jQueryでクールなインターフェースを実装したい。 そんなあなたにおすすめなのが、『50+ Amazing Jquery Examples- Part1』。素晴らしいjQueryのサンプル50選だ。 このエントリーでは、以下のたくさんのカテゴリーでjQueryのサンプルが紹 …

category: Technology

date: January 30, 2008

Flashや動画にもlightbox効果をあたえてくれるJavascript『Shadowbox.js』

画像だけでなく、Flashや動画もかっこいいインターフェースで見せたい。 そんなあなたにおすすめなのが、『Shadowbox.js』。Flashや動画にもlightbox効果をあたえてくれるJavascriptだ。 『Shadowbox.js』では、画像やFlashや動画をク …

category: Technology

date: January 29, 2008

tumblrのRSSをブログに貼付けられる『tumblrss』

開発合宿でのリリース、ということで、tumblrのRSSをブログに貼付けられる『tumblrss』をお知らせします。 tumblrを書いていても、メインでブログを書いているし、ちょっとしたメモ程度に書いている人が多いのではないでしょうか。 せっかくなら、ブログでもtumblr …

category: Technology

date: January 27, 2008

画像にマウスオーバしたときに虫眼鏡アイコンを表示するJavascript『Style Your Image Links』

画像にマウスオーバしたときにオーバレイで画像を表示したい。 そんなあなたにおすすめなのが、『Style Your Image Links』。画像にマウスオーバしたときに虫眼鏡アイコンを表示するJavascriptだ。 このJavascriptでは、画像にマウスオーバしたときに …

category: Technology

date: January 26, 2008

CSSでドロップシャドウなどのCSSテクニック集『101 CSS Techniques Of All Time- Part 1』

CSSでサイトに彩りを加えたい。 そんなあなたにおすすめなのが、『101 CSS Techniques Of All Time- Part 1』。CSSでドロップシャドウなどのCSSテクニック集だ。 このエントリーでは、以下のカテゴリにわけてたくさんのCSSテクニックが紹介さ …

category: Technology

date: January 25, 2008

iPod TouchとiPhoneのSafariにタブブラウザ機能を追加する『Tabulate』

iPod TouchのSafariをタブブラウザとして使いたい。 そんなあなたにおすすめなのが、『Tabulate』。iPod TouchとiPhoneのSafariにタブブラウザ機能を追加するブックマークレットだ。 『Tabulate』では、リンクをクリックすると、ボックス …

category: Technology

date: January 22, 2008

WordPressにFlickrの写真を表示してくれるプラグイン『flickrRSS』

WordPressにFlickrの写真をかっこよく表示したい。 そんなあなたにおすすめなのが、『flickrRSS』。WordPressにFlickrの写真を表示してくれるプラグインだ。 『flickrRSS』では、↑の画像の「Plugin in action」のようにFli …

category: Technology

date: January 19, 2008

無料で使える素晴らしいWordPressテーマ10選『10 Remarkable (and Free) WordPress Themes』

かっこいいWordPressのテーマを探している。 そんなあなたにおすすめなのが、『10 Remarkable (and Free) WordPress Themes』。無料で使える素晴らしいWordPressテーマ10選だ。 以下にご紹介。 » GridFocu …

category: Technology

date: January 18, 2008

最高のFlashチュートリアル集『Adobe Flash Tutorials – Best of』

Flashの腕を上げたい。 そんなあなたにおすすめなのが、『Adobe Flash Tutorials – Best of』。最高のFlashチュートリアル集だ。 以下にいくつかご紹介。 » Flash Tutorial Create Water Wa …

category: Technology

date: January 13, 2008

無料で使えるFaceBookの写真ブラウザ『PhotoBook』

FaceBookの友人の写真を管理したい。 そんなあなたにおすすめなのが、『PhotoBook』。無料で使えるFaceBookの写真ブラウザだ。 『PhotoBook』は、Mac用のフリーソフト。一つのインターフェースで、FaceBookの写真を管理したり共有したりすることが …

category: Technology

date: January 04, 2008

優れたCSSメニュー7選『7 Advanced CSS Menu, A Great Roundup!!』

かっこいいCSSメニューを実装したい。 そんなあなたにおすすめなのが、『7 Advanced CSS Menu, A Great Roundup!!』。優れたCSSメニュー7選だ。 以下にご紹介。 » Advanced CSS Menu » Advan …

category: Technology

date: December 28, 2007

アニメーションでコンテンツを切り替えるJavascript『Featured Content Glider』

アニメーションでコンテンツを切り替えたい。 そんなあなたにおすすめなのが、『Featured Content Glider』。アニメーションでコンテンツを切り替えるJavascriptだ。 『Featured Content Glider』は、divをスライドで切り替えてくれ …

category: Technology

date: December 26, 2007

1カラムのWordPressテーマ30選『30+ 1-Column WordPress Themes』

tumblrライクな1カラムのブログが作りたい。 そんなあなたにおすすめなのが、『30+ 1-Column WordPress Themes』。1カラムのWordPressテーマ30選だ。 以下にいくつかご紹介。 » Hemingway Meets Cogniti …

category: Technology

date: December 24, 2007

使えるFlashのチュートリアル56選『56 Tutoriales de Flash』

Flashのレベルを上げたい。 そんなあなたにおすすめなのが、『56 Tutoriales de Flash』。使えるFlashのチュートリアル56選だ。 このエントリーでは、Flashのたくさんのチュートリアルが紹介されている。 リンク先の説明も、図解があってとてもわかりや …

category: Technology

date: December 22, 2007

使えるFlashツール集『Flash Tools』

Flashのエフェクトなどを簡単に作りたい。 そんなあなたにおすすめなのが、『Flash Tools』。使えるFlashツール集だ。 以下にいくつかご紹介。 » IncrediFlash Intro and Banner Studio 　Flashの知識がなくても …

category: Technology

date: December 21, 2007

素晴らしいiTunesアドオン23選『The 23 Best iTunes Add-ons』

iTunesをもっと楽しみたい。 そんなあなたにおすすめなのが、『The 23 Best iTunes Add-ons』。素晴らしいiTunesアドオン23選だ。 以下にいくつかご紹介。 » CD Art Display (Windows) 　プレイ中のトラックや …

category: Technology

date: December 15, 2007

クールなCSSギャラリーサイト『CSS Heroes』

CSSのギャラリーサイトを探している。 そんなあなたにおすすめなのが、『CSS Heroes』。クールなCSSギャラリーサイトだ。 「CSS Heroes is a gallery of the best standards-compliant web designs, we …

category: Technology

date: December 13, 2007

ブラウザ上でJavascriptの開発ができる『AppJet』

Javascriptの力をつけたい。 そんなあなたにおすすめなのが、『AppJet』。ブラウザ上でJavascriptの開発ができるサービスだ。 『AppJet』では、ボックスにコードを書いていき、それをプレビューすることで、動きを確認しながら開発をすることができる。 例とし …

category: Technology

date: December 01, 2007

2007年の厳選チュートリアル集『2007 Hand-Picked Tutorials』

便利なチュートリアルを探している。 そんなあなたにおすすめなのが、『2007 Hand-Picked Tutorials』。2007年の厳選チュートリアル集だ。 以下にいくつかご紹介。 » AutoCompleter Tutorial 　jQuery(Ajax)/ …

category: Technology

date: November 23, 2007

Leopardを入れたら必ず読むべきキーボードショートカット200選『Mac OS X Leopard: 200+ Productivity Booster Keyboard Shortcuts』

Leopardでショートカットを今よりも使いたい。 そんなあなたにおすすめなのが、『Mac OS X Leopard: 200+ Productivity Booster Keyboard Shortcuts』。Leopardを入れたら必ず読むべきキーボードショートカット20 …

category: Technology

date: November 23, 2007

Mootoolsで実装するクールで使いやすい日付ピッカー『Calendar A Javascript class for Mootools』

クールな日付ピッカーを実装したい。 そんなあなたにおすすめなのが、『Calendar A Javascript class for Mootools』。Mootoolsで実装するクールで使いやすい日付ピッカーだ。 これは本当にかっこいい。日付入力フォームの横のボタンをクリック …

category: Technology

date: November 08, 2007

素晴らしいJavascript&CSSナビゲーションメニュー13選『13 Awesome Javascript CSS Menus』

CSSでメニューを簡単にコーディングしたい。 そんなあなたにおすすめなのが、『13 Awesome Javascript CSS Menus』。素晴らしいJavascript&CSSナビゲーションメニュー13選だ。 以下にいくつかご紹介。 » Sexy …

category: Technology

date: November 06, 2007

あなたのクリエイティブを刺激するアニメーションサイト『HEMA – online winkelen』

クリエイティブなサイトを探している。 そんなあなたにおすすめなのが、『HEMA – online winkelen』。あなたのクリエイティブを刺激するアニメーションサイトだ。 『HEMA – online winkelen』では、ディスプレイしてある商 …

category: Technology

date: November 02, 2007

Javascriptのイメージギャラリー12選『12 Javascript Image Galleries』

Javascriptでイメージギャラリーが作りたい。 そんなあなたにおすすめなのが、『12 Javascript Image Galleries』 。Javascriptのイメージギャラリー12選だ。 以下にいくつかご紹介。 » (E)2 Photo Galler …

category: Technology

date: October 26, 2007

画像をスムーズに拡大縮小する超クールなjavascript『PopBox!』

onclickやマウスオーバなどで画像をクールに拡大縮小したい。 そんなあなたにおすすめなのが、『PopBox!』。画像をスムーズに拡大縮小する超クールなjavascriptだ。 『PopBox!』は、本当にかっこいい。スムーズに拡大縮小したり、リサイズまですることができる。 …

category: Technology

date: October 16, 2007

超簡単に画像にlightbox効果を与えられる『jQuery lightBox plugin』

画像をクリックすると拡大してポップアップするデザインにしたい。 そんなあなたにおすすめなのが、『jQuery lightBox plugin』。超簡単に画像にlightbox効果を与えられるjavascriptだ。 『jQuery lightBox plugin』は、とてもシ …

category: Technology

date: October 15, 2007

非商用で無料で使えるFlashチャート『FusionCharts』

グラフをもっと魅力的なものにしたい。 そんなあなたにおすすめなのが、『FusionCharts』。非商用で無料で使えるFlashチャートだ。 『FusionCharts』は、Flashで作られたアニメーションするグラフ。Flashの知識は必要なく、PHPやRuby on Ra …

category: Technology

date: October 10, 2007

かなり使えるAjaxアプリケーション43選『43 Exceptionally Useful AJAX Applications』

サイトに便利なAjaxシステムを追加したい。 そんなあなたにおすすめなのが、『43 Exceptionally Useful AJAX Applications』。かなり使えるAjaxアプリケーション43選だ。 以下にいくつかご紹介。 » Dragable Box …

category: Technology

date: October 09, 2007

マウスオーバでテーブルのセルをアクティブ状態にするjavascript『Tablecloth』

テーブルのユーザビリティを上げたい。 そんなあなたにおすすめなのが、『Tablecloth』。マウスオーバでテーブルのセルをアクティブ状態にするjavascriptだ。 シンプルなコードを2行追加するだけで、ユーザを魅了するテーブルを作ることができる。 ↑の画像のように、マウ …

category: Technology

date: October 07, 2007

Javascriptの便利ツール&チュートリアル25選『JAVASCRIPT TOOLBOX: 25+ Tools & Tutorials For JavaScript』

Javascriptをよく使っている。 そんなあなたにおすすめなのが、『JAVASCRIPT TOOLBOX: 25+ Tools & Tutorials For JavaScript』。Javascriptの便利ツール&チュートリアル25選だ。 以下にい …

category: Technology

date: September 27, 2007

PHPの便利サイト20選『The PHP Toolbox: 20+ PHP Resources』

PHPを使っている。 そんなあなたにおすすめなのが、『The PHP Toolbox: 20+ PHP Resources』。PHPの便利サイト20選だ。 以下にいくつかご紹介。 » c.anvas.es 　簡単に使えることにフォーカスしたPHP5のフレームワーク …

category: Technology

date: September 10, 2007

CSSで棒グラフをデザインする方法『CSS For Bar Graphs』

棒グラフもデザインしたい。 そんなあなたにおすすめなのが、『CSS For Bar Graphs』。CSSで棒グラフをデザインする方法だ。 このエントリーでは、棒グラフをデザインするCSSが紹介されている。つい手を抜いてしまいがちな棒グラフも、これを参考に作ればデザインするこ …

category: Technology

date: September 09, 2007

プレゼンで視聴者の心を確実につかむ『Mac OS X ズーム機能』

プレゼンを魅力的なものにしたい。 そんなあなたにおすすめなのが、『Mac OS X ズーム機能』。プレゼンで視聴者の心を確実につかむ技だ。 以下にステップでご紹介。 1.システム環境設定 / ユニバーサルアクセス / ズーム機能を「入」に設定 2.オプションをクリック 3.最 …

category: Technology

date: September 04, 2007

Script.aculo.usの実用例がたくさん見られる『Script.aculo.us Samplr』

Script.aculo.usを実際にサイトで使いたい。 そんなあなたにおすすめなのが、『Script.aculo.us Samplr』。Script.aculo.usの実用例がたくさん見られるDemoサイトだ。 iPhoto resizeやNewstickerなど、すぐに使 …

category: Technology

date: September 01, 2007

PrototypeとScriptaculousで作る日付入力カレンダー『DatePicker using Prototype and Scriptaculous』

日付入力カレンダーをクールなインターフェースにしたい。 そんなあなたにおすすめなのが、『DatePicker using Prototype and Scriptaculous』。PrototypeとScriptaculousで作る日付入力カレンダーだ。 DatePicker …

category: Technology

date: August 30, 2007

ラジオボタンやチェックボックスに画像が使えるJavascriptフォーム『FancyForm』

ラジオボタンやチェックボックスに画像を使いたい。 そんなあなたにおすすめなのが、『FancyForm』。ラジオボタンやチェックボックスに画像が使えるJavascriptフォームだ。 以下のようなフォームを作成することができる。 » FancyForm Script …

category: Technology

date: August 25, 2007

WordPressのレトロなMacOSデザインテーマ『Retro MacOS WordPress Theme』

WordPressのテーマで人と違うものを選びたい。 そんなあなたにおすすめなのが、『Retro MacOS WordPress Theme』。WordPressのレトロなMacOSデザインテーマだ。 このエントリーでは、↑のようなレトロなMacOSライクなWordPress …

category: Technology

date: August 23, 2007

Macで打つ特殊文字ショートカット集（™ ®やアップルマークなど）『Reference for EVERY Character Key on a Mac』

Macで特殊文字を打ちたいときに困る。 そんなあなたにおすすめなのが、『Reference for EVERY Character Key on a Mac』。Macで打つ特殊文字ショートカット集（≠±やアップルマークなど）だ。 このエントリーでは、Macで打つ特殊文字のショ …

category: Technology

date: August 21, 2007

デザイナーならこう作るCSSスタイルテーブル『A CSS styled table version 2』

かっこいいテーブルをデザインしたい。 そんなあなたにおすすめなのが、『A CSS styled table version 2』。デザイナーならこう作るCSSスタイルテーブルだ。 このエントリーでは、クリーンなソースでコーディングされたテーブルが2つ紹介されている。 &raq …

category: Technology

date: August 20, 2007

見やすいチャートを作成するコード22選『22 Code Snippets for Creating Decent Charts』

見やすいチャートを作りたい。 そんなあなたにおすすめなのが、『22 Code Snippets for Creating Decent Charts』。見やすいチャートを作成するコード22選だ。 以下にいくつかご紹介。 » CSS FOR BAR GRAPHS 　 …

category: Technology

date: August 17, 2007

1分で自分の紹介ページが作れるAjaxCMS『Jimdo』

写真や動画を使って自分の紹介ページを作りたい。 そんなあなたにおすすめなのが、『Jimdo』。1分で自分の紹介ページが作れるCMSだ。 『Jimdo』では、ユーザ名とメールアドレスを入力すると、すぐにマイページが持てる。写真や動画をlightboxエフェクトのギャラリーで持て …

category: Technology

date: August 10, 2007

WordPressをパーソナルハブにするためのツール30選『30+ Tools to Turn WordPress into a Personal Hub』

WordPressにパーソナルな情報を盛り込みたい。 そんなあなたにおすすめなのが、『30+ Tools to Turn WordPress into a Personal Hub』。WordPressをパーソナルハブにするためのツール30選だ。 その中でも使えそうなものをい …

category: Technology

date: August 09, 2007

Movable Type 4 速攻レビュー！

昨日Movable Type4がリリースされましたね。あまり速攻ではないですが、昨日はダウンロードページからはMT3.35しかダウンロードできなかったので今日インストールしました。 ↑でテストブログをUPしています。 MT4のデフォルトデザイン、いい感じですね。topとbot …

category: Technology

date: August 06, 2007

CSSフレームワークでWebサイトを構築できる『Blueprint』

CSSを読み込んで簡単にWebサイトを構築したい。 そんなあなたにおすすめなのが、『Blueprint』。CSSフレームワークでWebサイトを構築できるツールだ。 『Blueprint』では、MITライセンスでCSSが配布されている。CSSを2ファイル読み込み、class等を …

category: Technology

date: August 04, 2007

読者を増やすためのWordPressプラグイン30選『30+ WordPress Plugins To Get More Blog Readers』

WordPressのブログを書いていてもっとたくさんの人に読んでもらいたい。 そんなあなたにおすすめなのが、『30+ WordPress Plugins To Get More Blog Readers』。読者を増やすためのWordPressプラグイン30選だ。 その中でも使 …

category: Technology

date: August 03, 2007

フェードインするツールチップテキスト『Prototip』

ツールチップテキストを実装するならかっこいいものにしたい。 そんなあなたにおすすめなのが、『Prototip』。フェードインするツールチップテキストだ。 『Prototip』は、prototypeと、scriptaculousなどのライブラリを使ったコード。独得なツールチップ …

category: Technology

date: August 01, 2007

CSSで角丸を作成する方法25選『25 Rounded Corners Techniques with CSS』

CSSで角丸を作りたい。 そんなあなたにおすすめなのが、『25 Rounded Corners Techniques with CSS』。CSSで角丸を作成する方法25選だ。 てかりのあるものからオリジナルなものまで、25個の角丸デザインが紹介されている。 ソースはそれぞれの …

category: Technology

date: July 27, 2007

WordPress管理人のための便利ツール50選『50+ Tools For The WordPress Admin』

WordPressでブログを運営している。 そんなあなたにおすすめなのが、『50+ Tools For The WordPress Admin』。WordPress管理人のための便利ツール50選だ。 その中の使えそうないくつかをご紹介。 » Download Co …

category: Technology

date: July 21, 2007

CSSでDivを天地左右中央に配置する方法『locate div at the center vertically and horizontally』

ちょっと実装したくなったので、CSSでDivを天地左右中央に配置してみました。 Web creatorsに載っていた方法ですw。 » Web creators (ウェブクリエイターズ) 2007年 03月号 ■CSSは↓。 <style type=&quot …

category: Technology

date: July 18, 2007

無料で使えるCSSテンプレート集『Boxed CSS』

CSSのテンプレートを探している。 そんなあなたにおすすめなのが、『Boxed CSS』。無料で使えるCSSテンプレート集だ。 they are free to be downloaded and modified, without a linkback required. …

category: Technology

date: July 15, 2007

会社と自宅でiTunesを共有するフリーソフト『Simplifymedia』

iTunesを会社と自宅で共有したい。 そんなあなたにおすすめなのが、『Simplifymedia』。会社と自宅でiTunesを共有するフリーソフトだ。 『Simplifymedia』を使えば、会社と自宅でiTunesの曲を共有できたり、グループに追加した友人と共有することも …

category: Technology

date: July 14, 2007

無料で使えるAjax,PHP,MySQLで作られたtumblelogCMS！『gelato』

すごいCMSを見つけてしまった。 今回ご紹介するのは、『gelato』。無料で使えるAjax,PHP,MySQLで作られたtumblelogCMSだ。 『gelato』は、tumblrタイプのブログを書くことができる。tumblrと違う点は、自分のサーバで動かせる点だ。 イン …

category: Technology

date: July 10, 2007

非商用で無料で使えるポラロイド風のFlashギャラリー『Polaroid Gallery v.1.0』

写真をポラロイド風にディスプレイしてみたい。 そんなあなたにおすすめなのが、『Polaroid Gallery v.1.0』。非商用で無料で使えるポラロイド風のFlashギャラリーだ。 『Polaroid Gallery v.1.0』はとてもクール。写真をドラッグできるほか、 …

category: Technology

date: July 07, 2007

マウスの軌跡を記憶してコマンドとして使える『FlyGesture』

アプリをダブルクリックするのもダッシュボードからクリックするのも面倒だ。 そんなあなたにおすすめなのが、『FlyGesture』。マウスの軌跡を記憶してコマンドとして使えるアプリだ。 Mac OS X v. 10.4.3以降のアプリなのだが、とても面白い。 ↓にMovieが紹 …

category: Technology

date: July 05, 2007

マウスオーバでツールチップテキストを表示する方法『Effect.Tooltip』

マウスオーバでツールチップテキストを表示させたい。 そんなあなたにおすすめなのが、『Effect.Tooltip』。マウスオーバでツールチップテキストを表示する方法だ。 『Effect.Tooltip』では、4種類のデモが用意されている。 CSS、およびJavascriptソ …

category: Technology

date: June 28, 2007

場所を取らないアルミ製のMacBookスタンド『Floater』

MacBookを大きいモニタにつなぐとき、場所を取って仕方がない。 そんなあなたにおすすめなのが、『Floater』。場所を取らないアルミ製のMacBookスタンドだ。 If you connect your notebook computer to a large scre …

category: Technology

date: June 28, 2007

新しくて使えるWordPressのデザインテンプレート23選『23 fresh, usable, simple and and elegant WordPress themes』

Wordpressのデザインテンプレートを探している。 そんなあなたにおすすめなのが、『23 fresh, usable, simple and and elegant WordPress themes』。新しくて使えるWordPressのデザインテンプレート23選だ。 Le …

category: Technology

date: June 28, 2007

オンラインでできるJavascriptテトリス『Javascript Tetris』

オンラインでちょっとゲームがしてみたい。 そんなあなたにおすすめなのが、『Javascript Tetris』。オンラインでできるJavascriptテトリスだ。 やっぱりゲームの王道（？）テトリス。動きもさくさくではまります。 操作方法は以下。 ↑・・・回転 ← →・・・移 …

category: Technology

date: June 26, 2007

ブロックを穴にぴったり落とすフラッシュゲーム『Bloxorz』

ストレス解消にちょっとゲームがしてみたい。 そんなあなたにおすすめなのが、『Bloxorz』。ブロックを穴にぴったり落とすフラッシュゲームだ。 ステージは33。はじめは感覚がつかみにくいが、ブロックをいろいろ動かしているうちにコツがつかめてくる。 「Save」「Send」「D …

category: Technology

date: June 25, 2007

画像にてかり効果を与えるjavascript『Glossy.js』

画像に簡単にてかり効果を与えたい。 そんなあなたにおすすめなのが、『Glossy.js』。画像にてかり効果を与えるjavascriptだ。 『Glossy.js』はとてもシンプル。ダウンロードしたglossy.jsを読み込んで、imgタグにclass=”gloss …

category: Technology

date: June 23, 2007

IEとFFで同時にCSSを確認しながら編集できるフリーソフト『CSSVista』

異なるブラウザのブラウザチェックをもっと簡単にしたい。 そんなあなたにおすすめなのが、『CSSVista』。IEとFFで同時にCSSを確認しながら編集できるフリーソフトだ。 What is it? CSSVista is a free Windows application …

category: Technology

date: June 22, 2007

Ajaxのローディング画像ジェネレータ『AJAX LOADING GIF GENERATOR』

Ajaxのあのくるくる回るロード画像を作りたい。 そんなあなたにおすすめなのが、『AJAX LOADING GIF GENERATOR』。Ajaxのローディング画像ジェネレータだ。 『AJAX LOADING GIF GENERATOR』は、ローディング画像の種類が豊富なのと …

category: Technology

date: June 19, 2007

ドラッグできるアコーディオンメニューを実装する方法『Accordion, the Ext JS Extension Class Example, Ver.: 1.0.1』

アコーディオンのメニューを実装したい。 そんなあなたにおすすめなのが、『Accordion, the Ext JS Extension Class Example, Ver.: 1.0.1』。ドラッグできるアコーディオンメニューを実装する方法だ。 このサイトでは、メニューがア …

category: Technology

date: June 18, 2007

CSSのナビゲーションメニュー37選『CSS Navigation Techniques (37 entries)』

CSSでナビゲーションの実装方法がまとまっているサイトはないだろうか。 そんなあなたにおすすめなのが、『CSS Navigation Techniques (37 entries)』。CSSのナビゲーションメニュー37選だ。 このエントリーでは、CSSで作られたナビゲーション …

category: Technology

date: June 17, 2007

無料で使えるWordPressのデザインテンプレート『CSS Design Templates』

WordPressのかっこいいデザインテンプレートはないだろうか。 そんなあなたにおすすめなのが、『CSS Design Templates』。無料で使えるWordPressのデザインテンプレートだ。 『CSS Design Templates』では、たくさんのデザインテンプ …

category: Technology

date: June 12, 2007

クールなAjaxスクリプト108選『Ajax Compilation』

いろんなAjaxを実装したい。 そんなあなたにおすすめなのが、『Ajax Compilation』。クールなAjaxスクリプト108選だ。 以下にご紹介する。 Pie & Donut chart 　パイ&ドーナツチャートを実装 Reflection.js …

category: Technology

date: May 29, 2007

無料で使えるWordPressテンプレート20選『20 WordPress themes That Don’t Disappoint』

WordPressのかっこいいデザインテンプレートを探している。 そんなあなたにおすすめなのが、『20 WordPress themes That Don’t Disappoint』。無料で使えるWordPressテンプレート20選だ。 このエントリーでは、スクリ …

category: Technology

date: May 25, 2007

無料で実装できるAjaxなインターフェース30選『INTERFACE ELEMENTS for jQuery』

Ajaxなインターフェースを実装したい。 そんなあなたにおすすめなのが、『INTERFACE ELEMENTS for jQuery』。無料で実装できるAjaxなインターフェース30選だ。 このサイトでは、scriptaculousのようなインターフェースのデモがjQuery …

category: Technology

date: May 19, 2007

無料で使えるCSSグラフ9選『10 Free CSS Graph Resources』

クリーンなソースでグラフを作りたい。 そんなあなたにおすすめなのが、『10 Free CSS Graph Resources』。無料で使えるCSSグラフ9選だ。 以下にご紹介する。 » Ajax MGraph Firefox,IE,Operaで動作するXHTML/ …

category: Technology

date: May 19, 2007

デザインフレームをCSSで作る方法『CSS Boxes with Outside Frame (Rounded or Not)』

デザイン性のあるフレームをCSSで作りたい。 そんなあなたにおすすめなのが、『CSS Boxes with Outside Frame (Rounded or Not)』。デザインフレームをCSSで作る方法だ。 このエントリーでは、HTML、およびCSSのソースコードが公開さ …

category: Technology

date: May 17, 2007

アンカーテキストならぬアンカーボックスが登場『Link Boxes』

CSSが好きだし得意だ。 そんなあなたにおすすめなのが、『Link Boxes』。アンカーテキストならぬアンカーボックスだ。 『Link Boxes』は、画像ではなく、テキストベースのボックスをボックスごとリンク設定できる。 サンプルは↓のページから見られる。 » …

category: Technology

date: May 12, 2007

無料で使えるベリークールなスクロールするJavascriptツール『iCarousel』

Ajaxなスクロールインターフェースを実装したい。 そんなあなたにおすすめなのが、『iCarousel』。無料で使えるベリークールなスクロールするJavascriptツールだ。 『iCarousel』では、かなりかっこいいインターフェースがオープンソースとして無料で提供されて …

category: Technology

date: May 10, 2007

あなたがきっと知らないMac OS Xのコマンドライン『Ten OS X Command Line Utilities you might not know about』

Mac OS Xをギークな感じで使いこなしたい。 そんなあなたにおすすめなのが、『Ten OS X Command Line Utilities you might not know about』。あなたがきっと知らないMac OS Xのコマンドラインだ。 ↑のように、Ter …

category: Technology

date: April 24, 2007

無料でwordpressをお金に換えるプラグイン5選『5 Free WordPress Plugins to help you Monetize your Blog』

wordpressを作っていて、収益化したい。 そんなあなたにおすすめなのが、『5 Free WordPress Plugins to help you Monetize your Blog』。無料でwordpressをお金に換えるプラグイン5選だ。 このエントリーでは、wo …

category: Technology

date: April 21, 2007

MacのSpotlightライクな検索を実装する方法『Spotlight-Like Search As You Type With CSS, AJAX & JS』

サイト内検索をもっとかっこいいインターフェースにしたい。 そんなあなたにおすすめなのが、『Spotlight-Like Search As You Type With CSS, AJAX & JS』。MacのSpotlightライクな検索を実装する方法だ。 Mac …

category: Technology

date: April 19, 2007

MacのFinderをリフレッシュする『Refresh Finder』

MacのFinderを強制的にリフレッシュしたい。 そんなあなたにおすすめなのが、『Refresh Finder』。MacのFinderをリフレッシュするアプリだ。 使う機会はあまりないかもしれないが、重いデータを処理しているときなど、明示的にリフレッシュしたいときに使えるか …

category: Technology

date: April 14, 2007

オープンソースのAjaxブログシステム『lingua』

オープンソースのかっこいいブログシステムを探している。 そんなあなたにおすすめなのが、『lingua』。オープンソースのAjaxブログシステムだ。 『lingua』は、PHP、MySQL、Ajaxで作られている。 It is designed to be as incredi …

category: Technology

date: April 14, 2007

『こっそりメッセージ』を作りました。

ブログのサイドバーに『こっそりメッセージ』をつけました。 前からAjaxのPOSTをテストしていたものがあって、それを実装したのです。エンコードにかなりてこずりました。。 何かありましたらメッセージをお待ちしています☆ブログには公開されないようになっています。 一度使ってみて …

category: Technology

date: April 10, 2007

WordPressのかっこいいデザインテンプレート100選

WordPressのかっこいいデザインテンプレートを探している。 そんなあなたにおすすめなのが、『TICKLE IN MY MIND』と『Dr. Web Weblog』。WordPressのかっこいいデザインテンプレートを紹介しているサイトだ。 今回、WordPressのデザ …

category: Technology

date: April 03, 2007

超シンプル&クールなCSSデモンストレーションサイト『CSS easy』

CSSが苦手で、簡単にCSSレイアウトを実装したい。 そんなあなたにおすすめなのが、『CSS easy』。超シンプル&クールなCSSデモンストレーションサイトだ。 『CSS easy』では、1カラムのトップナビゲーション、2カラムのレフトナビゲーションなど、いろんな …

category: Technology

date: March 30, 2007

実装してみたいjavascript15選『15 Javascript Snippets You Can’t Live Without』

javascriptでweb2.0な動きを実装してみたい。 そんなあなたにおすすめなのが、『15 Javascript Snippets You Can’t Live Without』。実装してみたいjavascript15選だ。 このエントリーでは、素敵なjavascrip …

category: Technology

date: March 29, 2007

XAMPPでPHP4とPHP5を切り替える方法

なんだか最近Tipsが増えてきた。ちょっと完全に仕事モードなので、知ったことをキャプチャ付きでプレゼンテーション的に紹介します！ Windowsで簡単にPHPの開発環境が構築できるXAMPPですが、PHP4とPHP5が切り替えられます。 その機能を『PHP switch』と言 …

category: Technology

date: March 24, 2007

倒れたうさぎを集中治療で救い出せ！『10mg』

クリエイティブなフラッシュが見たい。 そんなあなたにおすすめなのが、『10mg』。倒れたうさぎを集中治療で救い出すゲームだ。 『10mg』では、まずうさぎのBELLY（おなか）をクリックすることでうさぎをぶっ倒す。（自分で倒すところがみそだ） それから集中治療していくのだが、 …

category: Technology

date: March 21, 2007

すごく面白い動きが見られるJavascriptライブラリ『DED Chain』

javascriptで面白いエフェクトが作ってみたい。 そんなあなたにおすすめなのが、『DED Chain』。すごく面白い動きが見られるJavascriptライブラリだ。 『DED Chain』のデモでは、とても面白い動きを見ることができる。 「Run Code」をクリックす …

category: Technology

date: March 17, 2007

session_destroy(): Trying to destroy uninitialized session『PHPバグフィックス』

PHPバグフィックスメモ。超小ネタ。 session_destroy(): Trying to destroy uninitialized session 上記のWarningは以下の方法で回避。 【変更前】 session_destroy(); 【変更後】 @session …

category: Technology

date: March 17, 2007

shrinkして消えて現れるAjaxエフェクト『Effect.shrink | scriptaculous』

テストで作っていたAjaxエフェクトをメモもかねてエントリー。 scriptaculousを見ていて、shrinkが面白かったので実装してみました。 ↑の画像をクリックしてみてください。 shrinkして消えて現れます。 仕組みとしては、Effect.Shrink(this) …

category: Technology

date: March 17, 2007

タブデザインを簡単に実装する方法『Control.Tabs』

ページ遷移のないタブデザインを簡単に実装したい。 そんなあなたにおすすめなのが、『Control.Tabs』。このサイトを見れば、タブデザインを簡単に実装できる。 『Control.Tabs』では、タブデザインのソースを配布してくれている。 ↑の画像のように、「One」「Tw …

category: Technology

date: February 28, 2007

Rico + CSS のblockquote『Rico Quote』を作りました。

Rico + CSS のblockquote『Rico Quote』！Rico + CSS のblockquote『Rico Quote』！ すごくシンプルなblockquoteが作りたくなったので作りました。 Rico + CSS のblockquote『Rico Quot …

category: Technology

date: February 27, 2007

画像を手軽に反射させる『reflection.js』

Ajaxにはまっているのでご紹介。 随分前に出たreflection.jsですが、試してみると思ったより簡単だったので実装してみました。 ■headの内容は↓ <script type="text/javascript" src="refl …

category: Technology

date: February 21, 2007

Ricoで簡単角丸作成！『rico.js』

Ricoで角丸を実現するのはとても簡単。prototype.jsとrico.jsを読み込む。functionを作成する。対象のタグにfunctionで指定したclassを設定する。 Ajaxの本を2冊買って、ちょっとどっぷりAjaxな感じなのでご紹介。 rico.jsを使って …

category: Technology

date: February 20, 2007

AjaxなECサイト『ECナビ』

気持ちいいインターフェースで、じっくり商品を選びたい。 そんなあなたにおすすめなのが、『ECナビ』。AjaxなインターフェースのECサイトだ。 サイトとしては超有名なのであえて紹介するまでもないんだけれど、何気なく見ていてインターフェースがとても使いやすく気持ちいいものになっ …

category: Technology

date: February 14, 2007

CSSでバブルタイプのblockquote『Bubble Quote』を作りました。

先日のエントリーで紹介した『CSS Speach Bubbles』が好評だったこともあって、無性に作りたくなったので作りました。 CSSでバブルタイプのblockquote『Bubble Quote（バブルクオート）』です。 特長は以下の4点です。 1.クリーンHTML！CS …

category: Technology

date: February 14, 2007

Yahoo.comのようなマウスオーバでタブを切り替えるインターフェースをCSSで作成『Mini tabbed pages』

↑のYahoo.comのようなマウスオーバでタブを切り替えるインターフェースが作りたい。 そんなあなたにおすすめなのが、『Mini tabbed pages』。ミニタブページが作成できるCSSを配布してくれている。以前紹介したCSS Playのエントリーだ。 CSSは以下の通 …

category: Technology

date: February 12, 2007

CSSでバブルタイプのblockquoteデザイン『CSS Speach Bubbles』

手軽にblockquote（引用）のデザインがしたい。 そんなあなたにおすすめなのが、『CSS Speach Bubbles』。CSSによるバブルタイプのblockquoteデザインだ。 このサイトでは、CSSでレイアウトされた、バブルタイプのblockquoteデザインを配 …

category: Technology

date: February 05, 2007

Web制作者のためのCSSブックマークレット『tingelets』

Webサイトを作っていて、CSSを簡単に確認したい。 そんなあなたにおすすめなのが、『tingelets』。Web制作者のためのCSSブックマークレットだ。 このブックマークレットの特長は、色でカラーリングしてくれる点。pタグ、h1タグなど、ブックマークに追加したリンクをクリ …

category: Technology

date: January 28, 2007

ポップなCSSギャラリー！『CSS galleries』

CSSスタイルのWebデザインに困ったら、『CSS galleries』がおすすめだ。 このサイトでは、優れたCSSサイトをたくさん集めている。制作者がWebデザイナーということで、デザイン的にも優れたサイトが集まっているのが特長だ。 「Webデザインのインスピレーションに」 …

category: Technology

date: January 28, 2007

PerlからPHPに乗り換える人のためのコード対応表『Perl/Php Translation』

Perlを使っているけれどPHPも使う、PHPを使っているけれどPerlも使ってみたい。 そんなあなたにおすすめなのが、『Perl/Php Translation』。 このサイトでは、PerlとPHPで対応するコードを教えてくれている。Perlでarrayの書き方はこう、PH …

category: Technology

date: January 22, 2007

diggの3Dアニメーション『RSS in 3D』

Webサイトに何かもうちょっと動きがほしい。 そんなあなたには、『RSS in 3D』を見てもらいたい。 このサイトでは、diggを3Dでアニメーション化している。Flashでヒュイーンと動くインターフェースだ。上下左右に移動できるし、ズームアップもスムーズだ。 なかなか珍し …

category: Technology

date: January 10, 2007

超クリエイティブなフラッシャー『lab.mathieu-badimon.com』

これからのインターフェースはどうなっていくのだろうか。やはり動画が増えていき、広告にしても、インターフェースにしても、より動きのあるものに変わっていくのだろうか。 そんな時に見つけたのが、『lab.mathieu-badimon.com』。 このサイト、かなりぶっとんでいる。 …

category: Technology

date: December 24, 2006

ポップなクリエイター [ROXIK]

クリエイティブな刺激がほしいと思ったら、ROXIKがおすすめだ。 このサイトでは、人が風で飛ばされていくと次のステージに進んでいく。最後には、惑星までも吹っ飛んでいく。 とてもクリエイティブを感じる作品である。 作者は少し前に話題になったPICTAPSの作者でもあり、かなりの …

category: Technology

date: December 23, 2006

無料PHPスクリプトに特化したdiggサイト [scriptvote]

アジャイル開発にはオープンソース。何かいいスクリプトは落ちていないかな。 そう思ったらscriptvoteに行こう。 このサイトでは、無料でダウンロードできるPHPスクリプトがたくさんアップされている。しかも、diggのように投票機能がついていて、TOP HITSでランキング …

category: Technology

date: December 03, 2006

世界中の人の感情をドットで表示 [wefeelfine]

たまにニューヨークのことを考える。そこにはどんな人がいて、何を考えながら歩いているんだろう。自分がもし今そこにいたら、小さな悩みごとや問題も吹き飛びそうだ。 wefeelfineは、世界中の人の感情をドットで表示してくれるサイト。今いる狭い世界のことを忘れて、世界の広さを考え …

category: Technology

date: November 29, 2006

オープンソースのFlash配布サイト [Levitated]

アジャイル（迅速）開発の時代だ。スピードを追求してサービスをリリースしたい。世界中では毎日のように新しいサイトが立ち上がっている。少しでもシリコンバレーに追いつきたい。 そんなアジャイルな人にぴったりなのがオープンソース。 Levitatedでは、シンプルな動きからゲームのよ …

category: Technology

date: November 24, 2006

UKのCSSデモンストレーションサイト [CSS play]

UKに憧れる。ファッションや音楽、建築、何にしても私を魅了する。 そんなUKのサイトで、たくさんのテクニカルなCSSを配布しているサイトを見つけた。 CSS play。このサイトでは、menuやboxなど、技術的ですぐに使えそうなCSSを配布している。 copyrightとし …

category: Technology

date: November 18, 2006

Ameba Vision、リア・ディゾンに乗っ取られる

Ameba Visionがリア・ディゾンに大胆に乗っ取られています。 しかもなにもんやねんというくらいかわいい。

category: Technology

date: November 18, 2006

Weather HacksをPHP4でparse、CSSでレイアウト

別のブログで作っていたWeather Hacksのparseをこのブログにも導入。 サイドバーに表示しました。 xmlで提供されていて、CSSでレイアウトが自由にいじれるからデザインもマッチしていい感じです。 シンプルに、今日と明日の天気が知りたいな、と思って今日と明日の天気 …

category: Technology

date: November 15, 2006

text-indentとpadding-left

text-indentとpadding-leftは正しく使わないと表示がおかしくなります。 下記の画像を見てください。 【text-indent:33px;】 上はentry-headerに背景画像でアイコンを表示していて、テキストをインデントしているんですが、改行されたとき …

category: Technology

date: November 14, 2006

角丸をWeb上で生成、cornershop

角丸をWeb上で生成してくれます。htmlとcssを生成してくれますね。 サイトもすごくシンプルだし使いやすそうです。

category: Technology

date: November 12, 2006

Win環境で崩れていたCSSを修正

Macで制作しているのでWindowsは後回しにしていたのですが、ずっとサイドバーが崩れていましたね。 コメントアウトのところが変になっていたので削除して修正しました。 まだWindows IEでは理想的な表示にはなっていないですが。 本当はWindows IEに合わせるべき …

category: Technology

date: November 10, 2006

「このページの先頭へ」のリンクをjavascriptでスムーズな動きに

「このページの先頭へ」のリンクをつけました。 画像はこれ　→　 htmlソースは下記。 <a href="#" onclick="backToTop(); return false"><img src="/m …

category: Technology

date: November 10, 2006

「このエントリーを含むはてなブックマーク」アイコンを追加

「このエントリーを含むはてなブックマーク」アイコンを追加しました。 画像はこれ　→　 ソースは下記の通りです。 <a href="http://b.hatena.ne.jp/entry/<$MTEntryPermalink$>">& …

category: Technology

date: October 08, 2006

MT3.3にアップグレード

クロスサイトスクリプティングに対する脆弱性が見つかったとsixapartから知らせがあったのでアップグレード。ちょっと面倒だったんだけどやりました。 最新版は気持ちいいしね。 いつものようにパッケージをダウンロード。 そのままCGI-PATHに全ファイルアップロード。 mt- …

category: Technology

date: September 27, 2006

PHPでRakuAPI。simplexml

楽天のアフィリエイトをxml等で返してくれるAPIが公開されていますね。 → RakuAPI Version 0.9 – 楽天市場非公式ウェブサービス PHPのsimplexmlを使って実装してみました。 例えば、ラッドミュージシャンの楽天商品をparseしたい場 …

category: Technology

date: September 20, 2006

RSS Feedをクールにサイトに貼付けられる、Grazr

graze：草を食う、牧畜 feedとかけて、feedを食う、集める、くらいの意味なのかな。 下記のように貼付けられます。 単に貼付けるだけじゃなく、ツールになっていて、feed URIの変更、表示サイズのカスタマイズなど、いろいろとできます。

category: Technology

date: July 21, 2006

lightbox.jsでフォトギャラリー Ajax

lightbox.jsの実装が完了。 かなりうれしい。 Ajax lightbox.js

category: Technology

date: July 18, 2006

AjaSQL

AjaSQL。 【入力補助】郵便番号(前方一致)・住所(部分一致)によるあいまい検索 これすごいですね。 ref. AjaSQLについて Ajaxな掲示板を見つけてカスタマイズして構築しようと調べ中。

category: Technology

date: July 17, 2006

MovableTypeアップグレード [3.2-ja-2 → 3.31-ja]

MovableTypeをアップグレード。 3.2-ja-2 → 3.31-ja です。 見た目はまだ何も変わらないんだけど、いくつか内部的に変更があるようなので、見てみます。 手順は下記。 1.Movable Type のライセンスと購入について からMT-3.31-jaをダ …

category: Technology

date: July 17, 2006

Google Mapsにマーカーを設置中

Google Mapsにマーカーを設置中です。 2006.2のweb creators(P96)にGoogle Maps APIの導入方法の説明があって、 仕掛けで見せる! WEBデザインTIPS ＆ TRICS からソースがダウンロードできる。 でもマーカーを一度閉じてしま …

category: Technology

date: July 13, 2006

wordpress2.0.3構築完了

オープンソースのGPLブログツール、wordpressをインストール、構築が完了しました。 → /wordpress/ すごい。。数分でできた。 PHP+MySQLの環境があれば一発です。 wordpressインストール方法———&#821 …

category: Technology

date: July 07, 2006

複数サイトを検索！ various search作りました。

複数サイトが検索できるツールを作りました。 Ajaxで画面遷移なく検索結果が出力できるようにできればいいんですが。 とりあえずblankで飛ばすようにしたいと考えています。

category: Technology

date: July 05, 2006

PHPで形態素解析

MeCab を使って文章の形態素解析をする PHP 用の拡張モジュールです。 MeCab は 京都大学情報学研究科−日本電信電話株式会社コミュニケーション科学基礎研究所共同研究ユニットプロジェクトの一環として開発されたオープンソース形態素解析エンジン。 えらいことですね。 検 …

category: Technology

date: July 05, 2006

safariのjavascriptデバッガ、Drosera

javascriptのデバッガってあるんですね。 しかもsafari対応ということでとてもうれしい。 使ってみます。

category: Technology

date: July 05, 2006

wonderful bud作りました。

Flickrのインターフェースをどうしても作りたくなって、作りました。 wonderful bud、機能はまだ何もないのでα版です。 onclickでFlickrの写真編集画面のようにボックスが現れます。 コンセプトとしては、 1.テーマを決める。 2.テーマについて思いつい …

category: Technology

date: June 30, 2006

fadeout Ajax, Fadetodo作りました。

どうしても以前からAjaxによるfadeout処理がやりたくて、今日今すぐにやりたくなったので作ってみました。 百式管理人、田口さんが言うように、機能はウルトラシンプルを追求しようと思っているんですが、まだまだシンプルすぎて使い道がわからないくらいのレベルです。 ただtodo …

category: Technology

date: June 21, 2006

Ajaxフレームワーク、Spry

AdobeからAjaxフレームワーク、Spryが公開されていますね。 素晴らしいのが、Spryはプログラマではなく、デザイナー向けに作られたフレームワークであるという点。 いいですね。Smartyはちょっと敷居が高くても、デザイナーでありながらJavascript、Ajaxを …

category: Technology

date: June 18, 2006

MacにFedora Core インストール失敗

失敗しました。 どうしようかな。 一旦お手上げです。 WindowsにQEMUで入れてみます。

category: Technology

date: June 18, 2006

MacでFedora Coreをパラレルに動かす Parallels Desktop

出ましたね。Parallels Desktop。ついに製品版になりました。 今は30$安くなっていて、5000円程度。 早く買いたい。 今はトライアルをインストールして動かしています。 早速DVD-ROMからFedora Coreをインストール中。 うまくいくかな。 実はMa …

category: Technology

date: June 06, 2006

Ajax samples

Ajaxianにwindow classというのが紹介されていたので使ってみる。 → /prototype_windowclass/samples/ パーツにいろいろと使えそう。 ハックしてみます。 ref. Prototype Window Class

category: Technology

date: June 04, 2006

Ajaxなto-do-listをハック中

Ajaxなto-do-listを研究中。 サイドバーにアルファバージョンとして付けてみました。 click here to add a new item をクリックすると、ポンとテキストが入力され、テキストをクリックすると、テキストボックスになり編集できるようになります。 本 …

category: Technology

date: June 03, 2006

AjaxなタイマーTODO管理ツール、TimeTracker

オンライン上のTODO管理に新しいツールを発見しました。 タイマーが設定できるTODO管理ツールです。 TODOを設定して開始時刻と終了予定時刻を入力。 Start Timerを押すとタイマーが回り始め、 -1h 05mn という風に残り時間を表示してくれる。 スピードを追求 …

category: Technology

date: June 03, 2006

Google Ajax Search API公開

Google Ajax Search APIが公開されています。 早速サイドバーにつけてみました。 SSIでインクルードしています。 Ajax(javascript)になっているので、こんな風に簡単に取り付けられるのが素晴らしい。 しかもAjaxで気持ちいい。 検索ボックスの …

category: Technology

date: May 31, 2006

Ajax! Wridea

Ajaxの世界では確実に未来が起こっていますね。インターフェースがぶっ飛んでいる。 Wrideaもその一つ。シンプルなメモエディタ、タイトル付けができてかっこよく整理できる。 普段はwriteboardやTa-da Listくらいシンプルでいいですが、何か夢とか面白いことを考 …

category: Technology

date: May 31, 2006

ブログにリアルタイムな時間を表示、javascript

Ajax、ではないですね。単なるjavascriptだけど、Ajaxを勉強していたらやりたくなったのでやってみました。 リアルタイムな時間をサイドバーに表示。 iTimesとネーミングしておきました。 はじめはPHPのgetdateをインクルードしようと単純に考えていたんだけ …

category: Technology

date: May 26, 2006

MacBookのキーボードで色塗り遊び、MacBook Canvas

有名なBlicklifeのoobaさんが面白いものを公開している。 MacBook Canvas。MacBookのキーボードをキャンバスと見立て、ホワイトのMacBookなら黒に、ブラックのMacBookなら白に、キーボードを塗っていける。 javascriptで書いています …

category: Technology

date: May 24, 2006

del.icio.usに気に入った色をブックマーク

しびれました。 del.icio.usを使い始めてから、タギング、シンプルでかっこいい素晴らしいインターフェース等、ほぼすべての点において感動しているのですが、またしびれました。 del.icio.usに気に入った色をブックマークできます。 上図のようにurlに#なしのカラー …

category: Technology

date: May 22, 2006

Movabletype サイドバーにトラックバックを表示させる

Movabletypeのサイドバーにトラックバックを表示させるため下記のコードを追記。 <h2>最近のトラックバック</h2> <ul> <MTPings lastn=”10″> <li>&l …

category: Technology

date: May 22, 2006

MovableType サイドバーをSSI化

MovableTypeのサイドバーをSSI化して更新作業を大幅に効率化。 デフォルトでサイドバーは下記のようにbeta IDで囲まれている。 <div id=”beta”> ————&#821 …

category: Technology

date: May 22, 2006

Movabletype サイドバーにコメントを表示させる

Movabletypeのサイドバーにコメントを表示させるため下記のコードを追記。 <h2>最近のコメント</h2> <ul> <MTEntries recently_commented_on=”10″> …

category: Technology

date: May 20, 2006

MacでWindowsをパラレルで動かす

MacでWindowsを再起動なしで動かしたい、そんなあなたにはこのソフト。 ※Bootcampでは再起動が必要です。 http://www.parallels.com/en/download/mac $39.99。以前はParallels Workstationと呼ばれてい …

category: Technology

date: May 18, 2006

Ajaxの新刊

Ajaxイン・アクションposted with amazlet on 06.05.18Dave Crane Eric Pascarello Darren James 柏原 正三 株式会社はてな インプレス (2006/06/09)Amazon.co.jp で詳細を見る Aja …

category: Technology

date: May 18, 2006

MacBook見てきました。

amazlet on 06.05.18アップルコンピュータ (2006/05/17)Amazon.co.jp で詳細を見る 渋谷のAppleStoreでMacBookを見てきました。 すぐにほしくなりました。 白と黒があって、黒が一番スペックがいい。 でも白も十分な高スペック …

category: Technology

date: May 16, 2006

Mac Bookリリース

げ。Mac Bookがリリースされていました！ やばい。安いし小さいしかっこいい。 2.0GHzについてはMac Book Proとの違いは何なの？っていうくらい十分なスペック。 どうなってるんだいったい。

category: Technology

date: May 16, 2006

AjaxのWebデータベース、Wagby

AjaxのWebデータベース、Wagbyがジャスミンソフトからリリースされています。 AjaxのDBって。面白いことやりますね。 Mac OS Xでも使えて無償でダウンロード利用可。エクセルをドラッグしてタグ付けしたりしてデータを管理できるらしいです。

category: Technology

date: May 16, 2006

Mac OS XでPHP環境を構築！

Mac OS XでPHP環境を構築する方法をメモ。 ・下記のファイルを/Library/WebServer/Documents/配下に置く。 　—————————&#8 …

category: Technology

date: May 16, 2006

Quicksilverプラグインリスト

Quicksilverプラグインリストをメモ。 → Quicksilver plugins

category: Technology

date: May 16, 2006

Quicksilverプラグイン　GoogleCalender Quick Add

グーグルカレンダーにQuicksilverから予定を追加できる！ グーグルカレンダーをハックするにはもってこいのプラグインですね。

category: Technology

date: May 16, 2006

Quicksilverプラグイン、Flickrに画像をアップロード

Flickrに画像を簡単にアップロードできるQuicksilverプラグイン！ 使ってみよう。

category: Technology

date: May 06, 2006

iPodで観光案内

iPodでなんでも済ませたくなってくる。iCalとシンクロスケジュールを管理し、notepadとシンクロしてメモを確認する。 そんなiPodに観光案内はどうか。都市のホテル、レストラン、観光名所などの情報が入れられる。 海外旅行に行った時に、iPodでチェックしてたりするとテ …

category: Technology

date: May 06, 2006

Ajax-pollerでajaxなvoteシステム

ajaxなvoteシステムを見つけたのでやってみたのだが実装できない。。 Installation This is a step by step guide on how to configure this script 1. Modify dbConnect.php. In …

category: Technology

date: May 06, 2006

Macでスクリーンショット（キャプチャ）を撮る方法

Macでスクリーンショットを撮る方法は結構難しい。 グラブっていうアプリケーションを立ち上げて、、そんなことはLifehackerはやりません。 もちろんショートカットなのですが、ボタン３つ+スペースキー、都合ボタンを４つ使うんですね。 WindowsならAlt+Prints …

category: Technology

date: May 06, 2006

BlogTimesでブログの更新時間を表示

BlogTimesを入れてみました。 ブログの更新時間の分布が表示されます。 情報の視覚化という点でfolksonomy（フォークソノミー）と似ていますね。 頭の中も、アウトプットも、情報の視覚化を習慣づけていきたいと考えています。

category: Technology

date: May 06, 2006

検索ボタンをverticalにセンタリング

デフォルトのCSSで、input type=”submit”のところはインライン要素になっているので、vartical-align=middleでセンタリングできますね。 vertical-alignはインライン要素にしか適用されないから使い方に困りま …

category: Technology

date: May 06, 2006

検索ボックスの幅を変更

inputのwidthを変更する場合、下記を編集 .module-search #search { width: 200px; }

category: Technology

date: May 06, 2006

検索ボタンをデフォルトから変更（javascript）

検索ボタンはデフォルトでは <input type=”submit” … となっていますが、検索ボタンを自分で作成したimageに変更したい場合、下記のように記述。 <input type=”image” src=& …

category: Technology

date: May 06, 2006

MovableTypeでGoogleサイトマップ自動生成

Googlebotのクロールを効率化するために、Googleサイトマップを登録するのですが、MovableTypeでGoogleサイトマップを自動生成する方法です。 -> テンプレートを新規作成 　 テンプレート名： Google Site Map（名前は何でもいいです） 　 …

category: Technology

date: May 06, 2006

Movable Type構築にも慣れました。

始めはログインすることさえできなかったMTですが（Melody,Nelsonは大文字、小文字を区別するんですね）、最近は結構慣れてきて、さっと構築できるようになりました。 サイトの導入事例も増えているし、これからもっと広がっていきそうですね。まさにCMSです。 CSSは一から …

category: Technology

date: May 06, 2006

Movable Typeでアクセス解析

MTのプラグインでアクセス解析あるんですよね。 ただ3.1にはないようで、3.2にしか対応していないプラグインなようです。 しかもどこまで機能があるのか不明だし。 一度入れてみます。 あと絵文字も入れたいなと。 いろいろとあるようですね。 結構MT構築の際に絵文字を使いたいと …