CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
Sticky Notes with CSS3 デモ:左、デモ:右 [ad#ad-2] 付箋紙はどんな背景にも適用できます。 デモ 画像無しで付箋紙 Sticky Notes with CSS3 by accidental hacker 付箋紙の実装 上記の当サイトに設置したデモのコードを紹介します。 リスト要素で実装します。p要素は付箋紙には必要ありません。 <ul id="notes"> <li> <p>画像無しで付箋紙</p> </li> <li> <p>Sticky Notes with CSS3<br />by <a href="http://www.accidentalhacker.com/sticky-notes-with-css3/">accidental hacker</a></p> </li> </ul> [ad#ad-2] CSS3のグラデーション、ボックスシャドウ、回
先日、Web サーバ勉強会 #2 が開かれました。内容は、Apache のチューニングということで、参加したかったのですが、他の予定があって参加できませんでした。 そこで、僕が個人的に行っている Apache のチューニングを紹介したいと思います。最初、スライドで作成しようかと思ったのですが、ブログにまとめたほうがよさそうなのでブログにまとめていきます。 まず、大前提として Apache をチューニングするうえで、大事なことはその Apache が提供する Web サービスの種類のよって大きくチューニングする内容が異なるということです。例えば、動画・写真共有サービスと株価情報のサービスを比較すると、当然のことながら大きくサービスの内容が異なりますし、HTTP レベルでみるとクライアントからのリクエスト数、データサイズ、などがかなり違ってきます。 ですので、まずは自分が扱っているウェブサービ
ジャンルは左上から順に セッティング ラベル メディア 電子機器 ディスプレイ CMS アロー モバイルデバイス シグナル コミュニケーション パワー ツール ロケーション ファイル ID チャート [ad#ad-2] ダウンロードできるアイコンのフォーマットはPSDで、シェイプで作られたベクターデータとなっています。サイズは16x16, 32x32, 64x64の3種類がセットになっています。 アイコンの利用にあたっては個人でも商用でも無料で、カスタマイズもOKとのことです。
商用でも無料で使えるGPLライセンスの 人気CMSなので当然、納品する事も多々 あるかと思います。クライアントさんが管理 する場合と、制作者側で管理する場合があ るかと思います。個人利用ではどうでもいい ですが前者の場合は出来れば管理画面を どうにかしたいところですね。 という訳で、WPの管理画面をどうにかしたい時に覚えておくと探す手間が省けて楽だなぁ、と思ってまとめた記事になります。 左上の「W」のWPロゴが目立つのでこれを変更。 お使いのテーマファイルのfunctions.phpに以下を加えます。 add_action('admin_head', 'my_custom_logo'); function my_custom_logo() { echo ' <style type="text/css"> #header-logo { background-image: url('.get_
色鉛筆ってなんだか、持ってるだけで満足しちゃいますよね。 そんな魅惑の色鉛筆風のアイコンをどうぞ!!! ※利用規約は各自でご確認して下さい。
横に長くなりがちなテキストも自動でサイズ調整してレイアウトを崩させないjQueryプラグイン「Shorten」 2010年12月14日- Shorten - A jQuery Plugin for Truncating Styled Text 横に長くなりがちなテキストも自動でサイズ調整してレイアウトを崩させないjQueryプラグイン「Shorten」。 ブロック要素に長いテキストがあって、折り返されないような場合、レイアウトが崩れてしまいますが、このプラグインを使えば、次のように、長いテキストも最後を ... more のように短くすることが出来ます。 $(element).shorten() メソッドを呼ぶだけですが、width で、収めたいサイズを、tail で、続きへのリンクを設定できたりします。 .shorten({width: 400, tail: '<a href="">..
パネルに配置したテキストを下部にいくにつれフェードアウトで表示し、残りのテキストをアニメーションで表示するコンテンツを実装するチュートリアルを紹介します。 残りのテキストをアニメーションで表示したキャプチャ [ad#ad-2] 実装 HTML HTMLはシンプルで、テキストと「Read More」ボタンをdiv要素内に配置します。 <div class="sidebar-box"> <p>パネルのテキスト</p> <p class="read-more"><a href="#" class="button">Read More</a></p> </div> CSS パネルの初期状態のサイズはスタイルシートで設定します。フェードアウトはCSS3グラデーションを使用します。 .sidebar-box { max-height: 120px; position: relative; overfl
昔のWebサイトで、マウスを追従する 画像(アイコン)をよく見かけたと思う んですが、それをメニューにしてしまお う、という発想。遊び心のあるサイトに したい、という方は如何でしょうか。使 い方次第ではユーザーに不快な思い をさせそうですが・・ 個人的には微妙かなと思ったんですが、ユニークだったのと、やり方次第ではユーザビリティになるかな?と思ったので一応メモします。 あなたのマウスの動きをナビゲーションメニューがストーキングします。 発想は面白いですねw作成者さんも「おしつけがましいと思われないように工夫した」と仰っていますが、個人的には苦手かな・・ マウスにボタンが追従し、マウスオーバーでその場でドロップダウンします。ユーザビリティなのか自己満足なのか判断が分かれそうですね・・・日本と海外でも反応は違うでしょうしね。 「上へ戻る」付き。スムーズにスクロールします。 IE6だとcssの関
Chrome、IE、Firefox 上で JavaScript を一括で同時に実行させることが出来る... 次の記事 ≫:2010年12月14日 管理人のブックマーク
jQueryでギャラリーを実現するGalleryboxプラグインを紹介します。 このプラグインを利用すれば、サムネイル画像をクリックすることでメインの画像をフェードイン・フェードアウトで入れ替えてくれます。またオプション設定により、メイン画像とlightboxの連携、あるいは画像タイトルやタイトルリンクも切り替えてくれます。 動作は以下の配布ページで確認できます。 Gallerybox 以下、インストールと利用方法を説明します。 1.プラグインのダウンロード・インストール Galleryboxのページにある「jquery.gallerybox_0.0.1.js(バージョンは2010年12月現在)」のリンクを右クリックして、プラグインファイルをダウンロードします。保存時にファイル名はjquery.gallerybox.jsとします。 2.(X)HTMLマークアップ このプラグインでは次の(X
Typing Game with jquery jQueryでタイピングゲームを作るチュートリアル。 ページ内に表示されるボールに表示されたアルファベットをひたすら打っていくという単純なゲームになっていますが、意外と面白いです。 動作デモはこちら スピードを速めたり、制限時間を付ける等してより面白くすることが出来そうですね。 関連エントリ jQueryを使って画像の上にコンテンツをクールにアニメーションされてオーバーレイ表示するサンプル 打ちやすいバーチャルキーボード実装が可能なjQueryプラグイン「VirtualKey」 jQueryを使った映り込みエフェクトがかかったイメージギャラリー リッチで使いやすいUIを作成するためのjQueryライブラリ&サンプル集
プラグインだけど公開してないものだったり、いつも使ってるプラグインとの組み合わせだったり、ショートコードとかなんだか色々。どれもCodaにスニペットで登録してて一発変換で使ってます。 コードはアレなんですけど、ひょっとしてひょっとすると誰かの役に立つかもしれないので恥ずかしながら公開します。対象はちょっとだけJS書けるとかそういう人ですかねたぶん。書ける人はもっとキレイなやつ使ってるでしょうし。(もっときれいに書けとか何そのコードとかも歓迎) 紹介してるスニペットたち ページトップにスクロールするだけ テキストボックスにラベル表示するやつ 要素のサイズを取得するやつ タブきりかえるやつ IEで透過pngをフェードしたときに黒くなるやつ対策のshow()とhide() Google Analyticsのトラックイベント一括bind Ajaxサイトにするときに使うリンク置き換えプラグイン スク
“SocialShift” Icon Set: 246 Free Social Networking Icons | Freebies | instantShift 246種類のクリアで美しいソーシャルアイコンセットが公開されています。 過去にも沢山のソーシャルアイコンを紹介してきましたが、トップクラスのデザイン性を持ちます。 16x16ピクセルのアイコンがなかなかいい感じ。 関連エントリ 押してもらいやすそうな綺麗なボタンっぽいソーシャルアイコン集 選びたい放題のフリーのソーシャルアイコンセット色々 iPhone用アイコンみたいなソーシャルアイコン集「Social Network Icon Pack」 アイデア満載なフリーのソーシャルアイコン色々
サーバ上で動いてるどのphpが重いか?を調べられる「PhpTop」。 「サーバ監視に超使える〜topコマンドのまとめ」というエントリで様々なtopコマンドを紹介したのですが、phptopなるものを新たに発見したのでご紹介。 具体的に出来ることは、今サーバで動いているものを指定した期間で、もっともアクセスが多いphp、CPUを多く消費しているphp、メモリを多く使っているphpといったものを降順にソートできるというものです。 サーバ上で多くのphpが動いており、どうも負荷が高いけどどれが重いのかよくわからないという場合に使えます。 top コマンドでは httpd が動いてるぐらいしか分からないので phper な方で負荷にお悩みの方は使ってみるのもよいかも。 たとえば、 $ phptop -t 15 -s mem のように実行すると、15分以内で、メモリを多く使っている順にソートが可能。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く