Swipeboxの導入とカスタマイズ

少し前の話ですが、サイトにLightBox系プラグイン「Swipebox」を導入しました。WordPressプラグインを利用するのが一番簡単なのでしょうが、サイトが重くなるのが嫌なので今回もjQueryを使って実装します。

Swipebox導入

まずはSwipeboxを導入します。タグのclassを特に指定しなくても自動的に有効にしたいので、先人の知恵を借りてWordPressに組み込むことにします。
今回参考にしたページはコチラ。

スマホ対応の軽量LightBoxプラグイン Swipebox | Welcart カスタマイズ

まずはサイトの説明どおり淡々と作業していきます。httpd再起動は不要です。functions.phpの編集が完了した段階でLightBoxが有効になります。
swipebox_before
とりあえず出来ましたが背景が黒一色なのであまり面白くありません。少しCSSを調整してみます。

Swipeboxカスタマイズ

背景の半透明化

Swipebox用のスタイルシート「swipebox.min.css(swipebox.css)」を編集します。minがあるファイルはswipebox.cssから無駄な表記を削って小サイズ化したもの。
非常に見づらく編集しにくいため、functions.phpに書き込んだCSSファイル名をswipebox.min.cssからswipebox.cssに変更して微調整を行ったあと、最後にswipebox.min.cssに反映させる方法がお勧めです。

編集ポイントは二つ。

  • ファイル先頭の#swipebox-overlayではなく、末尾のSkinセクションにある方の#swipebox-overlayを修正すること。
  • もう一つは透過度を指定するときはopacity()ではなくrbga()を使用すること。opacity()は子要素まで半透明になってしまう。
/* Skin 
--------------------------*/
#swipebox-overlay {
-  background: #000;
+  background: rgba(0, 0, 0, 0.8); 

その結果がこちら。分かりにくいですが背景だけが半透明になりました。
swipebox_after

SwipeboxをPNGにも適用させる

riscascape.netではmuninのグラフ画像=PNGもコンテンツとして利用しているので、JPEGだけでなくPNGでもSwipeboxを呼び出すようにuse-swipebox.jsを修正します。

# vi use-swipebox.js
jQuery(function($) {
-    $('a[href$=jpg]').swipebox();
+    $('a[href$=jpg],a[href$=png]').swipebox();
});

見ての通り,a[href$=png]を追加します。もしGIFを追加したい場合は,a[href$=gif]をさらに追加すると良いでしょう。

2015/5/10 更新

子テーマにSwipeboxを設定する手順を追加しました。

Swipeboxを子テーマに適用する
Swipeboxの導入とカスタマイズの続きです。 前回の記事では親テーマにSwipeboxを設置していましたが、その後子テーマを...