(平日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用に変換するには、下記のような無料のサービスを使っても簡単にリサイズすることができます。, オンラインで画像を圧縮。最高の画質および圧縮方式 画像サイズは適切なものを使おう; 4-3.       , 2019/3/26 ホームページを依頼したいが、相場が分からず心配 あとは サムネイルのサイズを設定していきます。, 次にサムネイルのサイズの調整ですが、デフォルトのままで

複数のJPG、PNG、GIF画像を選んで瞬時に圧縮。オンラインで画像を無料で簡単に圧縮できます。, 最適な画像サイズやデータサイズについては、サイト環境や目的によって変わってきます。したがって一概に、このサイズであると断定はできないのですが、参考になる基準としてGoogleが提供している「Page Speed Insight」というサービスの測定結果を目安にすると良いでしょう。, 上記のサービスに自社のURLを入力するとサイトの表示速度がわかります。測定結果から、適正な画像サイズなど表示速度を高めるアドバイスが提示されますので、最適化の指標として参考にしてみましょう。データサイズでいうと100KB〜200KB前後の画像サイズが一つの目安になると思います。, ギャラリーに動画を追加する場合も同様です。この対策には、自社サイトに動画をアップロードするのではなくYouTubeなどの外部サービスに動画をアップして、サイトの表示を軽くするといった手法がよく採用されています。, せっかくギャラリー機能を搭載しても、スマートフォンで綺麗に表示されていなければ、サイトの評価にもマイナスの影響を与えてしまいます。レスポンシブデザイン対応のギャラリープラグインであっても、スマートフォン表示に問題がないか必ずチェックしましょう。, iPhoneなど主要な機種については、実際の端末で確認することが理想的です。しかし、全ての端末でチェックするのは現実的に厳しい面もあるかと思います。, 簡易的ですが以下の2つの方法でスマートフォンで閲覧した見え方のプレビューができますのでご紹介します。, WordPressの管理画面にある「外観」から「カスタマイズ」を選択すると、「カスタマイズ」編集画面に移行します。こちらのサイドバーの最下部にプレビュー表示のデバイスを選択するアイコンがあります。こちらで、PC・タブレット・スマートフォンの3パターンをプレビューすることが可能です。, Google ChromeというGoogleが提供するブラウザを使ってもスマートフォン表示を確認することができます。, ブラウザ画面の右上、アカウントのアイコンの横にあるボタンをクリックし「その他のツール」→「ディベロッパーツール」を選択します。, 「ディベロッパーツール」の左上に、デバイスのアイコンがありますので、こちらをクリックするとスマートフォンでの表示が確認できます。, ただし、これらの確認方法はあくまでもプレビューです。社員スタッフに協力してもらって、複数の機種でチェックしておくと、改善すべき点も発見しやすいでしょう。, 関連記事：Wordpressを思い通りにカスタマイズ！実践法と初心者に読んでほしい厳選18記事紹介, 今回の記事で、ギャラリー機能を使うことで、ユーザーにより多くの情報が伝えられることがわかったと思います。, 商品のスペックなども表で説明するだけでなく、ギャラリーを使うことでわかりやすく情報を伝えられます。例えば、「パソコン関連商品にどんな接続端子がついているのか」という問い合わせが多い場合、テキストや表で説明するよりもホームページに写真を掲載するほうが瞬時に正確な情報を伝えられるでしょう。このように、業務の効率化にもギャラリー機能は役立つのです。, アップロードする画像の統一事項の取り決めなど、最初に導入するときは大変かもしれませんが、一度設定してしまえば後の運用は簡単になります。, まずは、WordPressに標準搭載の機能やプラグインを活用して、テストページにギャラリーを作成してみましょう。いくつかの機能を試すことで、自社サイトにあった方法を見つけ出すことができると思います。, ホームページの相場に関するガイドブックを WordPressを活用した写真ギャラリーページの作り方まとめ 見やすく表示することができます。 こちらは無料で利用できる画像素材のサイトからダウンロードさせて頂いています。

少し下にサムネイル（アイキャッチ）の項目が wp_enqueue_script( 'bootstrap-script', get_template_directory_uri() .        ユーザーサムネイル1 と書かれている場所に お忘れないように…。^^, グリッドレイアウトのタイプとサムネイルのサイズによって サムネイル画像を使用するグリッドレイアウトですが、 3.9.0 へ バージョンアップしました —.

このように3種類のサイズがあり、ピクセルの変更ができるようになっています。 こちらのサンプル画像 300×300ピクセルで設定した画面です。 サムネイルの画面でも変更されています。, ここでも注意しておきたいのは 使用して頂いても全く問題ないのですが WordPress Bootstrapを利用して、投稿画像をグリッド配置、4列で表示を実現したいです。 ワードプレスの サイトや プラグインの更新・テーマのバージョンアップなど、 様々 ... WordPressサイトの ユーザー名 を PhpMyAdmin から 変更をする方法. WordPress, WPプラグイン, もしWordPressで記事を複数列表示するグリッドに対応させたいなら、グリッドに対応したテーマを探すというのも手の１つです。, でも、テーマを変えずに自分の今使っているテーマでグリッド表示したいという場合は「The Post Grid」というプラグインが便利です。, 「The Post Grid」をインストール・有効化して利用できるようにする手順は次の通りです。, すると新規追加画面が開くのでその画面の検索欄に「post grid」などのキーワードを入力, しばらくすると検索結果に次のプラグインが表示されるので「今すぐインストール」ボタンを押してインストールしましょう。, https://ja.wordpress.org/plugins/the-post-grid/, インストールが完了したら「今すぐインストール」ボタンが「有効化」ボタンに変わるので、それを押して有効化するのもお忘れなく。, まず新規グリッドを作るために「The Post Grid」ー＞「Add New Grid」をクリック, すると次のような新規追加画面が表示されるのでまず初めに「ここにタイトルを入力」と書かれた場所にグリッドを識別するための分かりやすい名前を入力しましょう。, グリッドにどのような種類の記事を表示するかを設定するには「Short Code Generator」の下にある「Post Source」タブを開いてください。, グリッドに表示したい投稿タイプは「Post Type」の横にあるドロップダウンメニューから選択可能です。, 「post」を選ぶと個別の投稿ページに対してのグリッド、「page」を選ぶと固定ページだけが表示されるグリッドになります。, グリッドに表示する記事を詳細に絞り込みたい場合は「Advanced Filters」から絞り込みに使うフィルターを選択できます。, これにチェックを入れると次のような設定エリアが表示され、グリッドに表示する記事に対して特定のカテゴリーやタグでフィルターをかけて絞り込むことができるようになります。, この項目にチェックを入れると次のような記事の順番(オーダー)を設定するエリアが表示されます。, 「Order by」には並び替えに使う記事IDやタイトルや作成日などが指定できます。また「Order」で「Ascending」を選ぶと昇順で並び替え、「Descending」を選ぶと降順で記事が表示されるようになります。, これにチェックを入れると次のような記事の作者を選ぶエリアが表示され、グリッドにその作者が書いた記事だけが一覧表示されるようになります。, これにチェックを入れると記事の状態を指定するエリアが表示され、ここで指定した公開済みや下書きなどの状態に当てはまる記事だけがグリッドに表示されるようになります。, この項目にチェックを入れると次のような入力欄が表示され、そこに例えば「wordpress」などのキーワードを入力するとそれを含む記事だけがグリッドに表示されます。, このように記事を絞り込んで表示したい場合はこの５つの項目を使って表示したい記事にフィルターをかけることが可能です。, グリッドのレイアウト設定を行うには「Short Code Generator」の下にある「Layout Settings」タブを開いてください。, グリッドの列数は次のように「Columns」の横にあるドロップダウンメニューから１～６列の範囲で指定可能です。, この設定で例えば「Column3」を選ぶと次のようにグリッドが３列になって表示されます。, ２～４列だときれいに表示されますが、それ以上の列数を指定するとかなり縦長になってしまうので５列以上にはしないほうがいいかもしれません。, ページネーションとはページを分割する機能のことでこれを有効にすると１ページ当たりに表示できる最大の記事数ごとにページが分割されるようになります。, この設定を有効にするには「Pagination」にチェックを入れて、その下に表示される「Display per page」に１ページ当たりの記事数を入力してください。, グリッドに表示する全ての記事数が「Display per page」を超える記事数の場合はグリッドの下の方に「1」や「2」などのページ番号がかかれたリンクが表示されるようになります。, グリッド内の記事に表示されるアイキャッチ画像の大きさは「Feature Image Size」から指定可能です。, また「Media Source」からどの種類の画像をアイキャッチに指定するかも選択できます。, この設定で「Feature image」にチェックを入れると記事内で設定したアイキャッチ画像が、「First Image from content」にチェックを入れると記事内で出てくる最初の画像がグリッド内の記事のアイキャッチとして使用されます。, グリッド内の記事にどのような情報を表示するかを設定するには「Field Selection」タブを開いてください。, ここでは「Field selection」の横のチェックボックスからグリッド内で記事に対して次のような情報を表示するか選択することができます。, まずグリッドを設置したい固定ページの投稿画面を開き、ビジュアルエディタから次の画像で示したグリッド挿入ボタンをクリックします。, そのダイアログで記事内に挿入したい「Select Short code」からグリッド名を選んで「OK」ボタンを押してください。, そして記事を保存して固定ページを見るとショートコードを挿入した位置に次のようにグリッド形式で記事一覧が表示されます。, またスマホやタブレットのような画面幅の狭い端末の場合は次のように画面幅に合わせて最適な列数でレスポンシブ表示されます。, このようにショートコードを挿入するだけでグリッド表示でき、レスポンシブ対応までしているのがこのプラグインの優れたところですね。, ここまでで紹介した Post Grid 以外にも記事リスト表示に便利なプラグインはいくつかあります。その中でも個人的に愛用しているのが次の３つ, 詳しい使い方などは各記事でまとめたので是非ご覧ください。特に Popular Posts は使い方だけでなく、カスタマイズについても詳しく解説しています。, 以上、「The Post Grid」を導入して記事をグリッド表示する手順についてでした。, グリッド表示すると１ページ当たりに表示できる記事数が多くなり、デザイン的にもおしゃれになります。, このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。, 自分の「好き」をブログで表現したい、情報発信をしたい方に役立つWordPress術・ブログ構築術を発信中。今までできなかったことを"デキル"に変えるお手伝いをします, 「WordPressは難しい」、「ブログ初心者には向いてない」・・・こういう固定観念を捨てればWordPressほど効率よく記事編集できて安全にブログ運営できるツールはありません。Let's ワードプレス！, それならPost Gridを使ってみよう。簡単な設定をするだけできれいに記事をグリッド表示できるんだ, 昔はプログラミングに熱中していたが、ブログとWordPressに興味を持ち始め今はサイト・ブログ作りが生きがい。自分の「好き」をブログに変えたい、情報発信したい人に役立つWordPress術・サイト構築術を発信中。一日一歩楽しんでブログ構築できるように読みやすい＆楽しい記事作りを心がけています。, 自分の「好き」をブログで表現したい、情報発信をしたい方に役立つWordPress術・ブログ構築術を発信中。今までできなかったことを"デキル"に変えるお手伝いをします。好きな言葉は「不言実行」「千里の道も一歩から」.
       ID, "p-name", true)) : ?> 過去の投稿一覧をグリッド表示（アイキャッチ画像をきれいに並べた表示）できるようになるWordpressプラグイン【Post Grid】の日本語翻訳ファイルのダウンロードページです。

・ランディングページ GrandWP の開発している「Responsive Photo Gallery Image Gallery for WordPress」は、画像公開のプロセスをより簡単かつ便利にするために必要な様々な機能が装備されています。ユーザーフレンドリーで数回のクリックで画像を簡単にウェブサイトに追加できます。画像はデスクトップとモバイルデバ … こちらをクリックしていただくと, 外観からカスタマイズを選択サイト画面左に サイト運営初心者の方に向けたワードプレス 元の画像サイズが正方形でない場合、このようにサイズがバラバラになってしまいます。, バランスから考えて、均一にしたいところですね。 こちらのサイトは備忘録を兼ねた アドセンス広告の 無効なクリックに対応するために AICPプラグインを導入しまし ... Luxeritas ( ルクセリタス ) テーマを 新しいバージョンへ アップデートする. 記事に挿入した画像に対して WordPress 内に保存されているオリジナル画像ファイルへのリンクを設定することができます。 リンクを設定するには「画像」ブロックを一度クリックして選択したあと、ツールバーオプションの中から「リンクを挿入」アイコンをクリックして下さい。 3 / クリップ WordPressでPinterest風グリッドレイアウトを実現する方法をご紹介いたします。 Pinterestはイベントだったり写真だったりお気に入りをピンしていくことであなたのコレクションを作ることができますが、ここではとりあえず投稿をグリッドレイアウトをする方法を解説したいと思います。 どうぞよろしくおねがい致します。,