ワードプレス初心者向け情報サイト『webcode』WordPress初心者向けにwordpress(ワードプレス)に関するお役立ち情報が掲載されています。おすすめプラグインやおすすめ有料テーマ(テンプレート)、おすすめ無料テーマ(テンプレート)なども紹介しております。Goope初心者向けにグーペに関するお役立ち情報が掲載されています。リアルな口コミやメリット・デメリット、グーペの利用がおすすめな人や他のCMSとの比較情報などもご紹介しています。2018年5月20日webcode編集部FacebookTwitterはてブPocketFeedly「WordPressで複数の画像を一覧にしてページに掲載したい!」と思ったことはありませんか?関連する画像をまとめておくことで、画像を見やすくすることができます。そこで今回は、Wordpressで画像をまとめて表示できる「ギャラリー機能」についてや、カスタマイズ方法、おすすめのプラグインなどを紹介します。WordPressのギャラリー機能に関するまとめWordPressのギャラリー機能とは?まずは「ギャラリー」という言葉について理解を深めておきましょう。WordPressにおいて、「ギャラリー」とはメディアライブラリの機能の一つです。ギャラリーを使うことによって、複数の画像を一つの図のように一覧で表示することができます。(このギャラリー機能はVer2.5からスタートしました。)WordPressのギャラリー機能を使うと、一つ一つの画像に対して画像を説明するためのページが自動で作成されます。作成されたページにタイトルやキャプション、説明を入力できるので、ユーザーの興味を引きやすくなります。ギャラリー機能を実装するためのプラグインも多く用意されていますが、プラグインを使わなくても実装することができます。ギャラリーをカスタマイズする方法ギャラリーをカスタマイズする場合の方法を4つの場合に分けて紹介します。ギャラリーを編集する方法WordPressに用意されているギャラリー機能は投稿ページや固定ページに配置することができます。以下のような手順でギャラリーを編集することができます。ギャラリーを設置したい場所を決めるギャラリーを作成するギャラリーに載せたい画像を選択し、設定するギャラリーに載せる画像の設定やキャプションの設定などをするギャラリーを設置するためのショートコードを挿入するプラグインを使う場合やそうでない場合で若干手順が異なることはありますが、基本的には、この手順で作成することができます。ギャラリーを設置したい場所を決める投稿ページ、固定ページのどちらでも構いませんが、ギャラリーを設置したい場所を決めましょう。ギャラリーを設置したい場所にカーソルを置いて、「ビジュアル」画面にある「メディアを追加」というボタンをクリックしてください。ギャラリーを作成するこの通りに操作していくと、「ギャラリーを作成」というメニューボタンが左側に表示されます。このボタンをクリックしましょう。ギャラリーに載せたい写真を選択して設定する「ギャラリーを作成」というボタンをクリックすると、これまでにアップロードした画像が並んで表示されます。その画面でギャラリーに載せたい画像を選択しましょう。画像が選択できたら、「ギャラリーを挿入」というボタンをクリックしてください。ギャラリーに載せる画像の設定やキャプションの設定をするギャラリーには複数の画像を載せることになるはずです。後でスライド機能などを追加する場合に備えて、ギャラリーのタイトルや画像にキャプションなどを設定しておきましょう。これらの設定をしなくてもギャラリーを作成することはできるので、必要になったときに設定してもOKです。画像を表示する順番もここで一緒に設定しておきましょう。ギャラリーを設置するためのショートコードを挿入するここまで手順通りに行うと、ギャラリーを設置したい場所にショートコードが挿入されます。ショートコードが挿入されたら、ギャラリーの設置は完了です!念のため、正しくギャラリーが設置されているか確認してみましょう。ギャラリー写真にURLリンクを貼る方法ギャラリーの中に入っている画像には任意のリンクを貼ることができません。そのため、ギャラリーの中から任意の画像を探す必要があります。言ってもギャラリーから任意の画像をすぐに探したいということもあるでしょう。そんなときにこの方法を使ってみましょう。Links」というプラグインを使った方法を紹介します。(日本語化したい場合は、翻訳ファイルをアップロードする必要があります。)手順は以下のようになります。Links」をインストールし、有効化するまずは、左側のメニューから「プラグイン」→「新規追加」をクリックしましょう。Links」と入力し、プラグインのインストールと有効化をしましょう。ギャラリーを作成する「メディアを追加」をクリックして、ギャラリーを作成しましょう。ギャラリーを作るための詳しい方法は先ほどの「ギャラリーを編集する方法」を参考にしましょう。Links」の機能が追加されていると思います。URL」に任意のリンクを入力しましょう。Target」は、リンクを同じウィンドウで開くか新しいウィンドウで開くかを選ぶことができます。Effect」は、OnClickのイベント発生時にエフェクト効果を維持するかどうか指定することができます。Classes」は、カスタムCSSを追加できます。「strong」や「em」タグに適用されます。ギャラリーを挿入する(ショートコードを貼る)ギャラリーが挿入されたかどうか確認してみましょう。ギャラリー機能を使うためのプラグインギャラリー機能を使うためのプラグインが用意されています。それぞれの用途に合わせたプラグインを紹介します。ギャラリー機能のプラグインは、日本語に対応しているのが少ないので、英語対応のみのプラグインも含まれています。Plus」は、ギャラリー機能の高度なカスタマイズが可能になっているプラグインです。カスタマイズしやすくなっているので、あなた好みのギャラリーにすることが可能です。ギャラリーの内容や表示設定をカスタマイズすることができます。画像をスライドショーも構築することができます。Gallery」はポートフォリオやギャラリーを簡単に作成できるプラグインです。ギャラリーは、7種類の表示形式に対応しています。名前に「ポートフォリオ」とあるように、ポートフォリオを作成することも可能です。デザインを学んでいる方はポートフォリオを作成することが多いようです。そんなときにあなたの助けになってくれるでしょう。Lite」は無料で使用できるプラグインです。Gallery」という有料版のプラグインが用意されています。無料版では1つのギャラリーに掲載できる画像が12枚までという制限がありますが、有料版では、枚数制限はありません。1つのギャラリーに多くの画像を掲載したいと考えているのならば、有料版も視野に入れて考えてみるのも良いでしょう。無料版で作成したギャラリーは有料版に移行したときでも引き継げます。Extended」は、名前だけ見るとように思うかもしれませんが、無料で利用できるプラグインです。ショートコードを使って、メディアのギャラリー機能を拡張して3Dカルーセル表示やMasonry表示にすることができます。ギャラリー機能をつけたい場所にショートコードを貼り付けるだけなので、比較的簡単に使用することができます。WD」は、レスポンシブ対応していて、様々な表示方法の画像を追加したり、編集したりするためのツールやオプションが備わっているプラグインです。作成したギャラリーに説明文を加えることも可能です。そのため、ギャラリーを閲覧する際の手助けになります。「どこで撮影した写真なのか」といったように画像に説明文を加えたい場合にはおすすめです。Gallery」はレスポンシブ対応しているだけでなく、操作しやすいプラグインとしても有名です。細かな調整をすることが可能ですし、Lightbox機能も備わっています。(「Lightbox」については後ほど詳しく説明します。Lightbox」というプラグインと併せて使う必要があります。Jetpack」は、「Jetpack」というプラグインの簡易版です。簡易版とは言っても15個の機能がまとまって入っているので、非常に便利なプラグインです。このプラグインでは、スライドショーを作成したり、レスポンシブに対応させたり、タイル状に表示させるギャラリーを作ったりなど、あらゆることができます。このプラグインをインストールしておけば、プラグインをたくさん入れる必要もなくなります。Slider」は、標準的なギャラリーと同じ方法で設置できますし、登録された画像をスライダーで表示することができます。レスポンシブにも対応しているので、スマホやタブレット端末から閲覧してもレイアウトが崩れることはありません。Ver2.4.2からJetPackがなくても動作できるようになりました。Gallery」は、たくさんの画像を使ったギャラリーを作成する際に便利なプラグインです。画像をサムネイル形式で並べて一覧表示したり、スライドショー形式で表示したりできます。このプラグインは、見出しにも記載してありますが、日本語に対応しています。英語の説明だけでは心配だという方でも使いやすいプラグインになっています。その他にも、複数のギャラリーをまとめて管理できる「アルバム」という機能も用意されています。ギャラリー単位だけではなく、アルバム単位でも記事に表示することができます。Categories」は、記事中の画像をカテゴリ分けできるプラグインです。FTPなどを使って直接フォルダの変更をしてしまうと、投稿した記事に画像が表示されないといったトラブルが起こることがあります。投稿数が増えてしまうと、再び同じ画像を使いたいと思ったときにも探しにくくなってしまいます。そんなときに非常な便利なプラグインです。画像だけでなく、音声や動画もカテゴリ分けして整理することができます。Library」は、メディアライブラリにカテゴリを追加して画像などのファイルを整理し、見つけやすくしてくれるプラグインです。画像ファイル1つ1つに対して分類カテゴリを設定できるので、後から画像を探すときにもすぐに見つけられます。うまく使いこなせるようになると、非常に便利なプラグインなのでぜひ活用してみましょう。Assistant」は、画像専用のタグとカテゴリを使って画像を整理できるプラグインです。このプラグインには、日本語で使えるようになる翻訳ファイルが用意されています。翻訳ファイルをダウンロードして、プラグインの中の「languges」というフォルダ内にアップロードしましょう。アップロードするファイルは、「○○-ja.po」と「○○-ja.mo」という2つのファイルです。ギャラリー機能が付いたテーマプラグインをインストールしなくても、既にギャラリー機能が用意されているテーマがあります。ギャラリー機能が付いていて、写真プログに適しているテーマやおしゃれなテーマになっているテーマを3つ紹介します。Surfarama(サーファラーマ)「Surfarama」は、シンプルでクールなデザインになっている無料のWordPressテーマです。画像を強調することに向いている4カラムになっていてピンタレスト風の外観になっています。レスポンシブにも対応しているので、スマホやタブレット端末で表示してもレイアウトが崩れることはありません。シンプルでクールなデザインのテーマですが、WordPress公式サイトで配布されているテーマです。そのため、WordPressが公式に認めているので、セキュリティなどの心配もほぼありません。Electric「Electric」はシンプルなデザインですが、機能面が充実しているテーマです。記事に載せた画像をカテゴリ分けして、並べ替えて表示できます。多くの画像を載せることができるので、ポートフォリオサイトとしても使用することができます。Oyster「Oyster」は、フルスクリーンギャラリー機能が付いた有料のWordPressテーマです。画像が大きく表示されるので、印象に残りやすいでしょう。画像をスライドショー形式で表示することもできるので、画像をたくさん使うような場合に向いています。Lightboxとは?画面移動せずに画像が拡大する?Lightboxは、サイト上でサムネイル画像を拡大表示する際に利用される、JavaScriptとCSSで動作するアプリケーションです。実際にLightboxをWordPress上で使うと、画面を移動せずにクリックした画像が全面で拡大表示されるようになります。パソコン上では見やすく表示されますが、スマホなどではLightboxがあることによってサイト自体が使いにくくなってしまうことがあります。Lightboxを使う際には、スマホで確認しながら導入するようにしましょう。Lightbox系のプラグインLightbox系のプラグインを2つ紹介します。Lightbox系のプラグインを2つ以上入れてしまうと、お互いに影響しあってバグやエラーが生じることがあります。必要なプラグインを1つだけインストールして使うようにしましょう。Lightbox」は、大きな画像をアップロードしてもスクリーンサイズに自動でサイズ調整してくれる機能を備えたプラグインです。通常、サイト上に画像をアップロードする際には、もともとの画像を縮小して投稿することが多いでしょう。このプラグインを使うことによって、自動でサイズ調整してくれるので、画像のアップロードをするだけでOKなのです。スマホでも表示が崩れることはないので、安心して利用できるでしょう。Box」は、記事内にある画像やサムネイルをクリックしたときに拡大表示されるプラグインです。プラグインを有効化しただけでは拡大表示されません。Lightboxを有効にするためには、画像を挿入する際に設定する必要があります。画像のタイトル表示や動画を埋め込めるような設定もできます。あなたの用途に合わせてカスタマイズしてみましょう。Lightbox」を使って画像を見やすくする方法を紹介します。手順は以下のようになります。Lightbox」をインストールして有効化するまずはプラグインのインストールと有効化をしましょう。Lightbox」と入力してインストールを行いましょう。Lightbox」の設定をする画像のように設定しておきましょう。同じように設定しておかないと、Lightbox効果が適用されないことがありますので、注意しましょう。「添付ファイルの表示設定」の「リンク先」を「メディアファイル」に設定することも忘れずに行いましょう。この設定をしなければ、Lightboxが適用されません。WordPressのギャラリー機能に関するまとめいかがでしたか?今回は、WordPressのギャラリー機能について説明してきました。画像をたくさん載せるような記事を投稿する場合には今回の記事を参考にしてみると良いでしょう。最後まで読んでいただき、ありがとうございました。当...WebデザインIllustratorとPhotoshopの違いは?使い方を初心者向けに解説Webデザインに興味のある方であれば、「Illustrator」や「Photoshop」を一度は耳にしたことがあると思います。そこで今回は...Goope(グーペ)ペライチでSEO対策は可能?他サービスと比較した口コミペライチは、ホームページを簡単に作れるサービスです。実はそう思っている方も、結構多いのではないでしょうか...Webデザインwordpressも学べるwebデザインスクールのおすすめ3選(オンライン・東京編)wordpressを学べるwebデザインスクールのおすすめを厳選して紹介します。webcodezeroRANKINGShopify(ショピファイ)の評判は?カラーミーショップやリピートとの比較エックスサーバーの使い方をワードプレス初心者にわかりやすく画像で解説【経験談付き】ロリポップはライトプランで十分?ワードプレスを複数するならどのlolipopのプランが良い?バインドアップ(BiNDup)の評判は?料金比較やメリット・デメリットを解説ヘテムルとエックスサーバーの比較!wordpress初心者におすすめはどっち?CATEGORYWordPress(ワードプレス)初心者向けにwordpress(ワードプレス)に関するお役立ち情報が掲載されています。おすすめプラグインやおすすめ有料テーマ(テンプレート)、おすすめ無料テーマ(テンプレート)なども紹介しております。Goope(グーペ)初心者向けにグーペに関するお役立ち情報が掲載されています。リアルな口コミやメリット・デメリット、グーペの利用がおすすめな人や他のCMSとの比較情報などもご紹介しています。Jimdo(ジンドゥー)初心者向けにjimdoに関するお役立ち情報が掲載されています。リアルな口コミやメリット・デメリット、jimdoの利用がおすすめな人や他のCMSとの比較情報などもご紹介しています。WIX(ウィックス)初心者向けにWIX(ウィックス)に関するお役立ち情報が掲載されています。口コミや評判、メリット・デメリット、WIXの利用がおすすめな人や、他のCMSやホームページ作成ツールとの比較情報などもご紹介しています。RentalServer(レンタルサーバー)レンタルサーバーに関する口コミや評判、メリット・デメリット・料金比較などが掲載されています。ワードプレス(wordpress)運用におすすめのレンタルサーバーもご紹介しております。