こんにちは。イラストレーターの田口ヒロミです。
私は当ブログ以外に、イラストギャラリーをメインにしたサイトを運営しています。
ワードプレス初心者の私も、記事制作に限ってはだんだん慣れてきましたが、ほんとに最初の作り込みがすごく大変でした…！
サイトのデザインが美しくないと、どうにもこうにもやる気がでないじゃないですか😵！
とくにギャラリーサイトでは、イラストをどう美しくレイアウトするかってとても重要です。
今回は私がギャラリーサイトで実際に使っている、簡単に美しくギャラリーを作ることができるプラグインをご紹介します♪
簡単にイラストギャラリーが作れるプラグインFooGallery
まずは私の運営しているギャラリーサイトはこちらです。
フロントページにFooGalleryでイラストギャラリーをメインにサイト構築しています。
ちなみに使っているセッティングは「Masonry Image」です。
イラストブロックにカーソルを合わせると、動きが出るところが気に入っています☺️
（上記は参考画像なので動きません🙇♀️ギャラリーサイトで動きを確認してみてください！）
イラストブロックをクリックすると拡大画像を表示してくれます。
直感的に使えるFooGalleryはこちらからダウンロード
できるだけ見やすく、美しいデザイン。そして簡単に作れるプラグインを色々と探してみたところ、「FooGallery」というプラグインがオススメとのことで、インストールしてみたところ、私みたいな初心者でも直感的に使えました！
インストールから設定までは、下記のサイトを参考にさせていただきました☺️
丁寧で初心者にもわかりやすいです♪
FooGalleryを選んだポイント！
数あるプラグインからワードプレス初心者の私がFooGalleryを選んだポイントは…
無料でおしゃれなギャラリーを作成できる
ワードプレスには標準でギャラリー機能がありますが、フロントページで使うにはデザイン性がイマイチ。。
FooGalleryはこれぞギャラリー！というデザイン性を兼ね備えています。しかも無料！
PC・モバイル、ともに表示対応している
パソコンから見る人もいれば、スマホから見る人がいるなか、とくに何も設定することなく両方いい感じに表示してくれます☺️
直感的で簡単にデザインが作成できる
最初はとっつきにくいかもしれませんが、プレビューが簡単に見れるので直感的におしゃれなデザインを作り上げることができます。
初心者さんはイメージはあるけど、結局何がしたいのかやってみなけりゃ分からない！ってのが結構あると思います。
FooGalleryはたくさんデザインの種類があるので、色々試してみることができますよ。
きっとお気に入りのデザインが見つかるのではないかと思います！
モバイルのサムネイルの画像がぼやける！？
さて、いざお気に入りのデザインセッティングが出来た！と思ったら、なぜだかモバイルでのサムネイルがぼやけていました。
最初はあまり気にしていなかったのですが、アイキャッチ画像と比べると明らかに「ぼやっ」としているので、イライラしてきました。これはあかん！
FooGalleryのギャラリーセッティングを変えて見ると、なんとかきれいに見える設定があったりもしました。。
しかし、私はこの設定を使いたいのよ！！
とかなんとかで💦かなり苦戦していたところ、サムネイルの再生成をしてくれるプラグイン「Regenerate Thumbnails」で画像を再生成してみたところ、何とかクリアになりました。
結局のところ、なんでギャラリー画像がぼやけたのか理由はわかりませんが、ダメ元で再生成してみると成功したので、もしお困りの方は試してみてください！
（私の場合は他の方法では全く無反応でした💧）
アイキャッチ画像がぼやける方もぜひ！
↓下記↓のサイトもすごく参考になります♪
パソコンのサムネイル画像がぼやける！？（追記）
追記です！
最近「foogallery」を使ってギャラリーサイトのワークリストを再編集していたんですが、どうもパソコンで見るとサムネイルがぼやけてしまって、またまた苦戦しました…！！！
（モバイルではぼやけていない）
う〜ん、もう一度「Regenerate Thumbnails」を使ってサムネイルの再生成を試してみようか。。。
と試みたんですが、改善されず。。。
設定をレティナディスプレイに対応させればいいの？…などなどいじってみたんですが、やっぱり改善なし。
今一度サムネイルの設定を見直してみました。
すると、、、灯台下暗しとはコレですね。
foogalleryのセッティングでサムネイルサイズをめちゃくちゃ小さくしていたようです。
300にしていました😅
これを思い切って600まで上げると、スッキリクリアーに！！！
なんだ、これだったんだ〜。。。と拍子抜けでした。
このサイズはレイアウトのカラム数によって調整するとよさそうです。
もしパソコンの大きな画面でサムネイルがぼやけるなら、設定が間違っていることが原因かもしれません。
とっても初歩的なことですが、ビギナーさんは今一度チェックしてみてください！！
Cocoonテーマの人はLightBoxのインストールに要注意！
サムネイル画像を拡大表示してくれるライトボックス。
FooGalleryのプラグインをインストールすると同時に、「FooBox Image Lightbox」などのプラグインの追加を促されることがありますが、Cocoonをテーマに使っている人はインストール不要です！
Cocoonには標準でライトボックスが装備されています。
追加でライトボックスをインストールすると重複されて読み込まれてしまいます！
私の場合は、そうとは知らずにFooBox Image Lightboxをインストールしたところ、ライトボックスが重複して読み込まれ、閉じるボタンを示す「×じるし」が二重に表示されたり、画像の表示もなんだか二重になってる？感じで少々戸惑いました😅
Cocoon設定で、「画像」→「画像の拡大効果」の項目でlighitboxの使用を「なし」にするなどの設定ができるので、他のプラグインが使いたい場合はこちらで設定すればOKです。
FooGalleryはワードプレス初心者の私にも使えたので、他のプラグインと比べてもかなり使いやすいのではないかと思います♪
イラストや写真など、おしゃれなギャラリーをワードプレスで作ってみたい方はぜひお試しください！
