Luxeritas カスタマイズ(外観)22項目 画像ギャラリー

WordPressのカスタマイズと言うとカラムを上下左右動かしたり、背景色や文字色など見た目を変更するデザイン変更が主ですけど、「Luxeritas カスタマイズ(外観) 」では、画像の見せ方や動きを付ける変更を伴うものも含まれています。それが画像ギャラリーです。

ギャラリーと言うと複数の画が並んでいる意味が感じられて横に画像がスクロールできて任意の画像が選べたり、自動で画像が次々に流れて見られるのを想像しますが、Luxeritas カスタマイズ(外観)の「画像ギャラリー」はクリックして画像がポップアップして見られるようになる機能を意味します。通常はプラグインでそうした機能を後付けしますけどLuxeritasはすでに装備されてプラグイン選別に時間を浪費しなくて済むので助かります。新たなプラグイン導入はそれだけ表示スピードにも悪影響与えることが多いですし助かります。

私はこの機能の事を知らないですでに何日も画像ポップアップさせるためにプラグインを探して導入したりもした過去もありますけどね。その時はWordPressのプラグインはいろんな名称がついていて検索して導入してみていろいろ試さないとならないので苦労します。その時の経験ではプラグインの世界では画像をポップアップさせる機能については「lightbox」と言うのが一般的なようです。もちろん「popup」という言葉を使用しているプラグインもあります。多くのlightbox系プラグインではyoutubeなど動画についてもポップアップさせられる機能がついていますが、Luxeritasの画像ギャラリーには動画再生表示機能はありません。ですから動画再生ポップアップ機能にはプラグインが必要です。

Luxeritasカスタマイズ外観画像ギャラリー

スポンサーリンク

カスタマズ(外観)→「全体レイアウト」を表示させる

ダッシュボードから「カスタマズ(外観)」メニューへアクセスします。
ダッシュボードのカスタマイズ(外観)をクリックする画像
ダッシュボードの左側にLuxeritasテーマの場合、専用の「Luxeritas」メニューが表示されます。
マウスでその中にある「カスタマズ(外観)」をクリックします。


luxeritasカスタマイズ画像ギャラリーをクリック画像
メニューから「画像ギャラリー」をクリックします。

Luxeritas カスタマイズ(外観) 画像ギャラリー

画像ギャラリーの種類

Tosrus

LuxeritasTosrus画像ギャラリーを選択している画像
注釈に「レスポンシブ / 最もおすすめ」とあるので迷ったらこれにしておくのが無難です。

Open Live Writerで1080x608pxサイズの画像選択
Tosrusを選択して公開ボタンを押した状態でOpen Live Writerで1080x608pxサイズのgazou1.jpg画像をアップロードします。
いつもはギャラリー効果を見るためにサイズ設定smallの240x135pxサイズでアップロードします。

 
Luxeritasテーマで240x135pxサイズ画像をアップロードした様子
240x135pxサイズで表示されています。

Luxeritas画像ギャラリー設定された画像にマウスオンした時の画像
Tosrusが有効になっている状態でアップロードされているのでマウスをその画像の上に持ってくると、カーソルが+マーク表示なります。
ちなみにgazou1と出ているのはこの画像の名前です。画像の上にマウスが乗った状態でクリックします。

Tosrusで画像ギャラリー表示させた時の画像

表示が割とシンプルです。

幅1080x高さ608pxの動画をアップして「ギャラリーを作成」からアップロードした画像はTosrusを選択することでポップアップ表示できます。
ポップアップさせた時の最大値は幅1080x高さ608px画像で1024×576と近い大きさまでブラウザを全画面まで広げると表示されました。
右上の画像ギャラリーを止めるボタンが表示されますが画像の周囲の灰色になっているどこをクリックしても、画像ギャラリーのポップアップ表示を止められます。

240x135pxサイズに表示させてクリックでアップロードした画像サイズ近い1024×576サイズまで拡大表示ができたわけですが、240x135pxサイズの画像を画像ギャラリー表示させるとどうなるのかも見てみました。
240x135pxサイズポップアップさせた画像
240x135pxサイズの画像をポップアップさせてみました。これはクリック元も240x135pxサイズなので同じサイズがポップアップされただけでした。

Tosrus左右ハンドルと下のボタンをマークした画像
ただし、複数のギャラリー設定画像があると表示が少し変わります。同じ画像でサイズ違いですが「1080x608pxサイズ」でアップロードされた画像と「240x135pxサイズ」でアップロードされた画像と複数の画像ギャラリー設定された画像をどちらか一つポップアップ表示させると左右にハンドルがついて下にもボタンが付与されます。ここでページの画像をギャラリー化、つまりハンドルや下のボタンで「1080x608pxサイズ」と「240x135pxサイズ」を交互に表示させられます。さらにギャラリー設定した画像を増やしてくるくると画像表示を変える数も増やすことができます。

WordPress標準の画像投稿

WordPressには単に画像、音声、動画を貼るだけではなくて、標準でギャラリー機能を持たせて表示することもできるようです。Luxeritasの画像ギャラリーもこの記事を書くまで知りませんでしたが、WordPressのこのメディア表示も知りませんでした。ここでWordPress標準でどこまで出来るのか確認しておきます。ご存じの方は飛ばしてください。

まずは比較のため、通常の「ギャラリーを作成」を選択せずに投稿した場合です。

Wordpressダッシュボードでメディアを追加ボタンをクリックする画像

ダッシュボードの投稿ページから「メディアを追加」ボタンをクリックします。

「メディアを追加」ページの左側メニューを赤く囲った画像

いつもは私は「Open Live Writer」で投稿や編集しているのでわかりませんでしたが、「メディアを追加」の下に「ギャラリーを作成」とあります。ここでは「ギャラリーを作成」を選択しません。

メディアを追加ページから写真画像を投稿に挿入する

通常の画像をまず比較のために貼ります。左側のメニューは「メディアを追加」のままメディアライブラリから画像選択して、右側の添付ファイルの表示設定でサイズ300×169を選択して「投稿に挿入」ボタンをクリックします。

メディアを追加から画像をアップしてマウスでクリックしている画像

メディアライブラリには1080x608pxでアップロードした画像を、「メディアを追加」から300×169を選択し投稿した画像表示です。画像をクリックしても何も起きません。

WordPress標準のギャラリーを作成から画像を投稿

Wordpressダッシュボードでメディアを追加ボタンをクリックする画像

まずはメディアを追加をクリックします。

ギャラリーを作成をクリックしている画像

左側のメニューから「ギャラリーを作成」をクリックします。

ギャラリーを作成で画像をアップする途中の画像

アップロードする画像を選択します。通常のアップロードでは画像サイズを選択できましたが「ギャラリーを作成」からアップロードする場合はサイズ指定はありません。このまま「ギャラリーを作成」ボタンをクリックします。

ギャラリーを挿入ページの画像

表示などバリエーションが用意されていますがデフォルトのリンク先「添付ファイルのページ」、サイズ「サムネイル」のまま「ギャラリーを挿入」をクリックします。

ギャラリーを作成とメディアを追加から通常にアップした画像
通常の「メディア追加」サイズ300×169を指定して、その上の「ギャラリーを作成」から画像をアップしたのはサイズを「サムネイル」としたので小さく表示されています。

ギャラリーを作成からアップした画像をクリックしている画像

さてWordPress標準のギャラリー機能を見てみます。「メディアを追加」だけですと画像をクリックしても何も変わりませんでしたが、「ギャラリーを作成」からアップした画像をクリックすると表示がかわります。まず、画像をクリックしてみます。

添付ファイルのページの画像をクリックしている画像

リンク先「添付ファイルのページ」の設定があるのでまず、1080x608pxのサイズ表示される前に一度小さめの表示の画像だけ添付されたページが表示されます。「添付ファイルのページ」を設定した場合はここでクリックします。

ここでアップロードしたサイズの1080x608px画像が表示されます。ギャラリー表示では元の画像を表示させることも可能となります。

1080x608ピクセルの画像を開いたところ

「ギャラリーを作成」で画像表示させてリンク先「添付ファイルのページ」、「メディアファイル」のどちらかの設定にすればアップロードした画像サイズ、上の画像なら1080×608ピクセルですけど、クリックでリンク可能となります。