Pickupニュース

lightGalleryをWordPressで使う方法

通常画像からギャラリー機能まで対応
lighGalleryは非常に高機能で使い勝手の良いlightbox系のjQueryプラグインなのですが、今のところWordPress用のプラグインは提供されていません。そこで、独自にlightGalleryをWordPressのテーマに組み込んで使う方法の紹介です。

URL Shortener for Amazon

Amazonの長いURLを短縮コピーするChrome拡張機能
Amazonの商品ページの長いURLを、ASIN(Amazon Standard Identification Number)をベースにしたシンプルなURLに短縮してクリップボードにコピーしてくれるChrome拡張機能です。

CodePenでJavaScriptの読み込み順エラー

空のソースを追加して解決?
複数のjavaScriptソースを読み込んで作成したCodePenを埋め込んで表示する際に、うまくJavaScriptが機能しない場合がありました。そのような時の個人的な対処法です。

WordPressで画像を挿入する時は、ギャラリーを使うのも良いよ。

画像管理が面倒なあなたに
通常WordPressで記事内に画像を挿入する場合は、メディアの追加から画像を選択して投稿に挿入を行うと思います。でも、この方法だと後から変更点が出た場合修正が面倒になるケースもあるので、それなら初めからギャラリー機能を使うようにするのも便利です。

CSSだけでlist-styleのマーカーの色を変更する方法

<ul>タグ内のリストのマーカーをdiscにしていたのですが、テキストの色と同じだと強すぎて少し薄くしたいという要望がありました。そこで、HTMLマークアップは変更することなく、CSSだけでlist-styleのマーカーの色を変更する方法を紹介します。

完結:モバイルファースト時代のlightboxの在り方

lightGalleryで全てが解決しました!
とにかく今、一番良いlightbox系のjQueryプラグインは何か、とにかく調べ回りました。その結果、2016年11月現時点で入手可能なものとして最高なプラグインを見つけました。それがlightGalleryです。

lightGallery

多機能lightbox系のjQueryプラグイン
lightGalleryは非常に豊富なオプション設定が用意されているlightbox系(サムネイル画像をクリックしてモーダルウィンドウを開き、拡大して表示)のjQueryプラグインです。他の同類のプラグインと比較しても、スマートフォンでのスワイプ操作、ページ履歴でブラウザの「戻る」「進む」に対応、画像の拡大・縮小・ダウンロードなど、その多機能性は追随を許しません。

Window Resizer

ウィンドウサイズを固定値に変更するChrome拡張
ウィンドウのサイズをプリセットした幅×高さに変更するChrome拡張機能です。この時の幅と高さはウィンドウサイズかビューポートサイズを選択することが出来ます。

続:モバイルファースト時代のlightboxの在り方

pushStateでブラウザの「戻る」に対応!
先日、スマートフォンでのlightbox系プラグインを使用してスライドショーを表示する際は、誤って「戻る」操作をしてしまうと、元のページのさらに前のページに戻ってしまう問題点?を指摘しました。その解決策がわかりましたので、ご紹介致します。

記事ランキング