AmaDemoAmaDemoWEBマーケティングWordPressTOOLGADGETホームWEB【高機能】WordPressにギャラリーを追加できる「FooGallery」の使い方2019/08/08SHAREツイートシェアはてブGoogle+PocketLINE「少し凝った、レスポンシブな画像ギャラリーを簡単に作成したい。」こういった方向けの内容です。ワードプレスには標準でギャラリーを設置する方法がありますが、少しカスタマイズしないとレスポンシブに対応しきれていない場合があります。なるとCSSのカスタマイズが必要となるため、初心者には少し厳しい...ですが、「FooGallery」という高機能プラグインを使うことで、この問題は一発で解決します。いうわけで、この記事ではFooGalleryの使い方について解説していきます。記事への設置方法FooGalleryを選んだ理由ギャラリーのプラグインには種類がありますが、FooGalleryを選んだ理由を少しお伝えしておきます。レスポンシブ対応デザインが豊富カスタマイズ性が高い分かりやすく3点にわけましたが、つまりは「高機能」であるということです。ワードプレスの標準のギャラリーはレスポンシブにカスタマイズが必要だったりするので、必須条件であるレスポンシブが手間なしで実装されているのはありがたいですね。デザインが豊富なこととカスタマイズ性が高いことで幅も広がりますし、どんな用途でもある程度対応できる使いやすさは大きなポイントでしょう。これに加えて、ユーザー数も10万オーバーと多いこともいい点ですね。多くの人が使っているプラグインは、安全性な可能性が高いですし、アップデートが止まる可能性も低いので。いうわけで「FooGallery」を選んだわけですが、ここからは実際にインストール方法と使い方について解説していきます。FooGalleryのインストールまずはプラグインのインストールを行なっていきます。STEP.1プラグインを検索ワードプレスの管理画面から、「プラグイン」→「新規追加」を選択し、「FooGallery」を検索します。STEP.2インストール検索した「FooGallery」をインストールします。インストールしたら有効化しておきましょう。インストール後にポップアップが出ますが、ここはスキップして大丈夫です。これで使用できる状態になりました。FooGalleryの使い方FooGalleryの使い方は、以下の2点を抑えておけばOKです。記事への設置方法それでは1つずつ解説していきます。Gallery」を選択します。ここでタイトルを入力しておきましょう。STEP.2写真の選択ギャラリーに使用する写真を選択していきます。※画像の並びはドラッグ&ドロップで並び替えることができます。STEP.3デザインを選択デザインを6種類の中から選びましょう。言いたいところですが、説明が不十分なので「デザインについて」と「ギャラリーの詳細設定について」少しお伝えしておきます。デザインについてデザインはデフォルトで下記の6種類となっています。Gallery:1枚のみを表示してクリックするとスライド表示プレビューを見ながら切り替えれるので、この辺は実際に見ながら決めることができます。Gallery」あたりかと思います。Settings」という項目で、表示方法を変えることもできます。具体例をあげておくと下記のような感じです。Effect]→[Scaled]上記内容でもごく一部という感じで、カスタマイズの範囲は非常に広いです。ちなみにCSSによってカスタマイズすることが可能なので、コーディングができる方だと広がりはさらに半端ないですね。設定に関しての、重要な内容はここまでです。デザインが決まったら、ギャラリーを保存してショートコードをコピーしておきましょう。記事内への設置はショートコードを挿入するだけです。作成したギャラリーのショートコードは、管理画面の「FooGallery」→「Galleries」からも見ることができます。作成時にコピーをしていな場合はここでショートコードのコピーをとっておきましょう。STEP.2記事にショートコードを挿入コピーしたショートコードを、記事内の入れたい場所にカーソルを入れて貼り付けます。これで記事内にギャラリーが追加されました。実際に確認してみるとこんな感じです。上手くギャラリーの設置ができました。今回の内容はこれで以上となります。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。