画像をマウスオーバーした時に、画像の一部をズームして拡大表示することができるjQueryのプラグイン「elevatezoom.js」をご紹介します。「elevatezoom.js」マウスオーバーした時に画像を拡大させて見せることができるので、ショップなどの商品画像を見せる際などに利用できると思います。下記にjQueryのプラグイン「elevatezoom.js」を使用して、画像の一部をズームさせて拡大表示したときの方法をメモします。下記URLより、ダウンロードします。http://www.elevateweb.co.uk/image-zoomダウンロードした「jquery.elevatezoom.js」を読み込みます。/>ページに表示する画像と拡大した時の画像の二つを用意するか、ページに表示する画像のサイズを小さくして表示させます。「src=””」に表示される画像を設置し、「data-zoom-image=””」に拡大した時の画像を設置します。サンプルページ:【jQuery】画像のズーム機能「elevatezoom.js」また、オプションで表示の仕方などを変更することが可能です。200});他にも色々なオプションがありますので、ぜひチェックしてみてください。Map」をご紹介します。)」このプラグインを使用するとjQueryで簡単に日本地図をページに表示することができます。都道府県ごとに選択できるようになっているので、クリック後にリンクやアクションを追加したりなど活用できそうです。Map」を使用して、日本地図を表示させたときの設置方法をメモします。Map」をダウンロードします。http://takemaru-hirai.github.io/japan-map/ダウンロードした「jquery.japan-map.js」を読み込みます。});});</script>ホバーした時に処理をする場合は下記のように記述します。都道府県ごとに選択することができます。都道府県ごとではなく、地方ごとに選択することも可能です。日本地図を使ってページを作るときに利用できそうです。raining返信WordPressを使用して、店舗や会社(オフィシャル)サイトを構築することがあります。そのようなサイトを作る場合は、営業日を知らせる為に営業日カレンダーをサイトに表示したいと思います。Calendar」を使用すれば簡単に営業日カレンダーを設置することができます。イベントカレンダーとしても使用できます。Calendar」プラグインを使用した時の設置方法をメモします。Calendarウィジェットで営業日カレンダー、イベントカレンダーを表示することができるプラグインです。Calendar」で検索し、インストールします。Calendar」を有効化します。Calendarの設定画面が表示されます。イベント】5.情報を入力後、「変更を保存」ボタンをクリックします。6.設定が完了したら、「外観」から「ウィジェット」を選択します。Calendar」が表示されるので、サイドバー等に設置します。↓7.保存が完了するとサイトに営業日カレンダーが表示されます。設定項目もシンプルなので簡単に営業日カレンダーを設置することができます。イベント日を設定する場合はURLも指定することができるので便利です。サイドメニューに簡単に作成したい場合はおすすめです。raining返信jQueryのプラグイン「Lightbox2」を使用したので設置方法を記載します。Lightboxは画像やリンクなどをクリックした際に、ウィンドウ内で画像を拡大表示することができるプラグインです。今のバージョン(2.5以降)ではjQueryだけで設置できるようです。prototypeとjQueryを共存させると動作がうまくいかないことがあり、Lightboxをあまり使用していなかったのですが今後活用できそうです。下記にjQueryのプラグイン「Lightbox2」を使用し、画像の拡大表示をさせた時の設置方法をメモします。Lightbox2の設置方法(使い方)下記URLより、「Lightbox2」をダウンロードします。http://lokeshdhakar.com/projects/lightbox2/ダウンロードした「css」「js」「img」フォルダをサーバにアップロードします。【共通で読み込むファイル】jQueryと各ファイルを読み込みます。src="./js/lightbox.js"></script>【HTML】Lightbox2を使用する画像のリンクに「rel=”lightbox”」を記述します。/></a>また、下記のように記述してもOKです。aタグに「data-lightbox=”sample”」を追加しています※「sample」は個別の値で設定します。/></a>上記の設定をするだけで、Lightbox2を設置することができます。複数の画像をグループ化して表示させたい場合があります。下記のように記述するとグループ化することが可能です。「rel=”lightbox[group]”」を記述します。/></a>または、下記のように記述します。グループ化する場合「data-lightbox=”group”」の「group」を同じ値で設定します。「title=”キャプション”」を記述します。/></a>または、下記のように記述します。拡大して表示したい画像がある場合などはおすすめです。2」を使用してみたので、設定方法をメモします。複数の画像をスライドショーさせた時の方法をメモします。2」をダウンロードします。http://flexslider.woothemes.com/【読み込むファイル】jQueryと各ファイルを読み込みます。src="./jquery.flexslider.js"></script>【JS】クラスを指定し「flexslider」を使用します。“slide”」を指定します。animationは「slide」と「fade」で設定することが可能です。5000」で設定しています。他にも設定は色々あります。ページ下部に一部記載します。【HTML】スライドショーをさせる要素に「class=”flexslider”」を記述します。</ul></div>画像にリンクを貼る場合は、画像にaタグを指定すればリンクを貼ることが可能です。キャプションを付ける場合はimgタグの箇所にpタグで指定します。上記の設定をするだけでスライドショーを行えます。スタイルがデフォルトの状態なので、デザインを変更する場合はCSSで調整します。他にも色々なカスタマイズをすることが可能です。スライドの種類を設定します。「fade」か「slide」で指定します。スライドの方向を設定します。横の場合「horizontal」、縦の場合「vertical」で指定します。逆方向にスライドさせる場合は「true」を指定します。スライドをループさせるかを設定します。ループさせない場合は「false」を指定します。自動でスライドショーを行うかを設定します。手動にする場合は「false」を指定します。スライドショーのスピード(間隔)を設定します。アニメーションのスピードを設定します。ランダムでスライドショーをさせる場合は「true」で設定します。ページャーを表示するかを設定します。表示しない場合は「false」を指定します。次へと前へのナビゲーションを表示するかを設定します。表示しない場合は「false」を指定します。前へナビゲーションのテキストを指定します。次へナビゲーションのテキストを指定します。※上記は一部のオプションです。他にも色々なオプションがあるので、様々なカスタマイズができそうです。