Web Design Leaves

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

続きを読む

jQuery レスポンシブメニュープラグイン SlickNav の基本的な使い方や設定に関する個人的なメモ。マルチレベル（メニューの階層）にも対応しているので便利。 SlickNav Responsive Mobile Menu v1.0.1 licensed under MIT 目次 jQuery プラグイン SlickNav のダウンロード SlickN…

続きを読む

jQuery スライダープラグイン lightSlider の基本的な使い方や設定に関する個人的なメモ。この時点での lightSlider のバージョンは「Version 1.1.1」。 ライセンス：MIT License レスポンシブ対応 ギャラリーモード（スライドショー） サムネイル表示 Slide, Fade アニメーション youtube, vim…

続きを読む

追加情報 Version 1.2.x については「 jQuery lightGallery (Version 1.2.x) の使い方や設定」をご覧ください。 jQuery LightBox 系プラグイン lightGallery の基本的な使い方や設定に関する個人的なメモ。この時点での lightGallery のバージョンは「Version 1.1.4」。…

続きを読む

レスポンシブのサイトを作成していたら、何故かスマホのサイズの場合のみ、右側に余白（空間）ができていた。 HTML の構造は以下のようなもの。 CSS は以下のようなもの（関連部分抜粋） #header の幅は 100% に指定してあるのに、いくつかのページのみスマホのサイズでヘッダーの右側に余白ができる。よく見るとヘッダー部分のみではなく全体に余白ができてい…

続きを読む

ブラウザの幅に応じて、配置した要素のレイアウトを整列してくれる jQuery プラグイン Masonry の使い方や設定に関する個人的なメモ。 Lazy Load や Magnific Popup も一緒に使ってみた。 ★ CSS Grid + JavaScript で Masonry レイアウト も御覧ください（こちらの方が新しい情報です）。 この時点での…

続きを読む

position: fixed を使ってメニューを固定する際に気をつける点などの個人的なメモ。 結論から言うと、メニュー（ナビゲーション）の高さを指定し忘れるとメニュー以降に出現するリンク要素（ハイパーリンク）のリンクがクリックできなく（リンクが効かなく）なったり、ブラウザ上の文字（テキスト）を選択しようとしても選択できなくなってしまう。 関連ページ：「レス…

続きを読む

WordPress のレスポンシブスライダープラグイン Slider Revolution　のダウンロードとインストールに関するメモ。(Version 4.5.95 SkyWood) 価格：$16 ダウンロード（販売元）：codecanyon どのようなスライダーが作成できるかは、Slider Revolution のサイトをご覧ください。 フル・レスポンシ…

続きを読む

Google カレンダーをウェブサイトに埋め込んでレスポンシブ対応にする方法のメモ。 目次 ウェブサイトに埋め込む ウェブサイトに埋め込む（https://support.google.com/） Google ID を取得してすでにカレンダーを利用していることを前提。 Google カレンダーにログイン（下の画像） 右上の歯車のような（設定の）アイコンをク…

続きを読む

レスポンシブ対応のスライダー「bxSlider」(v4.1.2) の使い方や設定に関するメモ。とても簡単に設置ができるが、指定するモードによっては、使用している CSS の関係でスライドの位置がずれてしまったりしたのでその対処法やオプションについて。 目次 bxSlider のダウンロードとインストール bxSlider のサイトの右上の「Download」…

続きを読む