アマゾンのメガドロップダウンメニューを実装できるjQueryプラグイン「jQuery-menu-aim」 | Web活メモ帳
Amazonのドロップダウンメニューを実装できるjQueryプラグインが良さそうでしたのでご紹介。 アマゾンのメニューの特徴は高速な動きと、マウスが離れてもメニューが出たままになるのが特徴で、タブレット端末でも使いやすいように実装されています。 何故アマゾンのドロップダウンメニューは使いやすいのか？ アマゾンのドロップダウンメニューが何故使いやすいのかという記事も非常に参考になります。 BREAKING DOWN AMAZON’S MEGA DROPDOWN サイトは英語ですが、まとめると ・ドロップダウンが超高速である ・ドロップダウンメニューから離れてもメニューが出ている ・ドロップダウンメニューを閉じるのをマウスカーソルの位置を見て遅延させている なるほど〜と言う感じです。GIFアニメでの解説もあるので一度見てみる事をオススメします。 このプラグインのサンプルはサイトからダウンロード
2012年 はてブ数ランキングベスト５０ – 今年中に見ておきたい良記事まとめ | Web活メモ帳
2012年にはてなで話題になった記事やWEBサービスを 1位から50位までブクマ数順にランキングを付けてみました。 2012年はてなブックマーク数ランキング５０ 僕は自分が思っていたほどは頭がよくなかった – しのごの録 クックパッド史上、最もはてなブックマークのついたおかず＆ご飯系レシピ25選 | little_shotaro’s blog 無料で聴けて、もう作業用BGMに困らない。ミュージックビデオを次々に流してループしてくれる個人的に超オススメサイト / Maka-Veli .com 仕事でExcel使うなら必ず読んでおきたい記事まとめ – NAVER まとめ アイデアを大量生産できる最強のフレームワーク「オズボーンのチェックリスト」 | お土産屋さんブログ Excelの使い方 – NAVER まとめ 女子力アップ！男子も必見！絶対チェックすべき人気まとめのまとめ – NAVER ま
HTML5とCSS3のオンラインサンプルが良い感じ | Web活メモ帳
Web上で見て触れる、HTML5とCSS3のオンラインサンプルがすごく良かったのでご紹介。 HTML5 & CSS3 Tools and Tutorials パラメータを自由に触りながら、実際に動作している様子をリアルタイムにプレビューする事が可能です。 以下に使っている様子を載せてみます。 ↑設定した項目を選択します。 まずはBox Propertiesを試してみます。 ↑設定可能な項目が表示されます。 パラメータをグリグリいじれちゃいます。 ↑設定した内容はリアルタイムにプレビュー表示されました。 使用するコードと対応するブラウザも教えてくれます。 違うものも試してみましょう。 ↑Videoを設定している所です。 動画ファイルはURLを直接入力して設定します。 ↑プレビューです。 細かいブラウザのバージョンも教えてくれました。 他にも設定可能な項目はたくさんありました。 興味のある方は
クライアント向けのWordPressで設定したい、少しのコードで実装可能な15のカスタマイズ | Web活メモ帳
WordPressのカスタマイズが広く普及してきて、CMSとしてWordPressを導入する方も多くなってきていると思います。私も最近はクライアント向けにWordPressで開発させていただく事が増えて来て小技がたまってきたので、function.phpに記述するだけで使える小技をまとめてみました。 どなたかの参考になれば幸いです。 納品用WordPressカスタマイズ 目次 adminツールバーを非表示に 投稿画面の不要な入力項目を削除 管理画面の不要なメニューを削除 管理バーの不要な項目を削除 プロフィールから要らない項目を削除 アイキャッチ画象のサイズ設定 デバッグ用関数 カテゴリを単一選択に変更 ログイン画面のロゴを変更 フッターのメッセージを変更 ヘッダの余計なタグを無効化 アップデートのお知らせ非表示 moreリンクの#を無効化 管理画面の右上の「ヘルプ」を非表示 セルフピンバ
WordPressをセキュアに保つための10の方法 | Web活メモ帳
先日ですが、友人のWordPressが攻撃にあい、フィッシングサイトに利用されるという事件がありました。 サーバー会社に問い合わせをした所、FTPのログインが海外から合ったとの事。 パスワードがどこかから漏れていたのかもしれません。 怖いですね・・・ FTPパスワードが漏れた原因は分からなかったのですが、 出来る事はちゃんとやろうと思いました。 何かがあってからでは、遅いのですからね。 ・・・という訳で、WordPressで出来るセキュリティ対策を10個ご紹介。 プラグインも探してみたので情報をシェアします。 誰かのお役に立てれば幸いです。 1.WordPressを常に最新版に 一番の対策はこれです。WordPressはオープンソースのため、攻撃者はサーバーにどんなプログラムがあるか分かる状態になっています。 脆弱性が周知されているので、攻撃する側も簡単に出来ちゃうんですね。 必ず、最新版
WordPressで記事を個別に並び替えするプラグイン「postMash」 | Web活メモ帳
CMSとして使うなら必須の並び替えプラグイン 記事を表示する際に、並び替えをしたくなる事は大いにあると思いますが、 そんな時に使えるプラグイン「postMash」をご紹介。 記事を一覧からドラッグ&ドロップで並び替えが出来るようになります。 全ての記事の並び替えはもちろん、カテゴリ内の並び替えも可能に。 ↑並び替え画面 これは便利です。WordpressをよりCMS化できますね。 使い方 記事一覧を表示する際に使うhave_posts()の前に 以下のタグを挿入します。 global $wp_query; $wp_query->set('orderby','menu_order'); $wp_query->set('order', 'ASC'); $wp_query->get_posts(); これだけです。 以下の記事で知りました！感謝。
WordPressで使える知ってると便利な13のSQL文 | Web活メモ帳
WordPressでデータベースの情報を変更する際に便利なTipsが載っている13 Useful WordPress SQL Queries You Wish You Knew Earlierというエントリーのご紹介。 WordPressはMySQLというデータベースで動いていますが、何かを変更したい場合に結構困る事があります。 例えば ・パスワードを忘れて管理用のメールアドレスも忘れた場合 ・テスト用にレンタルサーバーのサブドメインで動かしていて、いざ本ドメインで表示されるよう設定してもサブドメインにリダイレクトされるとか。画像がでない。とか。 全ての情報がデータベースに格納されているためしょうが無い部分もあるのですが、困った時に知っておくと便利なTipsです。 ※必ずバックアップを取ってから実行してください。 サイトのURLを変更する ワードプレスはサイトのURLとホームのURLを絶対
jQuery mobileでページが勝手に戻る際の対処方法 | Web活メモ帳
先日とあるサイトをjQuery mobileで実装したのですが クライアントから「ページが勝手に戻る」と言われました。 何があったかと言うと、以下のような現象（バグ？）があったのです。 トップページからAページへのリンクをタップすると、 一瞬Aページが表示されるのですが、すぐにトップページに戻ってしまう。 その際に、ブラウザのアドレスバーを確認すると URLはAページのものになっている 手持ちのGalaxy Sで確認したのですが、iPhoneでも同様の現象があるようです。 解決方法 結論から話すと、jQuery mobileのオプションを以下に設定することで現象が発生しなくなりました。 ・リンクのajaxを無効に ・フォーム遷移のajaxを無効に ・自動的にlocation.hashへの変更を処理するのを無効にする 対応したコードは以下になります。 jQuery(document).bin
画像にツールチップを表示できるjQueryプラグイン「iPicture」 | Web活メモ帳
画像ギャラリーに良さそうなjQueryプラグイン 画像の一部について、詳細に説明したい場合に使える「iPicture」をご紹介。 この写真のこの人が○○でさー、この右下のコレが○○だったんだー。 という説明をマウスオーバーすると表示できるようになります。 Flickrなんかでも、画像の上に説明を載せれたりしますよね。 いつか使うかもしれないので一応メモ。 アイコンにマウスオーバーすると簡単な説明が表示されます。 スライドショーやギャラリーに組み込むと良さそうですね コードは以下のような感じになるそうです。 jQuery(document).ready(function(){ $( "#iPicture" ).iPicture({ pictures: ["picture1","picture2","picture3", ...all pictures' ID], moreInfos:{ "p
jQueryで要素をシャッフルするプラグイン「jQuery Shuffle Plugin」 | Web活メモ帳
ランダムに要素を並び替える バナーの順番をランダムで切り替えたり、おすすめ情報の並び順を切り替えたりする時に使える「jQuery Shuffle Plugin」をご紹介。 jQueryのプラグインを使用すれば、特定の要素だけランダムで表示できるようになります。 ソースコードは以下 (function($){ $.fn.shuffle = function() { return this.each(function(){ var items = $(this).children(); return (items.length) ? $(this).html($.shuffle(items)) : this; }); } $.shuffle = function(arr) { for( var j, x, i = arr.length; i; j = parseInt(Math.random(
スクロールに応じて要素が動く、パララックスを実装できるjQueryプラグイン「scrolldeck」 | Web活メモ帳
スクロールによるパララックス効果を実装できるjQueryプラグイン「scrolldeck」 スクロールすると、画像やテキスト、その他色々な要素がアニメーションするWebデザインを最近良く見かけます。 パララックス(視差効果)や細かなアニメーションするものまで、様々なものがあると思いますが、 本日紹介する「scrolldeck」を使用するとパララックス効果を簡単に実装できるようになります。 パララックスがどんなものか分からない方のために先にプラグインのデモリンクを貼っておきます。 デモ1 デモ2 デモ3 スクロールで画像がずれて行く感じがたまらないですね。 使い方 プラグインを初期化します。 $(document).ready(function() { var deck = new $.scrolldeck(); }); オプション設定をする場合 $(document).ready(func
詳細なオプション付！ダイアログの表示に使えるjQueryプラグイン「Noty」 | Web活メモ帳
「Noty」はダイアログの表示が出来るjQueryプラグインです。 通知は、上下、中央、左上または右上に配置することができます。 テキスト、アニメーション、速度、ボタンをカスタマイズするためのAPIが数多く用意されており、詳細なオプション指定が可能です。 使い方 jQueryと必要なライブラリを読込ます。 <script type="text/javascript" src="query.min.js"></script> <script type="text/javascript" src="js/jquery.noty.js"></script> <link rel="stylesheet" type="text/css" href="css/jquery.noty.css"/> ↓以下のようにする事でアラートの表示が出来るようになります。 $('.ex1.alert').click(
WordPressでCMSを作るなら絶対に覚えておきたいプラグインいろいろ | Web活メモ帳
WordPressでサイトを作る際に毎回入れるプラグインを人に教える機会があったのでブログでもご紹介します。 新しくブログを作る時や仕事でカスタマイズする際に参考にしてもらえれば幸いです。 全てのサイトで必ず導入するプラグイン このサイトでも使っていますし、クライアントのサイトを作る際にも毎回導入しています。 セキュリティ関係やSEO対策プラグインが主なものですよ。 All in One SEO Pack サイト全体、個別記事、ページ毎にタイトル、description、キーワードの設定などが出来るようになります。 SEOに必要な最低限の機能はカバーされていますので、マストなプラグインですね。 Akismet スパム対策のプラグイン。 オンラインサーバでコメントの内容をチェックするスパム対策サービスです。 標準でインストールされているので、管理画面から有効化してAPIキーを入力するだけでO
JavaScript開発にalertを使っている人必見！ログ出力ライブラリ「Blackbird」 | Web活メモ帳
JavaScriptでログを表示するのに使えるライブラリ「Blackbird」のご紹介。 出力したいメッセージを指定するだけできれいに整形して表示してくれます。 例えば、以下のようなJavaScriptを実行してみます。 log.debug( 'this is a debug message' ); log.info( 'this is an info message' ); log.warn( 'this is a warning message' ); log.error( 'this is an error message' ); ↑すると、こんな感じで素敵に表示してくれちゃいます。 アイコンと色で視覚的にメッセージを区別することができるので、後から見分けるのも簡単です。 使い方 使い方は簡単で、ファイルをダウンロードした後、headタグ内でJSとCSSを読み込むだけでOKです。 <
iPhoneフレンドリーなサイトにするための10の方法 | Web活メモ帳
「10+ useful code snippets to develop iPhone friendly websites」というエントリーよりiPhone/iPod touch用サイトを作成する際の10のTipsのご紹介。 サーバーサイドでの振り分け処理や、画面の向きの取得方法などなど、いつか使うかもしれないのでメモ的にエントリーです。 詳しくは以下 JavaScriptでリダイレクト iPhone/iPod touchの場合に専用のページにリダイレクトさせます。サーバーサイドのスクリプトを使用できない場合に。 if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) { if (document.cookie.indexOf("iphone_redirect=false") ==
Dropboxの容量を768MB増やす方法 | Web活メモ帳
とっても便利に使っているDropboxですが、Twitterのアカウントをフォローするだけで容量が増やせるようになっています。 素敵な情報なので共有のために投稿します。 詳しくは以下 Twitterアカウントへの接続を許可すると128MB Facebookアカウントへの接続を許可すると128MB Twitterアカウントをフォローすると128MB 開発者にDropboxの好きな所を教えると128MB いいね！をすると128MB Dropboxの好きな所をつぶやくと128MB 全部で768メガバイトが無料になります。 みんなでもっと快適に使いましょう！ 登録は下のリンクからどうぞ。 ■ 2010.11.24追記 設定ページはDropboxのトップページからリンクはされていません。 こちらのリンクからどうぞ https://www.dropbox.com/free
Sinatraにnode.jsを簡単に組み込めるライブラリ「Express 」 | Web活メモ帳
サーバサイドJavaScriptであるnode.js。使ってる方には便利なフレームワークだと思います。サンプル付きなので仕組みを知っている方には簡単に組み込めるのでは無いでしょうか。 マルチパートのファイルアップロードをサポートや、Cookieのサポート、セッションのサポートがあるようです。 Sinatraを使ってサイトを構築している方、もしくはnode.jsを使っている方は導入を検討してみてはいかがでしょうか。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSのみで作れるアイコン配布サイト「One Div」 | Web活メモ帳
モダンなスライドショーを作れるjQueryプラグイン「Sequence」 | Web活メモ帳
ソーシャルサイトのアイコンがAI・PSD形式でダウンロードできる「Iconshock」 | Web活メモ帳