wordpressで画像のギャラリーページを作成しよう!

wordpress-gallery

wordpressでは、ギャラリー機能を使ってギャラリーページを制作する事ができる。その方法を解説する。

ギャラリーページを作成する

固定ページや投稿ページの記事の編集画面で、ギャラリーを設置したい箇所で”メディアを追加“のボタンをクリックしよう。

  1. メディアの挿入“の画面が開くので、画面左の”ギャラリーを作成“のボタンをクリックする。
  2. ギャラリーを作成“の画面が開くので、ギャラリーに追加したい画像を複数選択しよう。この際、画像情報を入力しておくとギャラリーページにその画像情報が表示される。例えば、キャプションに入力した文字は、ギャラリー画像の下に表示されるし、代替テキストに入力した文字は”ライトボックス機能※1″でポップアップした時に表示される。作業が完了したら”ギャラリーを作成“のボタンを押そう。
  3. ギャラリーを編集“の画面が開く。この画面で画像の配置位置を調整できる。マウスのドラッグ&ドロップで画像の配置位置を入れ替える事ができる。右に”ギャラリーの設定“という項目がある。”リンク先“を”メディアファイル“にしよう。これで画像がクリックされると、その画像が大きく表示されるようになる。”リンク先“を”なし“にして、効果を設定しない事も可能だ。”カラム“は横に何枚の画像を配置するかの設定だ。記事の横幅と相談して決めよう。作成が終了したら”ギャラリーを挿入“のボタンを押そう。

これでギャラリーが追加される。

※ライトボックス機能:画像がクリックされた時に画像をポップアップして大きく表示する機能

ライトボックス機能

ギャラリーの画像をクリックした時に画像を大きくポップアップさせたい場合は”Easy FancyBox”というプラグインを導入しよう。ただしテーマによっては、元々、ライトボックス機能が備わっているテーマもある(例:customizr)。その場合はプラグインを導入しなくても大丈夫だ。

センスよくギャラリー画像を表示する

アーティストページなどで、ギャラリーの画像が丸くセンスよく表示されていたりするのを見かけた事があると思う。ギャラリーの画像を丸く表示するためにはstyle.cssを使用する。style.cssの下部にこのコードを追加しよう。

/* 円形画像 */
.gallery-item img {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
-moz-transition: -moz-transform 3s ease;
-webkit-transition: -webkit-transform 3s ease;
-o-transition: -o-transform 3s ease;
transition: transform 3s ease;
border-radius: 300px;
-webkit-border-radius: 300px;
-moz-border-radius: 300px;
}

これでギャラリーの画像が丸くセンスよく表示されるようになった。