プラグインなどを一切使うことなく、ワードプレスの標準機能だけで
こんな感じの画像ギャラリーを、記事に設置する方法を解説します。
目次
１．Wordpressで画像横並びギャラリーを簡単に作る方法
画像ギャラリーは、投稿画面のメディアを追加から作成できます。
投稿画面のギャラリーを設置したい場所で、メディアを追加 をクリックしましょう。
次に画面左側メニューの、ギャラリーを作成 をクリックします。
ギャラリーに表示させたい画像をすべて選択したら、右下の ギャラリーを作成 ボタンをクリックします。
ギャラリーを編集画面の右側にあるギャラリーの設定で、以下の３つの項目を設定しましょう。
その１：画像をクリックした時に拡大表示させるなら、リンク先に メディアファイル を選択します。
その２：カラム数はなんと９カラムまで(多い！)設定することが出来ますが、現実的には５カラムくらいまでが良いでしょう(笑)
その３：ギャラリーの画像の表示サイズです。上のサンプルのように、タイル型に表示させるなら サムネイル を選択します。
設定が終わったら、右下の ギャラリーを挿入 をクリックしましょう。
これで投稿記事内に、画像ギャラリーが設置されました。
２．画像ギャラリーを使用してプロっぽいメニューパネルを設置！
このギャラリー機能を使って、こんな感じのプロっぽいメニューパネルを設置することも出来ます。
この時の設定はこのようにしてます。
この使い方をする時は、フルサイズに設定しないとこのように端が切れて表示されてしまうので、事前に画像サイズを調整しておく必要があります。
あと、個々の画像にリンクを設置出来ないので、メニューボタンのように使うことは出来ません。
３．Easy FancyBox もあわせて使うとさらに良くなる
画像のリンク先をメディアファイルに設定すると、クリックした時に画像が大きく表示されるのですが、この状態から元の画面にもどるには、ブラウザバックをするしかなくなります。
Easy FancyBox プラグインを使うことで、このように画像がポップアップ表示されるので、見た目もよい上に使いやすく、ユーザビリティーも格段に上がります。
Easy FancyBox の使い方については、以下の記事で解説しているので参考にしてください。
参考ページ画像をポップアップ表示してくれるプラグインEasy FancyBoxの設定方法
４．THE THOR だとなぜか上手く表示されない問題
わー研。で今使ってる Diver というテーマでは、上手く表示されるのですが、
どういうわけか、THE THOR（ザ・トール）だと、周りにグレーの囲みが表示されてしまいます。
ということで、このグレーの枠を消す方法を色々と調べてみました。
function.php をいじって、CSS でカスタマイズしてみたりもしたんですが
何をどうやっても、このグレーの枠を消す事ができない...
きっと THOR のプログラムと干渉してしまってるんだろうけど
対策方法がわからない以上はどうしようもない！
このまま見なかったことにするしかないのか・・・
と諦めかけたその時！！！
とうとう、この目障りな枠を消す方法を発見してしまいました！
それは、あるプラグインを使う方法なんですが、
ここに書くと長くなってしまうので、別記事で解説しました。
参考ページTHE THORで画像ギャラリーのデザインが崩れる問題の対処法【グレーの枠削除】
さいごに
WordPress 標準の、ギャラリー機能を使って
タイル状の画像ギャラリーを設置したり、メニューパネルを作る方法を解説しました。
それぞれにリンク（カスタムURL）を設定出来ないのは少し不便ですが、
メディアリンク（画像を拡大表示）は設置可能なので、
画像ギャラリーとして使う分には、十分な機能を備えていると言えます。
この記事のまとめです。
- WordPress の標準機能で画像ギャラリーを簡単に作成できる
- ギャラリーを応用してメニューパネルを設置することも可能
- Easy FancyBox を使うとさらにユーザビリティーが向上
- THE THOR で上手く表示されない現象は次の記事で解決
注目の記事WordPressブログの画像の入れ方と効果的な使い方【実はかなり重要です】
注目の記事画像加工用ソフトの決定版「PhotoScape」の使い方【無料で使えます】
