【WP】標準ギャラリーをスライド式にするプラグイン『WordPress Canvas Gallery』

wordpress-canvas-gallery

『WordPress Canvas Gallery』は、WordPressの標準ギャラリーをスライド式のギャラリーに対応させることができるプラグインです。

『WordPress Canvas Gallery』ダウンロード

プラグインは「wordpress.org」のプラグインページやWordPressの管理画面の検索からプラグインからダウンロードすることができます。

『WordPress Canvas Gallery』インストール

『WordPress Canvas Gallery』プラグインをダウンロードして、プラグインをインストール後、有効化します。有効化後も設定やメニューに変化はみられないので、正しく動作しているのか少し不安になりました。

実際に機能するのは、ギャラリーの作成(編集)時なので心配はありませんでした。

WordPress-Canvas-Gallery-Admin

ギャラリーの作成(編集)時に新しくオプションが追加されます。

オプションの内容は以下の内容です。

設定名 補足説明
Display 画像の表示形式を選択することが出来ます。形式は4種類あります。
・Masonry // フリーのフラグインバージョンでは非対応のようです。
・Slider (Fade)
・Slider (Slide)
・Carousel
・Float //通常のギャラリー表示になります。
Image Size 表示される画像サイズを指定します。/td>
Popup Size 画像のクリック後の画像サイズを指定します。
Captions キャプションを指定したときの表示方法を指定します。
Caption Type キャプションを表示するときのタグを指定します。
Custom Link チェックをいれると画像のリンク先がページのパーマリンク先になりました。
Bottom Space ボタンのスペースサイズを指定します。
Hide Controls コントロールの表示/非表示
Class オリジナルのクラス名を設定できます。

ギャラリーの表示イメージ「Slider (Fade)」、「Slider (Slide)」

オプションで形式を「Slider (Fade)」、「Slider (Slide)」にしたときの表示イメージです。
画像をマウスオーバーすると画像の左右に矢印が表示され画像を切り替えることができます。

「Slider (Fade)」の場合は、画像が切り替わるときにフェード、「Slider (Slide)」の場合は画像が切り替わるときにスライドになります。

WordPress-Canvas-Gallery-Slider-Fade

ギャラリーの表示イメージ「Carousel」

「Carousel」の場合は、横幅270pxで画像が並び表示されます。

WordPress-Canvas-Gallery-Slider-Carousel

関連記事

生成AIでHTML/CSS構築するなら「先に設計→後でAI」が安全な理由

ここまでの記事で、 AIが書いたHTMLが読みにくくなる理由や、 AI生成CSSが後から直しづらくなる構造、 Bootstrap・Flexbox・CSS Gridが混ざったときの違和感について整理してきました。 それらを振り返ってみると、 実は多くの...続きを読む

2026.01.09AI活用BootstrapCSS生成AI

Bootstrap5実装環境でmt-5を足しても余白が変わらない原因

Bootstrap 5 の実装環境でmt-5を足したのに、「あれ? 余白、変わってない?」と首をかしげたことはありませんか? 講座やレビューの場でも、この違和感は本当によく出てきます。コードは正しそうに見えるし、Bootstrapのクラス指定も間違っていない。それでも、...続きを読む

2026.01.22BootstrapCSSHTMLコーディング

デザイナーのための「美しさの論理」入門 〜美術史から“センス”を武器に変える〜

1. センスの正体に、私自身が迷ったときの話 正直に言うと、私はこれまで「センスって、鍛えられるものなんだろうか?」と何度も悩んできました。デザインのバランスがうまく取れず、「なんか惜しいね」と言われることが続いたときの、あのもやもや感……。 配色、構図、余白。なんと...続きを読む

2025.07.19デザイン論

【CSS】スタイルシートだけで縦方向と横方向でセンタリングする方法

WEBデザインで画像やレイアウトした要素を中央に揃えるレイアウトを作ることがよくあります。実際にHTMLにコーディングをするときに、横位置をセンターにする場合や、縦位置をセンターにする場合などCSSだけで実現する方法をまとめてみました。 { margin: 0 auto...続きを読む

2015.02.07CSSHTMLコーディング

新年あけましておめでとうございます。

あけましておめでとうございます。 昨年は格別 の御厚情を賜り、厚く御礼を申し上げます。 本年もデザインスタジオ・エフでは、皆様にご満足頂けるサービスを心がけていく所存でございますので、何とぞ昨年同様のご愛顧を賜わりますよう、お願い申し上げます。皆様のご健勝と皆様の益々のご...続きを読む

2022.01.01