WordPressギャラリーを簡単に見映え良く!Jetpackタイルギャラリー

Jetpackタイルギャラリーイメージ


WordPressには画像ギャラリーを作る機能がデフォルトで存在します。

しかし、デフォルトの機能だけでは 『ギャラリー』 と呼ぶには少々厳しい感じのモノしか作成できません^^;

◆ デフォルトのギャラリー
デフォルトのギャラリー

その為、たくさんのギャラリー用プラグインが存在します。

その中でも、今回は既にJetpackを導入している方なら、設定が非常に簡単で、手軽にサクサクッときれいめスライドショー機能付きギャラリーを作れる『Jetpackタイルギャラリー』について書いてみました。

Jetpackタイルギャラリーで作成したギャラリーの一例

◆ 「タイルモザイク」で作成
Jetpackタイルギャラリーで作成したギャラリー

同じ写真を使っているのに並べ方で印象も変わりますね(^^)

では、方法を見ていきましょう。

Jetpackの設定で 『Jetpackタイルギャラリー』 と 『カルーセル』 を有効化しておく

管理画面のメニューからJetpackをポイント表示されるサブメニューから、設定をクリックします。

Jetpackの設定をクリック

設定の一覧から、カルーセルとJetpackタイルギャラリーとを有効化します。

※注意
テーマがTwentyからはじまるデフォルトテーマの場合は問題ありませんが、デフォルトでないテーマの場合で、かつ、そのテーマにスライドショー機能がついている場合、カルーセルを有効化してもスライドショーが使用できない場合があります。これはテーマのスライドショーで使用されているJSとJetpackのカルーセルで使用するJSとがバッティングする場合、自動的にJetpackのカルーセルの機能がOFFになるためです。

この場合は、テーマの作者に問い合わせるか、別のギャラリー&プラグインを使用するのがオススメです。

カルーセル
カルーセルの有効化

Jetpackタイルギャラリー
Jetpackタイルギャラリーを有効化

それぞれの機能の説明がアイコンや文字列部分をクリックすると
項目をクリックすると説明が表示される

以下の様に表示されます。内容を読むと理解が深まりますので読んでみて下さいね。
タイルギャラリーの説明

では、準備ができたので、ギャラリーを作成していきましょう。

ギャラリーの作成

ギャラリーを作成するには、投稿画面のギャラリーを挿入したい場所にカーソルがある状態で、メディアを追加ボタンをクリックします。
メディアを追加ボタン

メディアを挿入の画面で、左上の方にある、ギャラリーを作成 をクリックします。
ギャラリーを作成

ギャラリーを作成画面に変わります。

ギャラリーを作成の画面

この状態で、ギャラリーの画像を選択して、ギャラリーを作成します。ギャラリーの画像は、次の2つの方法で選択できます。

  • 新たに画像ファイルをアップロードする
    ファイルをアップロードをクリックして、ギャラリーの画像にしたい画像をアップロードします。
    ドラッグ&ドロップで複数の写真も一括アップロードできます
  • 既にメディアファイル内にある画像をクリックして選択する
    ギャラリーを作成の画面で、ギャラリーに入れたい画像をクリックします。
    ✔マークの付いた画像がギャラリーの画像になります。
    ギャラリーの画像を選択

選択が完了したら、画面右下のギャラリーを作成ボタンをクリックします。
ギャラリーを作成ボタン

ギャラリーを編集

ギャラリーを作成ボタンをクリックすると、画面がギャラリーの編集画面に自動的に切り変わります。

画面の右側に設定項目があります。
ギャラリーの設定

◆ カラム

サムネイルグリッドを選択した場合の、画像の列数を設定します。例えば2列にしたい場合はこの項目の▼をクリックして、一覧から2をクリックして選択します。
カラムの選択

◆ ランダム

☐にチェックを入れると、画像が選択した順番ではなく、ランダムに表示されます。

◆ サイズ

画像のサイズを選択します。

サムネイルでないサイズにしたい場合はこの項目の▼をクリックして、一覧から他のサイズを選択します。
サムネイルサイズの選択

◆ 種類

ギャラリーの種類を選択します。他の項目と同様に、▼をクリックして、一覧から選択します。
ギャラリーの種類を選択

いくつかの種類のキャプチャをしてみましたので参考にして下さい。

◇正方形タイル
正方形タイルギャラリー

◇丸型
丸型のギャラリー

◇Tiled Columns
Tiled Clumns

好みの種類を選択したら、編集画面右下にある、ギャラリーを挿入のボタンをクリックします。
ギャラリーを挿入

投稿にギャラリーが挿入されます。

ギャラリーの挿入

投稿画面では出来上がりが確認できませんので、プレビュー画面で確認してみましょう。

プレビュー画面
プレビューでギャラリーを確認

画像ギャラリーの挿入後の編集

一度作成したギャラリーを編集するのも簡単です。

投稿画面でギャラリーをクリックし、表示される吹き出し編集吹き出しの編集ボタン編集ボタンをクリックすると、ギャラリー編集画面が開き、編集することができます。

ギャラリーの編集

編集例としてキャプションを入れてみます。
ギャラリー画像にキャプションを入れる

ギャラリーを更新ボタンをクリックします。
ギャラリーを更新 ボタン

プレビューで確認すると、マウスを画像にポイントした状態になると、キャプションが画像下からふわっと現れるのが確認できます。
キャプション表示例

カルーセル:スライドショーの表示確認

プレビューでギャラリー自体をクリックしてみましょう。
ギャラリーが全画面スライドショーの状態に変わります。
カルーセル:スライドショーの表示

左右の 〈 〉 をクリックすると画像が切り替わり、何もない所をクリックすれば、プレビュー画面に戻ります。

スマホ表示も確認

スマートフォン表示のテスト(対象:iPhone5)ではこんな感じで表示されました!

スマホ縦置き・画像ギャラリー
スマホ縦置き・画像ギャラリー

スマホ横置き・画像ギャラリーのスライドショー表示
スマホ横置き・画像ギャラリーのスライドショー表示

ちょっとしたアルバムとしてはもちろん、イベントやセミナーの報告ブログ記事や、手作り作品の商品説明ページ、イラストや撮影写真の披露など、色々な目的で活用&エンジョイできそうですね(^^)

今回テストで作成したギャラリーの実物がこちらです。

どのように動くのかを確認してみて下さい(^^)

ではでは、今日はこの辺で。

「WordPressギャラリーを簡単に見映え良く!Jetpackタイルギャラリー」の巻でした♪

お役に立ったら、シェアなどしていただけるとハッピーです♪

Published:2015/10/27

Written by

コメントを残す