Flash製のギャラリーなどでよく 見かけるようなエフェクトが8種 用意されているjQueryを使った スライドギャラリーのAviaSlider をご紹介します。

cssやプログラミングIEのバグはJSで IE6のPNG透過や6、7での 角丸、ドロップシャドウを実装 するjsライブラリのまとめです。 同じ用途でもライブラリによっ て良し悪しだと思いますので、 備忘録的にメモ。 IE6のPNG透過や6、7での 角丸、ドロップシャドウを実装 するjsライブラリのまとめです。 同じ用途でもライブラリによっ て良し悪しだと思いますので、 備忘録的にメモ。 もうIEはいいよとも思いますが、現実そうも行かないのはもどかしいですね。万能では無いですけど、作業工数を減らせるならjsに頼ってもいいと思います。そういう訳で、透過の問題や角丸、ドロップシャドウを実装してくれるjsのメモ。 IE7.js IE6以下でもIE7と同じようなXHTML / CSSの解釈をしてくれます。要DOCTYPE 宣言。 IE6以下をWeb標準に準拠させるライブラリ『IE7.js』 DD_b

話題のcss3ですが、そのcss3 関連のジェネレーターを4つ公開 しているCSS3 Sandboxで基本 を学ぶのもいいかな、と思ったの でメモ的に記事にします。 話題のcss3ですが、そのcss3 関連のジェネレーターを4つ公開 しているCSS3 Sandboxで基本 を学ぶのもいいかな、と思ったの でメモ的に記事にします。 直感でグラデーションやドロップシャドウを作成、リアルタイムでプロパティが変わってくれるのでいい勉強になりそうです。CSS3 Sandboxの4つのジェネレーターをご紹介します。 Linear Gradients グラデーションを作成出来ます。左上でWebkit(SafariやChrome)かFirefoxを選択、その下でプロパティを決めます。実装画面下部に実際のプロパティが表示されるのでどのような数値でどう変化するか、というのが分かると思います。 Text Sha

個人的にWordPressで困っていたのが アップロードした画像を1つ1つ投稿画面 に入れていく作業。かなり面倒でした。で、 そんな悩みを解消できるプラグインが あったのでご紹介します。function使って 出来ない事も無いんですけどね・・ 個人的にWordPressで困っていたのが アップロードした画像を1つ1つ投稿画面 に入れていく作業。かなり面倒でした。で、 そんな悩みを解消できるプラグインが あったのでご紹介します。function使って 出来ない事も無いんですけどね・・ 画像を多く使うブロガーさんも多いかと思いますが、このプラグインでアップロードした複数の画像を投稿画面内に一気に入れられるので執筆時間も減らせるかと思います。 ただ、2.8では動かないっぽいです（ローカルでしか試していませんけど）。 プラグインの用途はギャラリー作成ですが、複数画像の一括投稿が個人的に嬉しかったの

WordPressWPカスタマイズ事始め WordPressを使っているけど、 PHP分からないし、カスタマイズ は未経験・・という方の為の カスタマイズ方法です。PHP を理解せずとも基本構造を ある程度理解すれば可能です。 WordPressを使っているけど、 PHP分からないし、カスタマイズ は未経験・・という方の為の カスタマイズ方法です。PHP を理解せずとも基本構造を ある程度理解すれば可能です。 PHP製のWordPressですので、当然PHPを理解していれば様々なカスタマイズが可能ですが、プログラミング自体まだ敷居はデザインより高いかもしれません。 でも、カスタマイズしてみたい！という方も多いと思いますので今回はカスタマイズ始めの1歩、的な内容です。 はじめにこれはPHPの記事ではありません。コピペ（ファイル間でのソースの移動など）が基本になるのでプログラマーさんからすれば

WordPressWPカスタマイズ 自分用のメモです。過去記事を 新たに更新、アップデートした際 にアップデート記事を最新記事 に含ませるカスタマイズ法。 自分用のメモです。過去記事を 新たに更新、アップデートした際 にアップデート記事を最新記事 に含ませるカスタマイズ法。どこか で役に立つかなと思ったので備忘 録エントリー。 過去の記事をアップデートした記事も最新記事リストに含めます。 コードコードは以下。 <?php $today = current_time('mysql', 1); $howMany = 5; //表示する記事数 if ( $recentposts = $wpdb->get_results("SELECT ID, post_title FROM $wpdb->posts WHERE post_status = 'publish' AND post_modified_

Tips携帯サイト構築 どうもTwitterやってるとiPhoneや Androidなどのスマートフォンの 話題ばかりなので忘れそうですが、 携帯サイトはビジネスには必須 ですので備忘録として記事に。 ちょっと必要に迫られたのでメモ。 どうもTwitterやってるとiPhoneや Androidなどのスマートフォンの 話題ばかりなので忘れそうですが、 携帯サイトはビジネスには必須 ですので備忘録として記事に。 以前にも何度かまとめ記事が話題に上がっているので今更感も否めませんが自分のブログにあったほうが探しやすいのでメモします。 予備知識モバイルサイト構築前に知っておきたいユーザビリティ10のポイント ファーストビューの重要性、色の大事さ、リンク操作に関して記載されています。 モバイルサイト構築前に知っておきたいユーザビリティ10のポイント 携帯サイト（html）の制作に入る前に確認してお

css3のアニメーションプロパティ、transitionがとても面白いので何となくアニメーションのサンプルを色々と作ってみました。まだ対応ブラウザは少ないですが、将来の為に予習してみたのでシェア。 css3のtransitionプロパティは変化を与えるプロパティです。アニメーションを実装できるプロパティはtransitionとanimetionがあり、後者のほうが「アニメーション」としての位置付けっぽいのですが、今回は何となくtransitionを使用しました。 プロパティ：-webkit-transition対応ブラウザ：webkit系(GoogleChrome、Safari等)JavaScript：未使用（※ソース閲覧の部分はjsを使っています） 一応アニメーション以外（角丸など）は-mozも入れています。 サンプルなので「-webkit-transition: *s ease-in-

cssやプログラミングdrop down menu サイトによっては必要ないかも 知れませんが、メニュー項目が 増えてくるとゴチャ付くので、 ドロップダウンするようにして 隠しておくと見やすくなりますね。 サイトによっては必要ないかも 知れませんが、メニュー項目が 増えてくるとゴチャ付くので、 ドロップダウンするようにして 隠しておくと見やすくなりますね。 チュートリアルやジェネレーター、フレームワークなど。多すぎるので絞っています。 CSS Navigation Techniques 様々なタイプのメニューのサンプルの中にドロップダウンがいくつか。 CSS Navigation Techniques CSS Drive / Multiple Levels サンプルいっぱい。 CSS Drive / Multiple Levels Free CSS Drop-Down Menu Frame

今更ですけど、css3のサンプル をメモ代わりに記事にしておき ます。使わないと思っていました が、仕事以外で使うのでコピペ 用にメモ。 実装例をそのままコピペして使えば同様の変形が可能です。ブラウザはChromeとかFiirefox、Safariなどでご覧下さい。細かい対応状況は調べていません。数値は記事に収まり、且つ実装状態が分かるようにしています。見難かったらごめんなさい。webkit系とmoz系を一緒にしてます デフォルトデフォルトの状態 これが基準ですskew / 要素を曲げるskewX(*deg)-moz-transform: skewX(30deg); -webkit-transform: skewX(30deg);

cssやプログラミングIE6でも動くjQuery 使いやすそうなjqueryプラグイン をまとめました。最低でもIE6でも 動いてくれる事を前提にしています。 他サイトでよく見かけるプラグインで、 個人的に実用性のあるプラグインと 思ったものをまとめます。 使いやすそうなjqueryプラグイン をまとめました。最低でもIE6,7でも 動いてくれる事を前提にしています。 他サイトでよく見かけるプラグインで、 個人的に実用性のあるプラグインと 思ったものをまとめます。 IE6、7でも動いてくれて、実用性のあるjQueryいろいろ。確認したブラウザはIE6,7とChromeです。他は大抵動くんじゃないかな（適当）。 デモで画像が透過されていないのもありますが、他のjsライブラリでIE6でも透過可能（DD_belatedPNG.jsとか）なのでそこは抜きにして動作する事を条件に挙げています。主観入

WordPressPSDからWPテーマ オンラインでPSDファイルからｃｓｓを 作成してくれるpsd2cssというWeb サービスがあるのですが、通常は cssとhtmlを作成するこのサービス でWordPressのテーマを作成する 事が可能です。その方法をご紹介。 オンラインでPSDファイルからcssを 作成してくれるpsd2cssというWeb サービスがあるのですが、通常は cssとhtmlを作成するこのサービス でWordPressのテーマを作成する 事が可能です。一応は・・・その方法 を今日はご紹介します。 方法は至って簡単、Photoshopで作成したPSDファイルのテンプレートにレイヤーを2枚加えるだけです。ただし、細かい部分まで作れるのではなく、cssでレイアウトを作ってくれる通常のサービス内容に同梱されているhtmlをWPのテーマファイル用index.phpにするサービスみ

記事単体に別のcssを加えられる ようにする為のメモ。プラグインは 使いたくないよ、という方向けの カスタマイズ方法になります。 記事単体に別のcssを加えられるようにする為のメモ。プラグインは使いたくないよ、という方向けのカスタマイズ方法になります。functions.phpで投稿画面にcssの追加用boxを作成します。 ※追記・プラグインにしました 記事ごとにスタイルを追加出来るように、投稿画面にcss追加用のboxを加える為のカスタマイズ。add-css-jsなら簡単ですが、カスタムフィールドが個人的に面倒だったのでfunctions.phpを使いました。 方法 ↑　こんな感じでcss追加用のboxを作成します。お使いのテーマファイルのfunctions.phpを開いて以下のコードを追加するだけ。 add_action('admin_menu', 'custom_css_hooks'

結構便利そうだったのでご紹介。オンライン でWebサイトの簡単な設計図、いわゆる モックアップをドラッグ&ドロップ、直感で作成 出来て、PDFやJPGで保存出来るフリーの Webサービス、lumzyのご紹介。ユーザー 登録不要というのが良いですね。 日本語もある程度使えて（ボタンのテキストなどには使えないです）、PDFで保存しても文字化けせず、しかもユーザー登録も不要なので結構重宝しそうな気がします。 「モックアップはきれいに作りすぎてはいけない、という話」という記事でもありますが、手書きのような感覚でスピーディに作れるので件の記事内容に沿ったモックアップの作成が出来そう。 lumzy ユーザー登録不要と言うのが手軽でいいですね。それでいて結構高機能なので侮れません。以下に簡単に使い方を。 プロジェクトを作る まず、プロジェクト名を決めます。決めなくてもモックアップは作成出来ますが、決めな

話題のzen-codingをWordPress で使えるようになるプラグイン、 「WP Zen-Coding」を試してみま した。これ、本当に便利です。 話題のzen-codingをWordPress で使えるようになるプラグイン、 「WP Zen-Coding」を試してみま した。これ、本当に便利です。 確かにコーディングスピードが速く なりそうですよ。 zen-codingって何？と言う方は、Zen-Codingが楽しいという記事をご覧下さい。分かりやすいです。 zen-codingを使うと、タグ入力作業をショートカットの要領で行なう事が出来きます。例えば div#header>div#contents>ul.navigation>li*4>aと打ち、ctr+E（winの場合）で以下のHTMLコードを展開してくれます。 <div id="header"> <div id="conten

Webサービス公開前にサイトをチェック Webサイトを制作して公開する際は おかしいところが無いか、不備は 無いか不安になったり、という方も 少なくないのではないかと思います。 Webサイトを制作して公開する際は おかしいところが無いか、不備は 無いか不安になったり、という方も 少なくないのではないかと思います。 そこで、公開前に色々と確認出来たり、 最適化できる様なフリーのサービスや フリーソフトをご紹介します。 ここで言う「公開前」とは「サーバーにアップする」事ではなく、公開を告知したり、プレスリリースを出す前の状態とお受け下さい。ローンチ前と書くべきだったかもしれませんね。。誤解を与えていたら申し訳ないです。 では、ブラウザチェックツール、モニタ別表示チェック、表示スピードチェックツール、cssや画像の最適化ツール、などなどご紹介していきます。 ブラウザチェック各ブラウザでどのように

「自分であんなサイトを作りたい」と、思う Webサービスは結構多いかと思います。 いくつかの有名なWebサービスは クローンのCMSがオープンソースとして 提供されているものがあります。そんな クローンタイプのCMSをいくつかご紹介します。 既出のCMSばかりですが、個人的も一度まとめておきたいのでメモも兼ねて。 Diggクローン 海外でもかなりの人気ソーシャルサイト、Diggのようにユーザーが投稿、Vote（投票）を行えるCMSです。以前SEOカスタマイズ法も書いたので宜しければ合わせてご覧下さい。Pliggが相性悪いなと思うようならPHPDugもいいかも。 Pligg / デモ Deliciousクローン ソーシャルブックマークサイトとして有名なサイトがDeliciousです。タグを付けてWebサイトへのリンクを簡単に追加、共有できるオーップンソースのCMSがscuttleです。僕もこ

GoogleChromeでブラウジング している時に良く使っているショート カットキーをご紹介します。基本的 には左手でショートカットキーを使う ので良く使うのも左手で出来るもの が中心となっています。「そんなの 基本じゃん」という方はスルーの方向で・・ 使い易さ等は個人差が生じるので参考程度という事で。。。WindowsユーザーなのでWindowsでのショートカットになります。 コピー(Ctrl+C)、ペースト(Ctrl+V)、切り取り(Ctrl+X)、undo(Ctrl+Z)、全選択(Ctrl+A)、Ctrl+マウスの上下でページの拡大縮小などなど基本的なショートカットは割愛します。 [note]一応キーボードの画像を載せますが、キーの場所は共通ではありませんので参考イメージとしてご覧下さい。[/note] リロード　Ctrl+R ページをリロードします。Fxでも使っていました。F5で

フリーソフトのみをストック、検索可能な Webサービス、 Prime time freeware をご紹介します。窓の杜やVectorなど でもなかなか目的のソフトが見つから ない、という時に検索してみてはいか がでしょうか。 Prime time freewareはフリーソフト専門の検索エンジンです。UIも見やすいのでお勧めです。 シンプルなデザインで比較的軽いので探しやすい印象です。「人気のソフト」ページなどもありますが、基本的には検索して探す事になりそうです。 ↑　cssで検索 ↑　Photoshopで検索 ↑　PDFで検索 ↑　Flashで検索 ↑　editorで検索 ↑　optimizer（最適化ツール）で検索 結構なストック数で探し甲斐有ります。ソフトはDLして使ってみないといいツールかどうか判断出来ないので出来る限り探す手間は省きたいところです。ご利用は以下より。 Prime

cssの情報まとめです。ローカル 環境にストックしていた情報を 開放してみますのでシェアして 頂ければ幸いです。内容は 結構偏っていると思いますので 参考程度になさってください。 全てのcss情報が有るわけではありません。主観でストックしていたリンク集です。ツールとかメニュー関連とかハックとかいろいろ188の情報です。 ツールオンラインのcssツール。 CSS Validation Service / W3C検証サービス日本語版RoundedCornr / 角丸のHTML・CSSコードを生成してくれるCSS Type Set / ファミリー、色、単語間、行間等をプレビューで確認CSS Text Wrapper / 様々な形のテキストの回りこみを簡単に実現できるCSS Builder / オンラインでスタイルを生成可能Spiffy Box / cssによる角丸を簡単に生成The Box Of