注目度の高い記事
Wordpressで画像を横並びにしてギャラリーを簡単に作る方法【メニューパネルも作成可能】
この記事では、ワードプレスで画像ギャラリーやメニューパネル等を作る方法を解説しています。

わかば
私のブログに画像ギャラリーを設置したいんだけど、なんかいい方法ないかなぁー

山本
画像ギャラリーなら、ワードプレスの標準機能で簡単に作れるよ

わかば
えっ!そうなんですか!?

 

プラグインなどを一切使うことなく、ワードプレスの標準機能だけで

こんな感じの画像ギャラリーを、記事に設置する方法を解説します。

山本
画像をクリックすると、ポップアップして拡大されます!

1.Wordpressで画像横並びギャラリーを簡単に作る方法

画像ギャラリーは、投稿画面のメディアを追加から作成できます。

投稿画面のギャラリーを設置したい場所で、メディアを追加 をクリックしましょう。

Wordpressで画像横並びギャラリーを簡単に作る方法

 

次に画面左側メニューの、ギャラリーを作成 をクリックします。

Wordpressで画像横並びギャラリーを簡単に作る方法

 

ギャラリーに表示させたい画像をすべて選択したら、右下の ギャラリーを作成 ボタンをクリックします。

Wordpressで画像横並びギャラリーを簡単に作る方法

 

ギャラリーを編集画面の右側にあるギャラリーの設定で、以下の3つの項目を設定しましょう。

Wordpressで画像横並びギャラリーを簡単に作る方法

 

その1:画像をクリックした時に拡大表示させるなら、リンク先に メディアファイル を選択します。
Wordpressで画像横並びギャラリーを簡単に作る方法

 

その2:カラム数はなんと9カラムまで(多い!)設定することが出来ますが、現実的には5カラムくらいまでが良いでしょう(笑)

Wordpressで画像横並びギャラリーを簡単に作る方法

 

その3:ギャラリーの画像の表示サイズです。上のサンプルのように、タイル型に表示させるなら サムネイル を選択します。

Wordpressで画像横並びギャラリーを簡単に作る方法

 

設定が終わったら、右下の ギャラリーを挿入 をクリックしましょう。

Wordpressで画像横並びギャラリーを簡単に作る方法

 

これで投稿記事内に、画像ギャラリーが設置されました。

Wordpressで画像横並びギャラリーを簡単に作る方法

わかば
そうそう、こういう風にしたかったんですよ!

 

2.画像ギャラリーを使用してプロっぽいメニューパネルを設置!

このギャラリー機能を使って、こんな感じのプロっぽいメニューパネルを設置することも出来ます。

 

この時の設定はこのようにしてます。

画像ギャラリーを使用してプロっぽいメニューパネルを設置!

 

この使い方をする時は、フルサイズに設定しないとこのように端が切れて表示されてしまうので、事前に画像サイズを調整しておく必要があります。

 

あと、個々の画像にリンクを設置出来ないので、メニューボタンのように使うことは出来ません。

山本
メニューボタンのように使うにはプラグインを使う必要があるので、次のページで解説します

 

3.Easy FancyBox もあわせて使うとさらに良くなる

画像のリンク先をメディアファイルに設定すると、クリックした時に画像が大きく表示されるのですが、この状態から元の画面にもどるには、ブラウザバックをするしかなくなります。

Easy FancyBox もあわせて使うとさらに良くなる

 

Easy FancyBox プラグインを使うことで、このように画像がポップアップ表示されるので、見た目もよい上に使いやすく、ユーザビリティーも格段に上がります。

Easy FancyBox もあわせて使うとさらに良くなる

 

Easy FancyBox の使い方については、以下の記事で解説しているので参考にしてください。

参考ページ画像をポップアップ表示してくれるプラグインEasy FancyBoxの設定方法

 

4.THE THOR だとなぜか上手く表示されない問題

わー研。で今使ってる Diver というテーマでは、上手く表示されるのですが、

どういうわけか、THE THOR(ザ・トール)だと、周りにグレーの囲みが表示されてしまいます。

THE THOR だとなぜか上手く表示されない

わかば
たしかに薄っすらとグレーで囲われているし、画像の上下もくっついちゃってますね・・・

山本
この表示だとなんか気持ち悪いよね

 

ということで、このグレーの枠を消す方法を色々と調べてみました。

 

function.php をいじって、CSS でカスタマイズしてみたりもしたんですが

何をどうやっても、このグレーの枠を消す事ができない...

 

きっと THOR のプログラムと干渉してしまってるんだろうけど

対策方法がわからない以上はどうしようもない!

 

このまま見なかったことにするしかないのか・・・

と諦めかけたその時!!!

 

とうとう、この目障りな枠を消す方法を発見してしまいました!

 

それは、あるプラグインを使う方法なんですが、

ここに書くと長くなってしまうので、別記事で解説しました。

参考ページTHE THORで画像ギャラリーのデザインが崩れる問題の対処法【グレーの枠削除】

 

さいごに

WordPress 標準の、ギャラリー機能を使って

タイル状の画像ギャラリーを設置したり、メニューパネルを作る方法を解説しました。

 

それぞれにリンク(カスタムURL)を設定出来ないのは少し不便ですが、

メディアリンク(画像を拡大表示)は設置可能なので、

画像ギャラリーとして使う分には、十分な機能を備えていると言えます。

 

この記事のまとめです。

  • WordPress の標準機能で画像ギャラリーを簡単に作成できる
  • ギャラリーを応用してメニューパネルを設置することも可能
  • Easy FancyBox を使うとさらにユーザビリティーが向上
  • THE THOR で上手く表示されない現象は次の記事で解決

 

わかば
これって画像ギャラリーだけじゃなくて、普通に2つの画像を横並びさせたいときとかにも使えますよね!

山本
HTML とか CSS とかを使わなくても、簡単に設置できるのがいいよね

 

注目の記事WordPressブログの画像の入れ方と効果的な使い方【実はかなり重要です】

注目の記事画像加工用ソフトの決定版「PhotoScape」の使い方【無料で使えます】

 

ゼロから始める!ワードプレスブログ スタートマニュアル
ワードプレスブログスタートマニュアル

ブログには興味があるけど、ワードプレスってなんか難しそうだなぁなんて思ってませんか?

わー研。では、そんなあなたのために、手順通り進めるだけでワードプレスブログが開設できるマニュアル(特設ページ)をご用意しました!

もちろん無料で利用が可能ですので、はじめての方はぜひご活用ください!

Twitterでフォローしよう

おすすめの記事