報告が遅れましたが、5月に退社し6月に起業(株式会社コムテ)しました。今までブログにメモしておいたことが、起業や納品に役立った部分もあり、ブログを継続してよかったと思います。ブログを見てくださっている皆様、ご紹介させていただいたサイト運営者様、応援して下さっている皆様には心よりお礼申し上げます。経営や制作の部分ではまだまだ未熟ですが、今後ともご指導ご鞭撻のほど、よろしくお願いします。今回は「Web制作で使いたい」jQueryプラグインやスクリプトなどをまとめました。WordPressテーマを作るときに使うもの、検索でヒットしにくいプラグインも多数ご紹介。Linkもくじ動画1.動画をブラウザの背景全体に再生させる2.動画を綺麗に表示させるWP管理画面3.カラーピッカー4.ドラッグ&ドロップでファイルをアップロード5.並べ替え+DBに保存テキストエフェクト6.文字を動かしならがテキスト表示7.フォントサイズを変更8.文字の拡大・縮小9.数字のカウントアップ10.読み込み時に文字を動かすエフェクト11.波紋12.ドラッグで画像を回転13.ボタンを3Dで回転14.要素が見えたタイミングでイベントを発生メニュー15.メニュー以外を暗くするメガドロップダウン16.簡単にナビゲーションメニューをレスポンシブへ17.タブからアコーディオンに切り替え18.クリックすると上部に拡大画像/フォトギャラリースライド19.4分割表示20.マウス操作でスライドを移動させる他21.IE8以下でもCSS3のbackground-sizeを使えるように22.要素を上下左右中央にフィットさせる動画1.動画をブラウザの背景全体に再生させる最近ではサイズ大きめの通信が可能になりつつあり、動画を使いインパクトを出すページが増えてきました。こちらはYouTubeにアップロードされた動画を背景全体に表示させるtubularというプラグイン。動画を背景にするならこれがイチオシです。Drawer2.動画を綺麗に表示させるYouTubeをページにそのまま埋め込むと、上下に黒のバーがつき、YouTube感が出るので見栄えが今ひとつです。こちらは動画をシンプルに表示させるためのPrettyEmbedというプラグイン。一つは動画をポップアップさせるプラグイン。Lightning」:phpspot開発日誌WP管理画面WordPressの管理画面をカスタマイズするときにフロントページの配色(カラーピッカーでの)の変更やファイルをアップロードしたりする機能を付けたい。そんな一歩進んだカスタマイズをしたいときに知っておくと便利なものをメモしておきます。管理画面にて背景色やメインカラーをユーザーに選択してもらいたい場合、カラーコードを入力させるより、カラーピッカーでの選択をさせたい。Pickerを使います。Pickerを使う4.ドラッグ&ドロップでファイルをアップロード管理画面からロゴ画像やファビコンなどを直接アップロードさせられるようにカスタマイズしたい。そんなときはこちらのPluploadというファイルアップローダが便利。Web活メモ帳5.並べ替え+DBに保存ドラッグ&ドロップで並べ替えを行えるようにします。並べ替えた順番を保存・再現する方法と並び順をデータベースに保存も合わせてチェック。国産のコーポレートサイトを見ているとたまにみかける、文字を動かしながら表示するエフェクト。BlackFlag7.フォントサイズを変更スクリーンサイズに応じてフォントサイズを変更させるレスポンシブなプラグインfontFlex。ブラウザのサイズに応じて自動でサイズを調整してくれます。Resizerを使うと実現できます。スタイルが古めなのでCSSで今風に調整しましょう。jQuery.lab9.数字のカウントアップ指定した数字までエフェクトをかけながらカウントしてくれるライブラリcountUp。WP有料テーマなどでよく見かけます。countUp.js10.読み込み時に文字を動かすFlashのようにJavaScriptでアニメーションを実現する書き方でsetTimeoutを使っています。jQueryでフェードインなどを○秒後に実行する場合はsetTimeoutとopacityを使います。DX.univエフェクト11.波紋マテリアルデザインで採用されている波紋エフェクトを実装できるtwinkle。画像を掴むと動かした方向へ回転させることが可能になるThreeSixtyRotate。アニメーションの時間、回転方向などを指定可能です。ライフハッカー[日本版]14.要素が見えたタイミングでイベントを発生スクロールされた箇所でイベントを発生させるinviewを使い、ブラウザ上で見えたときに処理を実行させます。メニュー15.メニュー以外を暗くするメガドロップダウンナビゲーションメニューの大カテゴリをマウスホバーしたときに、サブメニューをamazonメガドロップのように見せたい。こちらはメニュー以外を暗くするオーバーレイエフェクトつき。Diglog16.簡単にナビゲーションメニューをレスポンシブへ筆者が使った中で一番簡単に実装可能だったのでオススメ。jQueryプラグインでレスポンシブなメニューを作る「MeanMenu」|skuare.net17.タブからアコーディオンに切り替えスマホ表示の際、タブのままだと使いにくそうだと感じたら、ブレークポイントでタブをアコーディオンに変更させるResponsive-Tabsを使います。写真をクリックすると上部に拡大画像を表示します。開閉時のエフェクトが気持ちよいですよ。LazyLoadスライド19.4分割表示4つのタイル型スライドのチュートリアル。いった見せ方もあるんだなということでメモしておきます。Codrops20.マウス操作でスライドを移動させる画像をマウス操作で移動させるチュートリアル。stuffではドラッグで要素を移動させることが可能です。Codrops他21.IE8以下でもCSS3のbackground-sizeを使えるように横幅ピッタリなページが増えてきましたが、IE8以下でもbackground-sizeプロパティを使えるようにしたい。Progress22.要素を上下左右中央にフィットさせる画像などを上下、左右、中央にフィットさせるJSライブラリ。投稿者:commte株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。した話し方をするおっさん。Win/Mac対応Web制作に欠かせなくなった「Node.js」。デザイナーさんやフロントにおいてもgulpの環境を整えるのがトレンドとなっています。gulpを何に2015/08/24Web制作者は確実に学習しておきたい、日本語リファレンス一覧フロントエンド開発規模が増大してカオスな状態みたいだし、何が流行っていて何を勉強すればよいのか分からない。今回は出来るだけ日本語対応してある、2015年も引き続きトレンドになる2016/11/14object-fit・currentColor・will-change・image-renderingなどマイナーだけど便利過ぎるCSSプロパティの使い方object-fit・currentColor・will-change・image-renderingなど、結構マイナーだけど、実用的なCSSプロパティをピックアップしまし2015/02/9何を使えばよいか分かった!コーポレートサイトの各ページを制作する前にみておきたいこと企業サイトはサービスや商品の他、ビジョンやIR情報などで構成されています。コメントデータの処理方法の詳細はこちらをご覧ください。