JetpackタイルギャラリーとWordPressギャラリーの違いを比較[Cocoon利用]

プラグイン『Jetpack』は、WordPressを始めたばかりの人が「導入すべきプラグイン」を調べると必ず名前のあがるプラグインですね。

セキュリティやSEO対策に便利だとして人気ですが、「pack」というだけあって、他にも便利なツールがひとまとめになった多機能プラグインです。

その機能の中にJetpack専用のブロックがあります。とっても豊富なブロックが用意されていますが、個人ブログで必要なものを探すと、画像関連のブロックくらいかなぁ~という印象でした。

その中に、写真を綺麗に並べて見せる『タイルギャラリー』ブロックが含まれています。

こちらのサイトは無料テーマCocoonを使っているので、最初から画像の拡大表示効果を設定できるようになっています。

そのため、WordPress既存のギャラリーブロックと、Cocoonの拡大表示機能を組み合わせれば、よほど凝った見せ方を希望しない限り、ほかからプラグインを持ってくる必要もないほどです。

ただ、せっかく追加されたブロックなので、どんな違いがあるのか確かめてみることにしました。

ギャラリーの表示は使っているテーマによって表示形式が異なるので、ここではCocoonを使っていることを前提での比較だとご承知おきください。

確認事項

  • Jetpackのブロックを使った場合、Jetpackブロックの設定を無効にすると該当するブロックの機能が停止します。Jetpackそのものを無効化または削除しても同じです。
  • テーマCocoonの場合、[Cocoon設定]-[画像]タブを開くと[画像の拡大効果]の設定項目があり、4種類から選択できるようになっています。
    Jetpackのタイルギャラリーに挿入した画像を拡大表示した時、その表示形式はCocoonの設定に依存します。
  • 画像の拡大表示効果を得るには、画像のリンク先を[メディアファイル]に設定します。

Jetpack タイルギャラリー

[投稿]もしくは[固定ページ]の編集画面を開き、ギャラリーを表示したい位置に[タイルギャラリー]ブロックを追加し、表示したい画像を挿入します。

Jetpackのブロック機能がオンに設定されていないと、Jetpackブロックは表示されません。

ブロックを使えるようにするには[Jetpack]→[設定]→[執筆]タブを開き、
「Jetpackブロックを使用すると、~」の項目をオンにします。

タイルギャラリーのスタイルのサンプル(4種類)

※ Jetpackタイルギャラリーを使ったギャラリーをそのまま載せたかったのですが、Jetpackを無効化するとギャラリー機能も無効化されるため、サンプル画像を載せています。

スタイル: タイルモザイク

長方形タイルで配置されます。

スタイル: 円形

円形に切り抜かれて配置されます。

スタイル: 正方形

正方形タイルで配置されます。

スタイル: タイルカラム

タイルギャラリー設定: 丸角

タイルギャラリーに挿入した画像を、一括で角を丸く変えられます。[丸角]のスライダーをドラッグするか、直接数値を入力して丸みのサイズを指定できます。

Jetpack タイルギャラリーの機能を動画で確認

Jetpack タイルギャラリー(実験用)

参考までに、ここにJetpackのタイルギャラリーを使ったギャラリーを置いておきます。もしもJetpackを無効化した時にどうなるかの目安になると思います。

[参考ギャラリー](上のサンプル画像と同じ)
 画像6枚、正方形スタイル、丸角(20)、リンク=メディアファイル

さて、一見便利そうに見えるJetpackのタイルギャラリーですが、WordPressの標準ブロックにある[ギャラリー]ではダメなのか?というと、そうでもなさそうです。

WordPressギャラリーブロック

WordPressのギャラリーブロックにも、基本的なギャラリー機能はあります。

カラム数の変更もできるし、並べた写真をクリック操作で並べ替えることもできます。

円形を選択するオプションはありませんが、機能を上手く使えば同等の表示は可能です。(あとで記述します)

[リンク先]で[メディアファイル]を選択すると、拡大表示されるようになります。

拡大表示は[Cocoon設定]-[画像]タブで4種類の表示形式から選択できます。

ギャラリー基本サンプル

挿入した画像の数に合わせて自動配列されます。

縦横の比率が異なる写真を並べる場合、[画像の切り抜き]をオンにするときれいに整列できます。

[画像の切り抜き]OFF

[画像の切り抜き]ON

ギャラリー内の写真を丸く切り抜く

WordPressの[ギャラリー]ブロックには、写真の角を丸く切り抜く機能はありませんが、画像を一枚ずつ選択すれば、[画像]ブロックとして[角丸]が選択できます。

[トリミング]で正方形に切り抜いた写真を[角丸]にすれば、写真を円形に表示できます。ただ、この機能は一括ではできず、一枚ずつ作業が必要なので面倒ではあります。

画像に[角丸]を設定

ギャラリー内の画像を選択し、サイドバーの[スタイル]から[角丸]を選択します。

画像を正円で表示する・・・[角丸]+トリミング[正方形]

[角丸]設定した画像を正方形にトリミングすると、正円に表示できます。

  1. 画像を選択し、ツールバーの[トリミング]ボタンをクリックします。
  1. ツールバーの表示が変わるので、[縦横比]ボタンをクリックして[正方形]を選択すると正円になります。

まとめ

プラグイン『Jetpack』とWordPress標準のギャラリー機能を比較してみました。

こうして比べてみると、自分なりの納得感を得て「必要か、必要でないか」がわかってきますね。

Jetpackは多機能で、最初はこれさえ入れておけばほぼ間違いないというソフトで重宝しますが、知らず知らずに必要のない機能を働かせてサイトを重たくする原因にもなっているようです。

新しいブロックが追加されたのを見たときは「こんなに!」と興奮しましたが、よくよく見ると、個人ブログで使えそうな機能は限られていました。

そんな中でもこのタイルギャラリーには期待したんですが、WordPressとCocoonを組み合わせれば、新たな機能を追加するほどでもないな…という結論に至りました。

ホント、Cocoonさまさまです。

写真サイトのように画像を魅せることが目的ならば、もう少し高度な設定で表示したいという希望もあると思います。そうした場合はあらためてプラグインの導入を考えてみると良いでしょう。

ギャラリープラグイン

もっと高度なギャラリーを作るなら、プラグインが必要になります。

タイトルとURLをコピーしました