Simplicityで最初から用意されているプラグイン・ライブラリ

Simplicityには細かい設定不要で、”highlight.js”、”Lazy Load”、”Lightbox”の定番ともいえる3種のjavascriptライブラリ・jQueryプラグインが使えるようになっています。

カスタマイズ画面でチェックボックスをオンにするするだけでよく、細かい設定も不要です。

シンプリシティ-カスタマイズ-プラグイン設定

カスタマイズ画面の矢印の先でオン・オフとプラグインの簡単な設定

これを知っていればhighlight.jsを使いたくて、わざわざ個別で読み込んでいた、なんてこともなくなります(経験談)。

ソースコードをハイライトする”highlight.js”

ウェブ上でソースコードを見やすく表示するためのプラグインです。<pre><code>コード</code><pre>の「コード」の部分にそのままコードを書くだけで、勝手に色分けされて見やすくなります(テーマにはhybridを使用)。

<script>
 lightbox.option({
  'fitImagesInViewport':true,
 });
</script>

対応する言語も多くテーマも豊富にあります。Simplicityではテーマをリストから選択できるようになっていて非常に便利です。

公式・配布ページ:highlight.js
スタイル一覧:highlight.js demo

画面に表示されていないページの後ろの画像の読み込みを後回しにする”Lazy Load”

遅延読み込みはある程度画像を用いる場合は必須です。通常では「画面」に表示されていない画像まで最初から読み込むため、ページの読み込みが完了するのは全ての画像を読み込んでからとなります。

画像を読み込むまでページの読み込みが終わらないと、ページの表示がもたつくことになります。また、ページの最後まで読まれる(スクロールされる)のならまだしも、途中でほかのページに移ったりした場合は読み込んだことが無駄になります。

それに対して”Lazy Load”を利用すると、ページ内の画像全てを一度には読み込まず、画面に表示されているところ(+数百ピクセルか)分のみにアクセスします。そしてページがスクロールされて画面に見える位置(+数百ピクセル)に来てから読み込んで表示させます。ページの表示が早くなるだけでなく、転送量も減らすことができます。

公式Lazy Load Plugin for jQuery
配布GitHub – jQuery plugin for lazy loading images

クリックした画像をポップアップのように表示する”Lightbox”

ポップアップというと語弊があるけど、画像をクリックすると拡大されるよくあるやつです。

Lightboxをオンにしてあれば、画像投稿先をリンク先をメディアファイルにするだけでモーダルウインドとして表示されます。

シンプリシティのメディア投稿画面。リンク先をメディアにすればLightboxが機能する

WordPressのメディア投稿画面。リンク先をメディアにすればLightboxが機能

ポップアプのように拡大表示されるはずなのですが…。PCではきちんと表示されるのに、スマホやタブレットだと機能せず、なぜか普通の画像リンクとなります。たまにそういうサイトを見かけていたんで不思議だったんですが、仕様なんでしょうか。

ちなみに他のサイトで使っているLightbox2ではモバイル端末でも普通に表示されます。

公式・配布:Lightbox

スポンサーリンク
336
336