ギャラリープラグイン「GT3」でスクエアギャラリーを作成
ギャラリープラグインは数多くありますが、それぞれに特徴があります。以前紹介したModulaは、ランダム形状でギャラリーを作るのが得意でしたが、同じ形状のギャラリーを作成するのが不得意でした。
今回はレスポンシブレイアウト対応のギャラリープラグイン「GT3」でスクエア（正方形）ギャラリーを作成しました。
出典 : Photo Gallery-GT3
トップのスライダーはSmart Slider3で作成し、タイトルを固定で表示しています。スライドを追加＞静的オーバーレイを作成し、イラストとタイトルを中央に入れました。
スライドを追加＞静的オーバーレイをクリック
画像を入れ、タイトルを入力
メインは、画像の上に「33:66」のカラムを入れ、ブロックごとに左右交互にしました。
カバーの上に33:66のカラム
商品詳細は、以前紹介したPopup Makerを使用しました。
では本題です。まずGT3をダウンロード有効します。デフォルトの設定画面が表示されるので以下のように設定します。終了後「Save Settings」をクリックします。
デフォルト設定画面
| 項目 | 設定値 |
|---|---|
| Gallery Type | Grid |
| Grid Type | Square |
| Link Image To | Light Box |
| Show Image Title | off |
| Show Caption Text | off |
| Image Size | Thumbnail(768px) |
| Columns | 3 |
| Margin, px | 20 |
| Corners Type | Standard |
| Image Border | off |
左のサイドメニューにGT3 Galleries＞Add Newをクリックします。タイトルを入力し、下の「GT3 Gallery Custom Post Type」をクリックします。左サイドバーのブロック＞Gallery Imagesの「Add Media」をクリックします。
GT3 Galleries＞Add Newをクリック
タイトルを入力し、右サイドバーの「Add Media」をクリック
メディアライブラリーが開くので、ギャラリーに載せる画像を選択します。右サイドバーのサムネイルから、表示したい順番に並びかえます。
ギャラリーに入れる画像を選択
画像を並びかえ
上の「公開」をクリックし、ブロック＞Shortcodeのショートコードをコピーします。あとは、ギャラリーを表示したい場所にショートコードブロックを設置し、ショートコードをペーストすれば完成です。
公開し、ショートコードをコピー
ショートコードブロックにペーストして完成
画像をスクエアに切り取ると見た目がよくなりますね。他にも、画像の比率を3:4や16:9に変更できます。モダールウィンドウのデザインも綺麗なので、色々使えるギャラリーだと思います。
Webサイト作成のご依頼は、コンタクトフォームよりよろしくお願いします。
