はてなブックマーク

今回は、Webページの読み込み時やページ遷移時にフェードインなどのアニメーション効果実装できるjQueryプラグイン【Animsition】のご紹介です。 以前は、エフェクト効果は、18種類ほどだったのですが、最近見たら58種類に増えていました。 超増えてんじゃんwwwって思いながら見てたわけなのですが・・・ デフォルトで【58種類】のアニメーション効果がありますので、少し嬉しいポイントですね。 アニメーション効果も普通にカッコイイですし、なんとローディングまで用意してありますので、特設サイトやオシャレなWEBサイトなどに相性の良いjQueryプラグインだと思います。 また、WordPressでサイトやブログを運営していて、こちらのjQueryプラグインを使いたいけど、実装が少し難しいという方は、WordPressのプラグインもあるみたいなので、そちらを利用してみてもいいかもしれません。

今回は、WordPressコンテンツスライダー【Smooth Slider】プラグインの使い方のご紹介です。 こちらのスライダープラグインは、【レスポンシブ】に対応しており、投稿した記事の画像と本文付きのコンテンツスライダーを簡単に実装出来るプラグインとなっています。 その他にもカテゴリー別・画像のみのスライドも管理なども出来ます。 スライドショーの設定も管理画面から細かく出来ますので、自分好みのスライド作成だって出来ます。 WordPressでプラグインを使わず一からスライドショーの作成する場合は、とても面倒ですし、HTML・CSSの知識があまりない方にとっては、敷居が高いと思います。 そんな方や、サクッとオススメ記事なんかをスライドショーで表示したいんだよねー。という方にオススメのWordPressコンテンツスライダープラグインです。 また、管理画面でスライダーを作成中もプレビュー表示

超簡単にポップアップメニューが実装出来るjQueryプラグイン【jQueryPopMenu】の使い方をご紹介したいと思います。 実装がとても簡単で、すぐに実装できますし、レスポンシブやスマホのポップアップメニューなどにも利用できると思います。 デモページも有りますので是非ご参考下さい。 デモページ 必要なファイル等は、下記リンク先よりダウンロードをお願い致します。 jQueryPopMenu ポップアップメニュー実装方法 それでは、jQueryプラグイン【jQueryPopMenu】を使ってポップアップメニューを実装していきたいと思います。 実装するにあたりこちらより必要なファイル等は事前にダウンロードしておいて下さい。 必要ファイルの読み込み まずは、head内にjQuery本体とダウンロードしたファイルの中にあるjquery.popmenu.jsファイルを読み込みます。 ファイルの階層

今回は、画面幅いっぱいのダイナミックなスライド表示が出来る、コンテンツスライダーの使い方のご紹介です。 利用するスライダーなんですが、作者様が日本人の方などで、ご自身のサイトでも詳しく説明もしてありますし、サンプルファイルのダウンロードも下記リンク先より出来ます。 こちらのスライダーは、レスポンシブ対応・スピード調整・自動スライド・フリックオプション設定も可能です。 また、デフォルトではページネーションは、CSSで装飾されていますが、カスタマイズすれば、サムネイル表示も可能です。 その辺の、カスタマイズ方法も今回は、ご紹介したいと思います。 実際にFullWide Sliderを実装したデモサイトもご用意しましたので、ご参考頂ければと思います。 デモサイト 実際にデモサイトで使用した感想ですが、シンプルで使いやすいなーという印象を受けました。 HTML・CSS側でも複雑なコードを記述する必

今回は、jQueryプラグイン【liScroll】を利用して、文字などをニュースティッカーを実装してみたいと思います。 ニュース系のサイトや電光掲示板なんかでもティッカーはよく見る表示方法で、少ない領域でより多くの情報をユーザーに伝えることが出来ます。 また、右から左への文字が動きますので、ユーザーの目に止まりやすいです。 ティッカーとは、 ティッカーとは、特定範囲内に文字列を流して表示させる表示方式のことである。右から左（あるいは上から下へ）文字が次々に流れてゆくのを読ませる方式であるので、限られた狭い領域で多くの情報を表示することができる。 ティッカーの代表的な例としては、新幹線の車内や看板、証券取引所などにある電光掲示板がある。Webページにおいても、左右に文字の流れるティッカー表示が用いられる場合が珍しくない。 こちらのjQueryプラグイン【liScroll】を利用して、Word

今回は、jQueryプラグイン【Remodalr】のご紹介です。 こちらのプラグインは、シンプルなモーダルウィンドウを簡単に実装出来るプラグインとなっています。 モーダルウィンドウを利用すれば、コンテンツやちょっとしたテキスト・プロフィールをスペースを取ることなく表示させることが出来るので、便利だと僕が思います。 また、こちらのモーダルウィンドウは、オプションなどあまりありませんが、とてもシンプルでカスタマイズ性に優れていますし、レスポンシブにも対応していますので、とりあえずモーダルウィンドウを実装したい場合にオススメのjQuryプラグインです。 実際に【Remodalr】を利用したデモサイトも用意しましたので、参考頂ければと思います。 デモサイト 実際にこちらのプラグインを利用する場合は、下記より必要ファイルなどをダウンロードして下さい。 Remodalr モーダルウィンドウ 実装方法

追記 : 大変申し訳ございませんが、デモサイト等の当サイトのGoogleアナリティクスコードのコピーは避けて下さい。 デモサイトのページを丸ごとコピペすると当サイトのアナリティクスコードまで貼り付けられますので、貼り付けた場合は、削除の方をよろしくお願い致します。 今回は、イベントの告知やタイムセールの告知に使えるjavasriptで作るカウントダウンタイマーの紹介です。 よくネットショップなんかで見るとは思いますが、 【ポイント10倍終了まで : 1時間15分15秒00】 デモページもご用意しましたのでご参考下さい。 デモページ みたいなのです。 最近では、楽天スーパーSALE!!があっているのでカウントダウンタイマーを使われている店舗さんも多いんじゃないんでしょうか？ ネットショップなんかでは販売促進なんかによく利用されているのですが、なかなか時間も無いし・導入方法がわからない。 って

今回は、レスポンシブに対応した、水平スライドアウトメニューの実装方法のご紹介です。 こちらのスライドメニューは、レスポンシブにも対応していますので、レスポンシブメニューの一つとしてストックしておいてもいいかもしれません。 また、メニューの初期デザインが素晴らしく、様々なサイトのメニューデザインとして使用出来ると思います。 僕なら、ネットショップのメニューやWordPressでアイキャッチ画像も表示させてカテゴリー毎の新着記事順なんかのメニューでもいいですし、ギャラリー系のメニューでもいいかもしれません。 色々ありすぎて迷いますけどwww、使い方次第では面白いスライドメニューだと思います。 下記にデモサイトもありますので、ご参考にどうぞ デモサイト 実装に必要なファイルなどは、下記リンク先よりダウンロードして下さい。 HORIZONTAL SLIDE OUT MENU レスポンシブに対応した

Webアイコンフォント【Font Awesome】の使い方を紹介したいと思います。 【Font Awesome】では、手軽にWebアイコンフォント利用でき、利用も無料(商用無料)で479個(2014/12/22)のアイコンフォントが利用できます。 また、アイコンフォントを利用すれば、Retina Displaysも気にすることがありませんし画像などを利用するよりも表示が軽く、CSSで簡単にアイコンフォントを装飾が可能です。 Webアイコンフォント利用するなら【Font Awesome】だよ、というぐらい素晴らしいです。 利用は、ファイルをダウンロードして利用する方法とCDNを利用して利用する方法があります。 基本的にどちらでもいいと思いますが、CDNの方が利用しやすいと思います。 Font Awesome Webアイコンフォント使い方 今回は、【CDN】での使い方を記載したいと思います。

今回は、投稿記事などに公開終了日を設定出来るWordPressプラグイン【Post Expirator】のご紹介です。 利用場面は、限定的ではありますがいざ利用するととても便利なプラグインです。 例えば、企業等のサイトでは、お休みのお知らせや求人情報を日時を指定し期間限定で公開すると、日時終了後に記事が非公開となります。 また、Welcartなどでネットショップを構築されているサイトと組み合わせれば、期間限定販売商品なども出来るので、使いドコロによっては大変便利なWordPressプラグインではあります。 さらに、非公開ではなく指定した日時にカテゴリーを変更・追加・削除も可能となっています。 Post Expirator インストール まずこちらのプラグインを利用するために、【Post Expirator】をインストールしていきたいと思います。 まずは、管理画面より プラグイン > 新規追

今回は、画像や動画などをオーバーレイ表示出来るLightbox系jQueryプラグイン【Colorbox】の使い方のご紹介です。 こちらの【colorbox】は、画像だけではなく動画やinlineコンテンツなどのもオーバーレイで表示出来るので、大変便利なjQueryプラグインとなっています。 また、オーバーレイのスタイルも5種類ほど用意してあり対応したCSSを読み込めば対応しています。 実装のハードルも高くなく割と簡単に実装も出来ると思います。 実際に【Colorbox】を利用したデモサイトもありますので、ご参考下さい。 デモサイト 実装するのであれば、下記リンク先より必要ファイルをダウンロードして下さい。 Clorbox それでは、jQueryプラグイン【Colorbox】の使い方をご説明していきます。 実装するにあたりこちらより必要なファイルなどを事前にダウンロードしておいて下さい。

今回は、レスポンシブメニューの実装に使えるjQueryプラグイン【Sidr】の使い方のご紹介です。 こちらの【Sidr】が適応されると、メニューがサイドからスライド表示されるようになります。 便利な所が、既存メニューを利用してスマホなどの閲覧時にスライドメニューに対応出来るので、WordPressにも簡単に実装が出来ると思います。 また、メニューだけではなくコンテンツもスライド表示ができ、スライド時のテーマも2種類あり専用のCSSファイルを読み込むだけで、テーマが適応されるようになっています。 なので、今回はPCの通常閲覧時(768px以上)には、通常通りのメニューを表示させ、プレイク後(768px以下)には、【Sidr】が適応されたスライドメニューを表示させたいと思います。 言葉で言っても、あんまり伝えるの苦手なのでwww下記にデモサイトのようなメニューの表示方法です。 デモサイト 実際

今回は、javascriptを使わずCSSのみで作成できるドロワーメニュー【Pure Drawer】のご紹介です。 機能がjavascriptで作っているドロワーに劣るのでは？と思われますが、エフェクト効果・ドロワー位置の変更も簡単に行えます。 実際に【Pure Drawer】を使ったデモサイトもありますので、ご参考下さい。 デモサイト 実際に利用する場合は、下記サイトより必要ファイルをダウンロードして下さい。 Pure Drawer Pure Drawer 使い方 それでは、CSSだけで作る【Pure Drawer】の使い方のご紹介をしていきたいと思います。 必要ファイルの読み込み ダウンロードしたファルダ内にある【app.min.css】をhead内に読み込みます。 <link rel="stylesheet" href="css/app.min.css" type="text/css

今回は、スマホやタブレとのドロワーメニューなどに使えるjQueryプラグイン【Slidebars】の使い方のご紹介です。 ほとんどのサイトやブログのスマホサイトで見かける、横からメニューがスライドして表示されるのです。 横からヒュルと出てきますので、ちょっとかっこいいなーって思う方もいると思います。wwww こちらのプラグインは、ナビゲーションをアニメーションでスライド表示させてくれます。 また、ドロワーメニューだけではなく、コンテンツをサイドからスライドさせることも出来ますので、スマホのスペース確保などにも使える大変便利なプラグインです。 実装もHTMLさえ理解していれば、簡単に実装出来ますので、便利なプラグインです。 実際に【Slidebars】を利用したデモサイトも用意していますので、ご参考下さい。 デモサイトでは、メニューボタンをクリックすると左からドロワーメニューが表示されます。

今回は、スマホサイトや画像ギャラリー系サイトのスライダーにオススメのjQueryプラグイン【Fotorama】のご紹介です。 こちらのスライダープラグインは、レスポンシブ・スワイプでの画像移動・フルスクリーンモードなども対応しているスライダープラグインです。 さらに、画像だけではなく【HTML】【動画】などもスライドに対応しています。 実装もとても簡単ですし、jsファイル等の【CDN】も用意してあります。 また、WordPressのプラグインとしても配布されているスライダーですので、様々な用途にご利用ができます。 実際に【Fotorama】を使ったデモサイトも用意しましたので、参考頂ければと思います。 デモサイト 実際にデモサイトで、Fotoramaを使ってみた感想ですが、僕的にはデフォルトで利用しても、レスポンシブに対応していますので、レスポンシブのWebサイトやスマホサイトにピッタリの

今回は、jQueryでサイドバーをスクロールに合わせて追尾するスクリプトをご紹介したいと思います。 webページを下にスクロールしていくと、サイドが空白になっていく場合などがあると思います そんな時にこちらのスクリプトを設置すれば、追尾させたい要素をスクロールに合わせて追尾させることが可能です。 スクロールに追尾させるのは、賛否両論あるとは思いますが、サイトの種類などにもよると思いますが、僕は使われていない要素を有効に使えるスクリプトなどで良いとは思います。 下記のサイトで紹介されていて初心者の方でもコピペで利用できると思うのでご紹介したいと思います。 最近はやりのフッターに重ならない追尾するサイドバーをjQueryで作ってみました！ 僕の方でも動作デモサイトをご用意していますので、是非ご覧くだださい。 動作デモサイト jQuery本体の読み込み まずは、jQueryを本体を読み込みます。

今回は、CSSだけで作るシンプルなデザインのパンくずリストのコードのご紹介です。 意外とパンくずリストのデザインってどうなんにしようかなーって迷ういながらもシンプルなデザインに落ち着いてしまう僕ですwww パンくずリストって何?って言う方にざっくりと説明すると、ご自身のウェブサイトで現在見ているページの位置を示すナビゲーションのようなものです。 基本的にユーザーが、現在位置を見失わないようにユーザービリティの向上を目的としますし。 よくネットショップなんかを利用されている方は、見かけるのではないでしょうか？ また、名前の【パンくずリスト】という名前の由来なのですが、僕も最初はなんで、【パンくず?】と思っていましたが、下記のような由来があるようです。 「パンくずリスト」という名前は、童話『ヘンゼルとグレーテル』で、主人公が森で迷子にならないように通り道にパンくずを置いていった、というエピソー

今回は、スマホのドロップダウンメニューの実装などに大変便利なjQueryプラグイン【SlickNav】の使い方のご紹介です。 実際に利用してみたら、とても便利でしたのでご紹介させて頂きます。 こちらのプラグインのとても便利な所が、既存のメニュー(ul要素でマークアップしている必要があります)をそのままコピーしてくれてモバイル用のスタイルで表示させてくれるんです。 なので、これからレスポンシブ化をするサイトなんかにこちらのjqueryプラグイン【SlickNav】利用したらとても作業も楽なんじゃないかなーと思います。 また、jQuery UIを読み込むとメニューをオープンとクローズ時のアニメーションをeasingのアニメーションを利用出来るようになっています。 レスポンシブに対応していますので、スマホのメニューだけではなく、ある要素をモバイルで、スペースを節約したい時に、こちらの【Slick

今回は、プラグインを使わずスマホのメニューなどにも実装できる【jQuery 水平スライドメニュー】のご紹介です。 実装は、とても簡単でシンプルなので、利便性も良いかと思います。 PC用のメニューだけではなく、スマホサイトのメニューとしても利用できるのではないでしょうか。 下記にデモサイトも用意していますので、ご参考頂ければと思います。 デモサイト jQuery 水平スライドメニュー実装方法 それでは、実装方法をご説明していきます。 jQuery本体の読み込み まずは、jQuery本体をhead内に読み込みます。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" ></script> スクリプトの記載 jQuery本体を読み込んだら、下記コードをコピーして</body>の手前などに貼り付

ホーム› BLOG› web制作› jQuery› パララックスのようなスクロール アニメーションが超簡単に出来る 軽量スクリプト WOW.js使い方 ユーザーがスクロールした時やブラウザビューポートに任意の距離に達した時などパララックスのような要素が様々なアニメーションで表示・非表示が出来るWOW.js(5KB)という軽量スクリプトのご紹介です。 特設ページやLPやパララックスなど1カラムのページに使えそうなスクリプトなのでとても重宝するとは思います。下記リンク先にデモページを用意しましたのでご参考頂ければと思います。 デモページ こちらのスクリプトは、jQuery本体を読み込まなくても動作致します。 だからといってjQueryを読み込んでも不都合などはありませんのご心配なく。 また、アニメーションはAnimate.cssを利用していますので、多彩なアニメーションが用意されていますので自

今回は、スマホサイト制作時に役に立つスライドメニューを実装出来るjQueryプラグイン【mmenu】の使い方のご紹介です。 どんなスライドメニューかといいますと、指定したメニューが左右からスライドして表示されるメニューを実装出来ます。 gmailのアプリをインストールされている方はピンと来るかもしれません。 利用も簡単に実装出来ますし、オススメしたいポイントが指定したナビ要素を自動的にCSSでスタイルしてくれます。 さらにメニューのサブメニューも自動でドロップダウンのようなスタイルも実装してくれます。 また、指定のCSSを読み込みオプションを指定すればナビのスタイルのテーマも変更が可能となってます。 上記の用にこちらのjQueryプラグインは、特定のCSSを読み込みオプションを指定すれば、エフェクトの追加やスタイルのテーマの追加が出来ます。 デモサイトも下記にご用意しておりますので、ご参考