こんにちは！

つづすけです！

先日お知らせしましたが、あるカケにフォトギャラリーがオープンしました〜！

もう見ていただけましたか？？

今回ギャラリーを作るにあたって悩んだのが、どのプラグインを使うのか？

せっかく写真を集めてギャラリーを作るなら、綺麗に並べたいですよね。

結局今回は、プラグイン「Jetpack」のタイルギャラリーの機能を使って作成しました。

タイルギャラリー機能の使い方や、なぜJetpackを使ったのかなどを、ご紹介したいと思います！

 

プラグイン「Jetpack」のタイルギャラリーの使い方

では、早速使い方をご紹介していきます。

「Jetpack」のインストールの方法は、ちょっとややこしいですが紹介しているブログがたーくさんあるので割愛させていただきますね。

「Jetpack」をインストール→有効化　している状態からスタートです！

まずはこちら（プラグイン「Jetpack」の全機能を設定する方法）を参考に「Jetpack」の全機能が設定できるページへいきます。

全機能設定できるページで、「カルーセル」と「タイルギャラリー」を有効化します。

カルーセルとはなんぞや？という方！

カルーセルを有効化しておくと、ギャラリーの写真をクリックした時にこんな感じで拡大されスライド形式に表示されます。

不要な方は、タイルギャラリーのみ有効化にしてください。

これで下準備は完了です。

次に、投稿ページや固定ページに写真や画像を入れるときと同じ、メディアを追加を押します。

左側の「ギャラリー作成」をクリックし、好きな写真を選んだら、ギャラリーを作成を押します。

ギャラリーの詳細を設定できる画面が出てくるので、詳細を設定し、ギャラリーを挿入をクリックで完成です。

リンク先：添付ファイルのページ、メディアファイル、なしと選択できます。カルーセルを有効化していると添付ファイルのページでもメディアファイルでもどちらでも同じです。

カラム：１列に何枚表示するかを選べます。

サイズ：画像のサイズを選びます。

タイプ：６種類から選べます。

サムネイルグリッド

タイルモザイク

丸型

正方形グリッド

他に、タイルカラム、スライドショーが選択できます。

 

「Jetpack」でギャラリーを作る理由

１、スマートフォンでも綺麗に表示される（レスポンシブデザイン）

今回ギャラリーを作るにあたって、他のプラグインも検討しました。

いくつか有名なものもあり、その中の１つ「Foo Gallery」をインストールして使ってみましたが、とってもおしゃれにできるんです！

ただ「FooGallery」もスマホ対応なのですが、スマホでは１カラムで表示され、パソコンで見た時のようにカラム数を３とか２で表示できませんでした。（ワタクシの力不足）

その点、Jetpackのタイルギャラリーではこんな感じに、３カラムのまま表示できます。

せっかくのギャラリーなので、綺麗に並んだ状態で表示させたかったのでJetpackの機能を使いました。

２、元々Jetpackを使っている

便利な機能が盛りだくさんのJetpackですが、しばしば重たいと言われるプラグインでもあります。

ワタクシは元々Jetpackを利用しているので、プラグインを増やすよりも機能の追加で対応できるならそれでいいかーと思ったというのもあります。

なので、他におしゃれなプラグインもたくさんあることですし、ギャラリーを作るためだけにJetpackを利用するのはお勧めできませんね。

 

１カラムの固定ページに挿入した時の問題点

まとめる前に１つ、ギャラリー機能を作っていて困ったことがあり、どんなに探しても同じ症状の方が出てこなかったので書いておきたいと思います。

固定ページにギャラリーを作る場合で、テンプレートをサイドバーなし（１カラムのページ）に設定した場合です。

すると・・・

こんな感じで、サイドバーの幅が埋まらず、空白ができてしまいます。

おそらく、タイルギャラリーの幅が最初から決まってしまっているのでしょう。ワタクシではCSSを変更できないので、あれこれ試行錯誤すると・・・

タイプをサムネイルグリッドに変更すると解決できました。

１カラムで他のタイプを使いたくなった時は、他のプラグインを検討かなと。

同じ現象で困った方がいらっしゃれば、お試しあれ！

 

まとめ

というわけで、プラグイン「Jetpack」のギャラリーの使い方をご紹介しました！

フォトギャラリーのページを作ったり、投稿にちょっと入れたりするだけで、一気におしゃれな雰囲気にできちゃいますね！

投稿に入れればイベントの様子なんかをわかりやすくもできますね。

それでは、また〜！