![](https://cxg-design.jp/wp-content/uploads/2023/12/AdobeStock_406127576-2.jpeg)
ギャラリープラグイン「GT3」でスクエアギャラリーを作成
ギャラリープラグインは数多くありますが、それぞれに特徴があります。以前紹介したModulaは、ランダム形状でギャラリーを作るのが得意でしたが、同じ形状のギャラリーを作成するのが不得意でした。
今回はレスポンシブレイアウト対応のギャラリープラグイン「GT3」でスクエア(正方形)ギャラリーを作成しました。
![](https://cxg-design.jp/wp-content/uploads/2023/12/dab0d1c323f53edac3e84c6908c3b582.png)
出典 : Photo Gallery-GT3
クリックすると、モダールウィンドウで大きな画像を見ることができます。今回のDEMOはチョコレートのLPです。
トップのスライダーはSmart Slider3で作成し、タイトルを固定で表示しています。スライドを追加>静的オーバーレイを作成し、イラストとタイトルを中央に入れました。
![](https://cxg-design.jp/wp-content/uploads/2023/12/3a020b17dc7003436a819ea1f2468ff8.png)
スライドを追加>静的オーバーレイをクリック
![](https://cxg-design.jp/wp-content/uploads/2023/12/28fcce99665aecb233c2fd40e2f1de3c.png)
画像を入れ、タイトルを入力
メインは、画像の上に「33:66」のカラムを入れ、ブロックごとに左右交互にしました。
![](https://cxg-design.jp/wp-content/uploads/2023/12/d99d1c235ffe5691bd2bfdad8bf9ac4e.png)
カバーの上に33:66のカラム
商品詳細は、以前紹介したPopup Makerを使用しました。
では本題です。まずGT3をダウンロード有効します。デフォルトの設定画面が表示されるので以下のように設定します。終了後「Save Settings」をクリックします。
![](https://cxg-design.jp/wp-content/uploads/2023/12/8057aa2276a9b41fbdf606d21ae5ab46.png)
デフォルト設定画面
項目 | 設定値 |
---|---|
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」をクリックします。
![](https://cxg-design.jp/wp-content/uploads/2023/12/53799cad6c1b96abcff3d3c5de6c38ad.png)
GT3 Galleries>Add Newをクリック
![](https://cxg-design.jp/wp-content/uploads/2023/12/3e44f1fc256470d0a449ad482f215962.png)
タイトルを入力し、右サイドバーの「Add Media」をクリック
メディアライブラリーが開くので、ギャラリーに載せる画像を選択します。右サイドバーのサムネイルから、表示したい順番に並びかえます。
![](https://cxg-design.jp/wp-content/uploads/2023/12/5ac4efb1c09c651fb456c64f35c4752e.png)
ギャラリーに入れる画像を選択
![](https://cxg-design.jp/wp-content/uploads/2023/12/965532f53295ae2808cf8451c265e76e.png)
画像を並びかえ
上の「公開」をクリックし、ブロック>Shortcodeのショートコードをコピーします。あとは、ギャラリーを表示したい場所にショートコードブロックを設置し、ショートコードをペーストすれば完成です。
![](https://cxg-design.jp/wp-content/uploads/2023/12/895ce6a96faf15537ec0caca859cc2a0.png)
公開し、ショートコードをコピー
![](https://cxg-design.jp/wp-content/uploads/2023/12/9eb3dad9ee9262d08bdd167e1b350df5.png)
ショートコードブロックにペーストして完成
画像をスクエアに切り取ると見た目がよくなりますね。他にも、画像の比率を3:4や16:9に変更できます。モダールウィンドウのデザインも綺麗なので、色々使えるギャラリーだと思います。
Webサイト作成のご依頼は、コンタクトフォームよりよろしくお願いします。