早いもので今年も残すところあとわずか
となりました。今年は年をまたいで仕事
しないとならないので早めに総まとめ的
な記事を書いておきます。と言っても
完全に自分用のまとめですのでご覧に
なっても役に立たないと思いますがｗ
というわけで、後で復習するのに、探さなくていいようにしただけの自分用リンク集です。
jQueryとWordPressにやたら偏ってます。過去記事のまとめですので目新しいものは一切ありません。
ネタは省いてます。あと、種類で細かく分ける気力が残ってないので順不同です。
- スマフォ向けが多いのでスマフォ関連は※印を振っておきました。
- 復習用なのでリンクは全て当サイトの記事にしてます。他の方には二度手間ですがご了承下さい
- マウスを乗せるとキャプチャが表示されます。
130個くらいです。普段から小ネタばっかりなのでそんな感じのまとめです。
【追記】（僕が）リンク見にくいので色を変えました。
- ※PageSlide Responsive / モバイルサイズになるとメニューを横スライド式に切り替える
- ※jQuery.ui.touch-punch.js / iPhoneやiPadでドラッグやリサイズを容易に実装
- jQuery contextMenu / HTML5のmenu要素にも対応した、独自の右クリックメニューを実装
- slideshowify.js / 画像を画面いっぱいに広げてフェードエフェクトで切り替えるスライドを実装
- Simple Elements Mapper / ページ内に自動でビジュアル付きのスムーズスクロールを実装する。軽量
- ※PhotoSwipe / iPhoneやAndroid等のタッチデバイス向けイメージギャラリー
- stalactite / 要素を遅延表示させながらレンガ風に整列させる
- Tiny Scrollbar / 軽量でクロスブラウザ対応、スクロールバーのデザインを変更できる
- Address Picker / GoogleMapをインクリメンタルサーチし、位置情報を取得する
- validate.js / シンプル、軽量でカスタマイズしやすいフォームバリデーション
- Joyride / クロスブラウザ対応、Webサイトツアーを手軽に実装出来る
- ※FlipPage / iPhoneやiPadにも対応の、ページをめくるようなエフェクトを実装
- jNiceIt / フォーム周りのエレメントのデザインを見やすいインターフェースに変更
- ※Slides / 導入も手軽でiPhoneなどにも自動でレイアウトを最適化するシンプルなイメージスライダー
- Laquu.JS / タブやスクロール等、良く見かける機能を1つのファイルで実装可能
- Font sizer / 設定も簡単・軽量・シンプル。Webサイトのフォントサイズを変更
- jQuery Timelinr / 沿革や年表のようなタイムライン的なコンテンツをスライダーで実装
- ※FLEXSLIDER / ウィンドウサイズに応じてレイアウトを調整するイメージスライダー
- Chop Slider / エフェクトが無駄に凄いイメージスライダーを実装
- glDatePicker / 軽量でクロスブラウザ対応の、シンプルなデートピッカー
- Chosen / select要素内をインスタンス検索出来るようにし、美しいデザインにも変更
- ※Blueberry / ディスプレイサイズに自動で幅調整するイメージスライダー
- YTPLAYER / Youtube動画を透過(opacity)できる
- ※jquery-ui-map / jQuery MobileでGoogleMap APIを使う
- Ideal Forms / 美しいフォームデザインを実装する
- MobilySelect / リストにフィルタを掛けてソート出来る
- jQueryとVimeoのAPIでサムネイルを作成し、動画をLightbox風にポップアップ
- テキストや画像でパララックス効果のあるコンテンツを実装する
- jQueryのフィルタを使った際の実装サンプルと基本的な機能のまとめ
- テーブルのセルに入力された数字に応じて背景カラーを変える
- 手軽にサクッとシンプルなニュースティッカーを作る
- タブで切り替え可能な地図をGoogleMapで実装する
- テーブルの行ごとクリックしてチェックボックスにチェックを入れられるように
- jQuery MasonryにInfinite Scroll（無限スクロール）機能を加えたサンプル
- ※jQuery Mobileでタップで拡大するシンプルなイメージギャラリーを構築する
- Youtubeでz-indexを有効にする「?wmode=transparent」をjQueryで自動挿入
- リストメニューにフィルタリング機能を加える
- jQueryでWebサイト内を無限にスクロール出来るようにする
- 画像を使った視差アニメーションを実装する
- ユーザーが簡単にフィードバック出来るようにするTwitter投稿ボタン
- YoutubeのAPIとjQueryを使って動画をインクリメンタルサーチする
- テーブルのセルを分かりやすくハイライトする
- コメント数などをバーの長さに置き換えて数値の差を可視化する
- コピペに頼らず、基礎知識を理解して実際に動かしてみる
- HTMLテーブルの列にリンク先を指定できるようにする
- JSBin / JSをブラウザ上で開発、その場で実行できるOSSのJSBinのインストール
- JSを書いて実行、ブログ等にも貼付できるjsfiddleの基本的な使い方
- 覚えておくと地味に便利だと思える日が来るかもしれないjQueryのコードスニペット
- 背景画像をフルスクリーン表示してスライドショーに出来るやつ色々
- jQuery Mobileを使う際に知っておくと役立ちそうなTipsや情報のまとめ
- 視差効果（パララックス）を取り入れたWebデザイン例とTipsいろいろ
- jQuery Mobile使用時によく使うマークアップで日本語サンプルを作ったので配布
- Laker / iPhoneやiPad向け電子書籍を作成する為のフレームワーク
- ギャラリー機能を、少しのjQueryコードでLightbox風にポップアップ出来るようにする
- 少しのjQueryコードでWordPressのコメント欄にリアルタイムプレビュー機能を加える
- jQueryで動作する開閉パネル式をWordPressのショートコートで作れるようにする
- ウィジェット機能で追加した項目をjQueryを使って開閉パネルにする
- WordPressのコメントとトラックバックをjQueryでタブ分けする
- post_class()にアイキャッチ画像を使用した記事の場合のclassを追加する
- WordPressのオリジナルテーマ作成フロー・基本マニュアル
- スパムユーザーの自動登録を簡単なコードで防ぐ
- 「アイキャッチ画像」がいまいちピンとこないクライアントさん向けに説明文を挿入
- 記事内やコメント欄内の特定のキーワードを任意のテキストやリンク等に一括置換
- 投稿エディターで、HTML5のタグを一応使えるようにする
- 閲覧している記事をその場で削除するボタンを設置する
- jQuery本体をCDN等に置き換える際は管理画面に読み込ませないようにする
- 投稿記事や固定ページの好きな場所に任意のPHPファイルを挿入、実行できるようにする
- 「固定ページ」にページ送り可能なポートフォリオページを作る
- WordPressを使ってWeb制作をする為の手順リスト・【改正版】+α
- 管理画面での画像アップロード等に使われているlightboxを他の用途でも利用する
- 管理画面のドロップダウンする「ヘルプ」の内容を変更
- データベース接続エラー時に表示するメッセージを変える
- 簡単なコードでシンプルなサイトマップを作成する
- wordpress.comのAPIを使ってスクリーンショットを取得する
- WebサイトにSEO施行する際に役立つっぽいカスタマイズハック
- 管理画面で追加できるウィジェットで不要のコンテンツを削除する
- functions.phpによく書いてるやつ
- カスタムフィールドを使ってh1を記事に応じて変更出来るようにする
- CSSで「投稿」や「ページ」のHTMLエディター内のフォントや文字サイズを変更する
- 総コメント数を表示させるコード
- Twitterのような「～分前に投稿されました」を実装する
- ※Reverie / HTML5製のレスポンシブ対応テーマフレームワーク
- WPEXPLORER / スタイリッシュでシンプルなデザインのWordPressテーマを無料配布
- TheProton / クリーン且つクオリティの高いデザインで完成度の高いHTML5製テーマ
- 有料でもおかしくないようなクオリティの高いテーマを無料で配布しているサイト
- WP Paintbrush / その場でインタラクティブにレイアウトやデザインを変更できる
- PressWork / レイアウトや配色等をインタラクティブに設定できるテーマ作成用フレームワーク
- ※BLASKAN / Media QueryでiPhoneやiPadにも自動でレイアウトを調整
- ※Flexible / スマフォにも最適化し、ファンゲート対応のFacebookページも作成
- Imbalance 2 / いろいろと完成度の高いWordPressフリーテーマ
- ※Media Queriesで様々なデバイスに対応済みのテーマいろいろ
- Simply Delicious / ポートフォリオやフォトログに良さそうなミニマルデザイン
- Grid Locker / グリッドレイアウトのクールなギャラリーサイトを構築
- Roots / Starkersに960gsを搭載したBoilerplateベースのHTML5製フレームワーク
- ※Whiteboard / スマフォでも黄金比を組めるLess Framework搭載
- Color Admin Posts / 管理画面の記事一覧で予約投稿とか下書きで色分け出来る
- WP Email Login / ユーザーIDでも登録したメールアドレスでもログイン出来る
- Usernoise / フィードバック用のフォームを簡単にブログに設置
- Flickr Photo Post / Flickrで検索、著作権表示付きで記事に挿入出来る
- ※BuddyPress Mobile / BuddyPressを使ったWebサイトをスマートフォンに最適化
- Stealth Login / ログインURL（wp-login.php）をサクッと変更できる
- Social Metrics / Tweet数やブクマ、いいね！の数を管理画面に一覧表示
- WP Total Hacks / ノンプログラマー向けのWordPressカスタマイズハックプラグイン
- Additional image sizes / 記事に挿入する画像のサイズの種類を増やせる
- Snazzy Archives / アーカイブをテレビ番組表っぽいレイアウトで表示する
- CMS Tree Page View / 固定ページをツリー形式で表示・管理出来る
- 画像を使わずに見出しを水平線で挟む
- マウスオーバー時にリンク先のURLをツールチップで表示させる
- 地味に使えるCSS小技のメモ&サンプル集
- ※レスポンシブWebデザイン構築に役立つフレームワークやTipsいろいろ
- CSS3のtext-shadowを使ったテキスト装飾のサンプル集
- ※YAMB / ドロップダウンやスライドにも対応したレスポンシブWebデザイン
- ※The Goldilocks Approach / レスポンシブWebデザイン設計用のシンプルなテンプレート
- Atatonic / 軽量で、シンプルなCSSフレームワーク
- Web Symbols typeface / ミニマルなアイコンやシンボルをWebフォントで表現
- ※Foundation / タブやフォームなどのリッチUIもセットにしたレスポンシブフレームワーク
- ※Fluid Baseline Grid / 著作権放棄・シンプル・軽量のレスポンシブHTML5フレームワーク
- ※Golden Grid System / 240pxから2560pxまで対応出来るレスポンシブグリッドシステム
- Gridless / パブリックドメインの、クロスブラウザ対応フレームワーク
- ※Skeleton / レスポンシブなWebサイトを制作する為のスターターキット
- Compare Ninja / ブラウザ対応表とかでよく見かけるようなチェック表を生成
- InstaCSS / プロパティをインクリメンタル検索出来るCSSリファレンスサイト
- Pingdom Tools / Webサイトの表示速度を計測する
- Gimme Bar / Tumblrライクに画像やテキストを気軽にクリップ出来る
- ※NegativeGrid / レスポンシブ対応の軽量なグリッドレイアウト用CSSを生成
- JPEGmini / JPEG画像を劣化させずにサイズダウンし保存
- Responsivepx / レスポンシブWebデザインの構築時に役立つ
- 最近よく使ってる、Web制作に役立つWebサービス的なやつ
- loads.in / 国別・ブラウザ別でも計測出来るWebサイト表示スピード調査ツール
- Shotoku / 動画にも対応のレスポンシブなWPギャラリーテーマ
- blite-design / 白黒のものを収集するだけのサイト。まだ仕上がり60％
- J-snippet / jQueryプラグインを集めてたけど若干挫折気味
jQuery
プラグインとかチュートリアル
プラグイン
いろいろ。
チュートリアル
デモも結構作ってます。
Tips/Tools/まとめ
まとめとかツールとか。
WordPress
WordPressです。
カスタマイズ
functions.phpとかでなんかするやつ。
テーマ
WPテーマ
プラグイン
便利なプラグイン
CSS
CSSはcss3が殆どですが、使い道があんまないので端折ってます。スマフォに使うのもさほどないし・・
Tips
基本的に苦手なのであんまり書いてないｗ
その他
レスポンシブWebデザインが楽しい1年だった。まだまだ研究の段階だけど、なにもレスポンシブだから1ソースにこだわる必要も無いですよね。個人的には期待してます。
ツールとか
便利なやついろいろ
個人的な制作物
今年はあんまり自分の制作物は作れませんでした・・未完成だけど公開します。
以上、少し早いですが2011年に配信した当サイトの記事の一覧でした。今年も沢山ご覧頂いて有難う御座いました。残りの日は適当にいつも通り配信していきますので最後まで宜しくお願い致します。
今年もわずかですが、身体に気をつけてなんとか乗り切りましょう。