, teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。, 評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。, 上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。, [Wordpress] functions.phpでの css と js の読み込み方, Wordpressの子テーマの固定ページ内で特定のphpファイルを読み込んだ際のjsの読み込み. wp_enqueue_style( 'bootstrap-css', get_template_directory_uri() . crop が付いていないものは 表示されます。, こちらに グリッドレイアウト と Luxeritas （ルクセリタス）, 参考にして頂ければ幸いです。^^ 過去の投稿一覧をグリッド表示（アイキャッチ画像をきれいに並べた表示）できるようになるWordpressプラグイン【Post Grid】の日本語翻訳ファイルのダウンロードページです。 サムネイルでは画像のサイズを設定していきます。, グリッドレイアウトの項目ではリスト型トップページと ダッシュボード 設定の項目の中のメディアでの こちらの表で見ていくと 300×300 のサイズの Crop にはチェックが付いていませんので タイル型とカード型、2種類あります。 (平日10時〜21時), ホームページ上でいかに上手に商品・サービスのイメージ画像を見せていくかは、Web担当者にとって重要な課題。そこで活用していきたいのがWordPressのギャラリー機能です。実はビジネス系サイトでも様々な場面で利用されています。, 例えば、ランディングページやECサイトで、複数の商品画像で多角的に見せていくコンテンツをよく見ると思います。これもギャラリー機能を使って作成されたもの。また、ギャラリー機能を使って以下のようなコンテンツを作成することも可能です。, このようにギャラリー機能を使うことによって、1つのページに多くのイメージ情報をいれることができます。また、最適化されたギャラリーは、高品質な画像をユーザーに負担を感じさせることなく見せることができます。, WordPressではコストをかけず簡単にギャラリーを実装可能ですので、今回はWordPressで「ギャラリー」を作成する方法と、おすすめのプラグインをご紹介します。, 便利なプラグインが数多く提供されているためあまり知られていないのですが、WordPressにはギャラリー機能が標準で搭載されています。プラグインのようにあまり細かな設定はできませんが、WordPress初心者でも簡単に設置できる便利な機能です。, 投稿や固定ページを作成する編集画面の左上に「メディアを追加」というボタンがあります。こちらのボタンをクリックすると、メディアを挿入する画面に移動します。, メディアを挿入する編集画面のサイドバーに「ギャラリーを作成」という選択肢があります。これをクリックすると「ギャラリーを作成」という画面になりますので、ギャラリーに表示したい画像をクリックします。画像を選択し終わったら、右下にある「ギャラリーを作成」というボタンをクリックすると、ギャラリーが作成されます。, 次に「ギャラリーを編集」という画面に移行しますので、ここでカラム数や画像の表示サイズを設定します。最後に「ギャラリーを挿入」ボタンを押すとページ編集画面にギャラリーが挿入されます。, ここまでご説明したプラグインを使わないギャラリー作成方法は下記のような場合に有効です。, プラグインの使用に制限がある状況などでも活用できるというメリットもあります。自社サイトの環境に合わせて上手に使い分けましょう。, このように非常に簡単にギャラリーを設置できるのがこの方法を使うメリットですが、一方で細かな設定はできないというデメリットもあります。, 例えば、下の画像のようにサムネイルをクリックすると黒色半透明の背景の上に拡大画像を表示させ、画面遷移せずになめらかに画像を閲覧できる機能などは搭載されていません。, 細かな設定やカスタマイズが必要な場合は、この後ご説明するプラグインを使ったギャラリー実装方法をおすすめします。, ギャラリー作成方法は、WordPress標準搭載のギャラリー機能以外にプラグインを使って作成する方法があります。プラグインを紹介する前に、プラグインのインストール方法を少しおさらいしておきましょう。, 管理画面ダッシュボードのサイドバーから「プラグイン」を選択します。プラグインの編集画面丈夫にある「新規追加」のボタンをクリックします。, 「プラグインを追加」という画面に移行したら、右側上部にある検索欄に追加したいプラグイン名、もしくは「Gallery」などのキーワードを入力します。インストールしたいプラグインが表示されたら、それぞれのプラグインの枠右上に表示されている「今すぐインストール」というボタンをクリックします。, インストールが完了すると、右上のボタンが「有効化」に変わりますので、こちらをクリックするとプラグインが有効化されます。, 画像をふわっと美しく拡大表示できるギャラリープラグインです。jpg・gif・pngといった一般的な画像ファイル形式以外にも、pdf・swf・svgなど様々な形式に対応しています。さらに、YouTube・Vimeo・Dailymotionといった動画をギャラリーに追加することも可能。, 非常に便利なプラグインですが、他のプラグインと相性の悪い場合があるので注意しましょう。不具合が出る場合は、他のプラグインの利用をおすすめします。, 多機能な性能で非常に人気の高いプラグインです。ギャラリーについてはサムネイル型・スライドショー型などタイプを選択可能です。, このプラグイン一つで、ギャラリーとスライドショーの両方が使えるようになるだけでなく、タグクラウド機能、アルバム機能なども搭載されています。, いろいろな機能を追加したいけれども、プラグインのインストール数を最小限にしたい場合などにもおすすめです。, グリッドデザインが標準搭載されているプラグインです。グリッドデザインとは、Webデザインの手法の一つで、ページを格子状（グリッド）に分割し、画像やテキストエリアなどの要素を組み合わせて配置していく方法です。, パソコンとモバイル端末の両方で閲覧可能なレスポンシブデザインに対応していますので、モバイル端末でも美しくグリッドデザインが実装できます。, など様々な項目を設定できます。有料版にすればさらに細かな設定が可能。グリッドデザインを実装可能な数少ない無料プラグインの一つなので、ギャラリーのデザインに特徴を持たせたい場合などに特におすすめです。, カスタマイズの自由度が高いことで人気のプラグインです。同じドメイン内で、ギャラリーを複数作成することができるのも便利なポイントです。その他にも主に以下のような設定項目があります。, 注意点としては、FooGallary単体では動かないので「FooBox Image Lightbox」というプラグインも一緒にインストールする必要があるということ。, 無料のプラグインの中でも機能の充実度はトップクラスなので、ギャラリーに細かな設定を施したいという場合は非常におすすめのプラグインです。, Photo Gallery by 10webPhoto Gallery by 10web DEMOサイト, 非常にデザイン性の優れたギャラリープラグインです。ギャラリーのテンプレートが用意されており、直感的にデザインを選ぶことができるので、英語で細かな設定をするのは不安という方には、特におすすめのプラグインです。, 画像サイズを自由に変更したり、丸枠や角丸枠のギャラリーを作成するといった基本機能の他、画像にウォーターマーク（透かし状の著作権表示）や、透かし状のリンク広告を設置できる機能も搭載しています。, 正しく画像サイズ設定が行われていないと、画像の縦横比が変わってしまう場合があります。画像のサイズ調整を行う場合に「画像の縦横比を保持する」といった項目にチェックをしておくと、縦横比が崩れることはありません。, また、縦横比がおかしくなる原因はプラグイン側の設定であるケースも多いです。縦横比の数値入力でで迷った場合は、例えば、横幅100%と入力するなど、ピクセルで設定するのではなくパーセントで設定にしてみましょう。レスポンシブ対応しているギャラリーでは端末によって自動的にサイズを調整してくれます。, 非常に重要なのはギャラリーを導入する前に、画像サイズの統一事項を決めておくこと。後からサイズ変更するのは、無駄なコストを発生させてしまいます。, 2018年にGoogleがアルゴリズムの更新を行い、以前にも増してSEO対策においてサイト表示速度の高速化が重要視されるようになってきました。, 表示速度を高める施策には様々な手法がありますが、その中でも画像サイズの最適化は実施しやすい項目の一つ。特に画像を多く使ったギャラリーは表示速度に強く影響します。導入の際にはその点をしっかりと意識していきましょう。, 一眼レフのような高機能カメラで撮影したデータは、サイズが非常に大きいです。また、印刷に最適化された紙媒体用の画像は画像解像度が350dpi以上であることが一般的。こうしたデータはWeb用に最適な72dpi〜96dpiの画像解像度にリサイズしましょう。, 画像のサイズ・解像度をWeb用に変換するには、下記のような無料のサービスを使っても簡単にリサイズすることができます。, オンラインで画像を圧縮。最高の画質および圧縮方式