タグ

2011年2月5日のブックマーク (15件)

  • なんともいい感じなボタン素材色々:phpspot開発日誌

    9 FREE Creative Buttons for You to Download | UnderWorld Magazines なんともいい感じなボタン素材色々。 次のようないい感じのデザインのボタンが色々紹介されています。 デザインの感じも様々で、サイトデザインに合わせたものを選べます。 なんとなくサイトのボタン味気ないなぁ、という方は参考にしてみるとよさそう。 ボタンデザインでクリック率も変わったりするようなので、広告のコンバージョンを測る要領でテストしてよいものを採用する等するとよさそうですね。 関連エントリ シンプルでいい感じのボタンテンプレートPSD iPhoneのON/OFFスイッチっぽいcheckbox、radioボタン実装jQueryプラグイン「LightSwitch」 ページの端っこに常に表示させるボタン実装用jQueryプラグイン「EdgeButton」

  • ミニマムで場所を取らないCSSメニューの実装例:phpspot開発日誌

    CSS3 Minimalistic Navigation Menu | Tutorialzine ミニマムで場所を取らないCSSメニューの実装例。 次のように、アイコンだけ並んでいて、マウスオーバーするとメニューの文字がアニメーションしながら表示されるというナビゲーションの実装方法が解説されています。 邪魔にならないのでサイトをシンプルにしたい場合に役立ちそうです。 デモはこちら アニメーションにはcss3のtransitionを使ってる模様。 関連エントリ 長い文書ページでもナビゲーションを付けて分かりやすくできるjQueryプラグイン「jQuery One Page Navigation」。 階層ナビゲーション実装ライブラリ集 サイトを美しく魅せるゴージャスナビゲーション集 パート2 Windows7風ナビゲーション作成チュートリアル

  • 動物に関するPhotoshopブラシ色々:phpspot開発日誌

    30 Animal Inspired Photoshop Brush Sets | Naldz Graphics 動物に関するPhotoshopブラシが色々とまとまっているエントリのご紹介です。 オライリーの表紙とかも動物が多いですが、動物のグラフィックがあるとなんとなく和むという方も多いのではないでしょうか。Twitterの鳥とかも何気にサイトのシンボルになっちゃってたりしますしね。 アニメっぽいものから実写ものまで、30種類ものブラシが紹介されており、色々使えそうです。 タイプも様々ですね。 関連エントリ ハイクオリティなPhotoshopブラシをダウンロードできるサイト色々まとめ 100以上のクールなPhotoShop用ブラシがダウンロードできる「getbrushes.com」 クオリティの高いPhotoShopブラシいっぱい クリエイティブでカッコいいPhotoshopブラシセット

  • 画像要らずのローディング表示を実装できるjQueryプラグイン「Activity Indicator」:phpspot開発日誌

    画像要らずのローディング表示を実装できるjQueryプラグイン「Activity Indicator」 2011年01月31日- Activity Indicator 画像要らずのローディング表示を実装できるjQueryプラグイン「Activity Indicator」。 通常こうしたローディングイメージを実装するにはアニメーションgif等で対応しますが、このプラグインを使うと、画像なしに綺麗なアニメーション付きの読み込みエフェクトを実装出来ます。 SVGやVMLを使ってクロスブラウザで動作するように設計されており、なんとIE6等でもOKだそう。 背景が何色だって気にする必要もありません。 関連エントリ クリックした位置にそのままローディング画像を出せるjQueryプラグイン「Spinner」 現在ローディング中であることをマウスカーソル近くにちょこんと可愛く出せる「prettyLoade

  • シンプルで汎用に使えるWEBレイアウトのPSDソース「Blackbeard template」:phpspot開発日誌

    Bloggerz Bible: Original Blackbeard template (psd) シンプルで汎用に使えるWEBレイアウトのPSDソース「Blackbeard template」 次のようにシンプルで汎用に使えそうなPSDデータが配布されています。 ブログとしてのレイアウトを前提として作られているようですが普通のサイトにもいけそうですね。 関連エントリ 立体的にクールにデザインされたWEBレイアウトのPSD ハイクオリティなWEBサイトレイアウト等のPhotoshopテンプレート色々 FacebookのGUIレイアウトのPhotoshopテンプレートファイル そのまま使えるWEBレイアウトのPhotoshopテンプレート40

  • HTML5+CSS3でクールなオーディオプレイヤー「ZEN」:phpspot開発日誌

    ZEN - HTML5-CSS3 Audio Player HTML5+CSS3でクールなオーディオプレイヤー「ZEN」。 Safari等で開いてみるとうまく表示されます。タップで音楽がアニメーションとともに表示されていい感じです。 注目すべきはUIのアニメーション部分ですが、CSS3を使ってこういうことが出来るというのは数年後のWEBがかなり楽しみです。 もっと凄い動きがウェブサイト上で出てきそう。 関連エントリ HTML5のオーディオプレイヤーを作るチュートリアル HTML5で実装するプレイリスト付きオーディオプレイヤー「AAP」

  • Google Calendar風に使えるカレンダー実装jQueryプラグイン「jquery-frontier-calendar」:phpspot開発日誌

    jquery-frontier-calendar - Project Hosting on Google Code Google Calendar風に使えるカレンダー実装jQueryプラグイン「jquery-frontier-calendar」がGoogle Codeにて公開されています。 広がるカレンダーをクリックで簡単に予定を追加し、次のように表示できます。ラインをクリックすれば予定が分かったり、ラインをドラッグ&ドロップして予定をずらせたりすることが可能。 背景画像を指定したりすることも出来ます。 他にも同様のライブラリはありますが、仕様によって使い分けるとよさそうですね。 関連エントリ これで自前でGoogleカレンダーを持てる!jQuery&PHPで実現されたプログラム GoogleカレンダーみたいなカレンダーをjQueryで一瞬で作成できる「jquery-week-calend

  • HTML5のcanvasタグで描くグラフ描画ライブラリ「AwesomeChartJS」:phpspot開発日誌

    AwesomeChartJS HTML5のcanvasタグで描くグラフ描画ライブラリ「AwesomeChartJS」 データは配列で定義してdrawするだけです。描画コードは次のように美しい。 var mychart = new AwesomeChart('canvas1'); mychart.title = "Product Sales - 2010"; mychart.data = [1532, 3251, 3460, 1180, 6543]; mychart.labels = ["Desktops", "Laptops", "Netbooks", "Tablets", "Smartphones"]; mychart.draw(); IEではフォールバックされていないため動作しませんがiPhoneなどのcanvasタグ対応ブラウザをターゲットとするなら便利に使えそう 関連エントリ Ja

  • デザイン制作に欠かせない 実用的なフリーテクスチャまとめ「350+ Free Textures」

    webデザインでも紙媒体のデザインでも、背景素材として活用できるテクスチャは活用頻度も実用性も高い、とても便利な存在です。そこで今回紹介するのは、デザイン制作に欠かせないフリーテクスチャまとめ「350+ Free Textures」です。 (+ Textures – Wood. by ~YouAreLikeADoll on deviantART) デザインを引き立ててくれる素材感溢れるテクスチャから、ポイント使いとして大いに活躍を果たしてくれそうなタイプまで種類がかなり豊富です。その中から今回いくつが気になったものを選出しましたので、以下よりご覧ください。 詳しくは以下 ■Colorburned | 6 High Resolution Sand and Seashell Textures 貝のかけらが敷き詰められたテクスチャ。どこか花びらのようにも見えます。 ■27 Free High R

    デザイン制作に欠かせない 実用的なフリーテクスチャまとめ「350+ Free Textures」
  • WordPressテーマのカスタマイズの際に重宝するブログやWebサイトいろいろ - かちびと.net

    僕がWordPressを勉強するのに普段 から見ているブログやWebサイトが あったら教えてほしいとお問い合わせ を頂いたので記事にしてみます。僕自 身、大した技術も知識も無いのでさほ ど参考になるとは思えませんが、一人 にでも役に立てたら幸いです。 そういうわけで普段からWordPressの情報収集に利用させて頂いているブログやWebサイトのまとめ。 多くの場合はテーマのカスタマイズの際に情報を探すのでそういった情報を配信してくれるサイトをご紹介します。存在自体は沢山ありますが、個人的に相性の良いサイトに絞っています。順不同。 WPBeginner ブログ名に反して、かなり濃い情報を得られます。チュートリアル記事あり、まとめ記事ありと、コンテンツバランスも良く、僕もかなりお世話になっています。記事は上部メニューの「Sections」からお探しください。 WPBeginner CatsWh

  • 無料で手に入るモダンで美しいデザインの白黒カラー系WordPressテーマ17個 - かちびと.net

    たまたま見かけた白黒カラーベースの WordPressのテーマが素敵だったの でご紹介ついでに、モダンで美しいデ ザインのテーマも合わせてご紹介しま す。すべて無料で利用可能です。全部 で17個あります。 コメントは控えます。ぜひデモをご覧下さい。 STUDIO DESSIGN STUDIO DESSIGN / DEMO MINIMAL DESSIGN THEME MINIMAL DESSIGN THEME / DEMO SWISS DESSIGN THEME SWISS DESSIGN THEME / DEMO STYLE DESSIGN THEME STYLE DESSIGN THEME / DEMO Ulap Ulap / DEMO WP-Wordfinder WP-Wordfinder / DEMO Seven Five Seven Five / DEMO Clear Clear

  • 簡単にjQueryを使ったクールなスライドギャラリーを構築できるソフトウェア・WOW Slider - かちびと.net

    以前もご紹介した、jQueryを使用する Webギャラリーをローカル環境で簡単 に作ることが出来るソフトウェアで、別 のものがありましたのでご紹介します。 こうして誰でも簡単に作れるようになる と、Web屋さんもより高いスキルを付け なければなりませんね。 以前ご紹介したソフトウェアは「わずか3STEP!誰でも簡単にjQueryを使ったLightboxギャラリーを作成出来るソフトウェア・Jquery Photo Viewer」を御覧ください。UIが凄く似てますけど、なにか関係あるのかな・・Jquery Photo ViewerはLightboxでしたが、WOW Sliderはスライダーです。 ダウンロードには名前とメールアドレスのみ求められます。入力したらメアドを確認する事もなく、直ぐにダウンロード出来ます。 使い方は以前ご紹介したJquery Photo Viewerとほぼ同じで、画像を

  • jQueryのセレクタを自作して遊ぶ :: 5509

    なんかうんこって書いてあるdivがたくさんありました、と。後から気づいたんですけど、これdiv要らないですね。pだけでいい・・・でJSとしてはセレクタの記述をのぞけば jQuery("div:unkomorimori").css("background", "#89640d"); これだけです。:unkomorimoriの基準は対象要素内で「うんこ」が3回以上出てくるかどうかです。出てきた要素だけを返します。ちなみにfilterでやった場合はこんな感じ。 カスタムセレクタを使う利点は、何回も同じfilter書くときとか、めんどいんでじゃあセレクタでやりましょうか、ってなる感じですね。気をつけないといけないのは、今回の書き方は全てのdiv要素の中身を文字列で取得した上で、正規表現使って「うんこ」を探してるんですけど、処理的にはうんこだけにくそ重いっていう点ですね。うまく落ちたところで、あ、う

  • WordPressでカスタムフィールドを出力する方法のまとめ

    WordPressでカスタムフィールドの出力方法についていろいろ調べてみました。 大丈夫と思いますが、以下に示すサンプルは次のようなループタグの中で使ってください。 <?php if(have_posts()) : while(have_posts()) : the_post(); ?> ここにサンプルコードを挿入 <?php endwhile; endif; ?> 1.値を出力する(キーと値が1:1の場合) キーと値が1:1の場合、値を出力するにはpost_custom()を使います。 <?php echo post_custom($key); ?> 冒頭の画像の「サイズ」の値「3000」を出力するには次のように記述します。 <?php echo post_custom('サイズ'); ?> 2.値を出力する1(キーと値が1:nの場合) WordPressではひとつのキーに複数の値を記述

    WordPressでカスタムフィールドを出力する方法のまとめ
  • Facebookページ(旧ファンページ)作成~FBMLを使えるようにするまでの流れ

    Facebook(フェイスブック)でファンページを作成し、作成したファンページでFBML(FaceBook Markup Language)を使えるようにするまでの手順を紹介します。 FBMLはMTML(Movable Type Markup Language)、つまりMTのテンプレートタグと同じようなものです。ネットで検索して手順を調べたところ、一番最初のページがリニューアルされているようでした。ということで、紹介するのは2011年1月30日現在の情報です。 注:Facebookで「スタティックFBML」は利用できなくなりました。新しくページを追加する場合はiframeタブなどを利用してください。iframeタブの概要や設定方法は「FacebookページにMovable TypeやWordPressの最近のブログ記事を表示する」をご覧ください。 蒲生さん率いる「Facebookファンペー

    Facebookページ(旧ファンページ)作成~FBMLを使えるようにするまでの流れ