TAG : レスポンシブ

jquery jQuery lightGallery (Version 1.2.x) の使い方や設定

2016年1月16日

jQuery LightBox 系プラグイン lightGallery の基本的な使い方や設定に関する個人的なメモ。この時点での lightGallery のバージョンは「Version 1.2.13」。以前「Version 1.1.4」の時にも調べたけれど、最近使おうと思ったらバージョンが上がっていました。Version 1.2.0 で全面的に書き換えたとなっています。(Completely re-written the plugin..) lightGallery ホーム(デモ) lightGallery GitHub 目次 jQuery light…

続きを読む

jquery jQuery レスポンシブメニュープラグイン SlickNav の使い方

2015年1月18日

jQuery レスポンシブメニュープラグイン SlickNav の基本的な使い方や設定に関する個人的なメモ。マルチレベル(メニューの階層)にも対応しているので便利。 SlickNav Responsive Mobile Menu v1.0.1 licensed under MIT 目次 jQuery プラグイン SlickNav のダウンロード SlickNav のページの「DOWNLOAD NOW」をクリックしてダウンロード。 解凍すると以下のようなファイルやフォルダがある。jQuery プラグイン SlickNav を使用するのに必要なファイルは「j…

続きを読む

jquery jQuery lightSlider の使い方や設定

2014年12月31日

jQuery スライダープラグイン lightSlider の基本的な使い方や設定に関する個人的なメモ。この時点での lightSlider のバージョンは「Version 1.1.1」。 ライセンス:MIT License レスポンシブ対応 ギャラリーモード(スライドショー) サムネイル表示 Slide, Fade アニメーション youtube, vimeo , google map 対応 目次 jQuery lightSlider のダウンロード jQuery lightSlider のページの上部メニュー右側にある「Download」をクリックし…

続きを読む

jquery jQuery lightGallery の使い方や設定

2014年12月30日

追加情報 Version 1.2.x については「 jQuery lightGallery (Version 1.2.x) の使い方や設定」をご覧ください。 jQuery LightBox 系プラグイン lightGallery の基本的な使い方や設定に関する個人的なメモ。この時点での lightGallery のバージョンは「Version 1.1.4」。 ライセンス:MIT License レスポンシブ対応 Youtube Vimeo Video and html5 videos 対応 Slide and Fade アニメーション iframe 対応…

続きを読む

htmlcss スマホのレスポンシブデザインで右側に余白ができる場合

2014年12月27日

レスポンシブのサイトを作成していたら、何故かスマホのサイズの場合のみ、右側に余白(空間)ができていた。 HTML の構造は以下のようなもの。 CSS は以下のようなもの(関連部分抜粋) #header の幅は 100% に指定してあるのに、いくつかのページのみスマホのサイズでヘッダーの右側に余白ができる。よく見るとヘッダー部分のみではなく全体に余白ができている。デスクトップ PC でサイズを変更した場合や FireFox の View port resizer では余白が確認できない。 解決策 ラッパー要素の #container に「overflow:…

続きを読む

jquery jQuery プラグイン Masonry の使い方と設定

2014年12月6日

ブラウザの幅に応じて、配置した要素のレイアウトを整列してくれる jQuery プラグイン Masonry の使い方や設定に関する個人的なメモ。 Lazy Load や Magnific Popup も一緒に使ってみた。 この時点でのバージョン:v3.2.1 目次 jQuery プラグイン Masonry のダウンロード Masonry のページの「Download masonry.pkgd.min.js」を右クリックで「名前をつけてリンク先を保存」を選択するか、「Download masonry.pkgd.min.js」をクリックしてファイルメニューから…

続きを読む

jquery position: fixed を使ってメニュー(ナビゲーション)を固定する際の注意点

2014年11月28日

position: fixed を使ってメニューを固定する際に気をつける点などの個人的なメモ。 結論から言うと、メニュー(ナビゲーション)の高さを指定し忘れるとメニュー以降に出現するリンク要素(ハイパーリンク)のリンクがクリックできなく(リンクが効かなく)なったり、ブラウザ上の文字(テキスト)を選択しようとしても選択できなくなってしまう。 関連ページ:「レスポンシブメニュー」「ページ内リンクへアニメーションで移動」 また、以下のプラグインを使用すると簡単にメニューを固定表示することができる。 「jQuery Waypoints を使ってみる」 目次 メニ…

続きを読む

wordpress Slider Revolution / WordPress プラグインのダウンロードとインストール

2014年7月20日

WordPress のレスポンシブスライダープラグイン Slider Revolution のダウンロードとインストールに関するメモ。(Version 4.5.95 SkyWood) 価格:$16 ダウンロード(販売元):codecanyon どのようなスライダーが作成できるかは、Slider Revolution のサイトをご覧ください。 フル・レスポンシブ CSS Transitions(jQuery フォールバック) WYSIWYG ドラッグ&ドロップエディタ 多様なアニメーション効果(ベーシック、フラット、3D) 簡単にキャプションを配置 マルチ…

続きを読む

htmlcss Google カレンダーをレスポンシブ対応に

2014年5月20日

Google カレンダーをウェブサイトに埋め込んでレスポンシブ対応にする方法のメモ。 目次 ウェブサイトに埋め込む ウェブサイトに埋め込む(https://support.google.com/) Google ID を取得してすでにカレンダーを利用していることを前提。 Google カレンダーにログイン(下の画像) 右上の歯車のような(設定の)アイコンをクリックして「設定」を選択(下の画像) 以下のような画面が表示される。 左上の「カレンダー」のタブをクリック。(上の画像) カレンダーを誰でも閲覧できるようにするには、カレンダーを一般公開する必要がある…

続きを読む

jquery jQuery レスポンシブ・スライダー bxSlider

2014年5月18日

レスポンシブ対応のスライダー「bxSlider」(v4.1.2) の使い方や設定に関するメモ。とても簡単に設置ができるが、指定するモードによっては、使用している CSS の関係でスライドの位置がずれてしまったりしたのでその対処法やオプションについて。 目次 bxSlider のダウンロードとインストール bxSlider のサイトの右上の「Download」からファイルをダウンロード。 ダウンロードしたファイルを展開すると以下のようになっている。 images:コントロール類やローディングの画像 plugins:オプションで使用する「jquery.eas…

続きを読む