スマートフォンサイトを表示する

  1. TOP
  2. はじめて相談室 : 第32回 たくさんの写真をきれいに並べるには?

エキスパートコラム

はじめて相談室

第32回:たくさんの写真をきれいに並べるには?

執筆:#fc0(株式会社エフシーゼロ)

2017年12月11日更新

  • このエントリーをはてなブックマークに追加

閲覧数822views

このコラムをPDF形式でダウンロードする

「はじめて相談室」では、「はじめてWEB」を使ったホームページづくりが初めての方のお悩みや不安にナビゲーターがお答えします!「こんなこと聞いていいのかな…」という方大歓迎の相談室です。

今回は、ホームページの中のたくさんの写真をきれいに並べるには?というご相談です。

おたより

こんにちは!息子が入っているサッカーチームの活動記録用のホームページを作るために、はじめてWEBに登録しました。試合の様子のレポートをするためにページの中でたくさんの写真を載せているのですが、どうもレイアウトがあんまりきれいじゃないというか、間延びした感じがします。
なんだか縦長になってしまうので、本当はもっとたくさん写真を載せたいのにあまり載せられません。写真って縦並びにしかできないのですか?
たくさんの写真をもっときれいに並べる方法があったら教えていただけないでしょうか。
(バタバタママさん)

ナビゲーターからの回答

ナビゲーター

バタバタママさん、おたよりありがとうございます。
「はじめてWEB」ナビゲーターの立花かずみです。

サッカーだと人数も多いですし、チームのメンバーそれぞれが写っている写真を厳選しても、きっとたくさんの写真がありますよね。活躍の様子をできるだけいっぱい載せたいけど、載せられない!というバタバタママさんのお悩み、よくわかります。今回はこのお悩みを「フォトギャラリー」という機能を使って解決する方法をご紹介します!

縦長のレイアウトになってしまうのはなぜ?

今回、バタバタママさんが「縦長になってしまう」と悩んでいたのは、写真を載せるのに「画像」コンテンツを使っていたからではないかな、と思います。

「画像」コンテンツでは写真が1枚しか載せられません。そして次の画像をさらに「画像」コンテンツで載せようとすると、前の写真の上か下に配置されます。このため、図のように写真の周りがスカスカした感じになってしまいます。

これをバシッと解決して、複数の写真をかっこよく並べられるのが「フォトギャラリー」です。

フォトギャラリーって?

フォトギャラリーを使うと、複数の写真を並べて表示することができます。アップロードをするときも複数の写真をまとめて選択できるので、「画像」で1枚1枚載せていくよりも相当手間が省けますね。

写真の並べ方のバリエーションも結構いろいろあります。並べ方を設定すると、Jimdoがいい感じに写真の大きさなどを調整してレイアウトしてくれます。
たとえばこんな感じのレイアウトができます。

どうでしょう?「画像」コンテンツで並べたものよりもなんだかプロっぽく見えませんか?

フォトギャラリーの操作の基本

いろいろなレイアウトや設定がありますが、基本操作は共通です。まずは「コンテンツを追加」から「フォトギャラリー」を選択すると、フォトギャラリーの設定画面が表示されます。画面構成はこんな感じです。

「ここへ画像をドラッグ」のエリアに載せたい複数の写真を一気にドラッグ&ドロップすると、ドラッグした写真が一度にページに表示され、設定画面の中にも写真の一覧(下図)が表示されます。写真の数によっては、表示までに少し時間がかかるかもしれません。

写真の表示順を変えたいときは、設定画面の写真一覧の中で写真をドラッグするだけで簡単に順番を変えることができます。写真を削除したいときは、削除したい写真の上にマウスカーソルを持っていき、ゴミ箱のボタンで削除します。

フォトギャラリーの並べ方の種類と使いどころ

並べ方には「縦並び」「横並び」「タイル」「スライダー」の4種類があり、それぞれの並べ方の中でさらに細かな設定ができます。それぞれの並べ方の特徴についてご紹介しますね。

横並び、縦並び

横向き写真と縦向きの写真を混ぜて並べたいときに便利な並べ方です。
「横並び」は、縦の高さを揃えたレイアウト、「縦並び」は横幅を揃えたレイアウトです。わかりづらいので図で見てみてください。

写真が自動的に拡大されたり縮小されたりして、縦横の写真が混在していてもいい感じにぴったり並びます。縦方向と横方向のどちらか割合が多いほうに合わせるといい感じになると思います。写真の枚数や内容に応じて設定をしてみてください。

縦並び、横並びともに、何枚の写真を横に並べるかの設定ができます。縦並びの場合は「表示サイズ」、横並びの場合は「列数」で設定します。

横に並べる写真の数が多いほど、写真は小さくなります。初期設定では「拡大表示」にチェックが入っているので、写真をクリックすると大きい写真が表示されます。

タイル

写真を正方形の枠の中で見せる並べ方です。
「オリジナル比率で表示」にする(下図赤枠内をクリックする)と、枠の中でオリジナルの縦横比率で表示されるので、上下左右に余白が空いたような見え方になります。これは使いどころがちょっと難しいかもしれないですね。

「正方形で表示」(下図赤枠内をクリック)の場合は写真の一部が切り取られます。最近流行の「インスタ(Instagram)」も初期設定では正方形で表示されますが、正方形の写真ってなんとなくかっこよく見えたりするんですよね。

タイルの設定画面では、表示する写真の大きさの調整や、同じ正方形でもどのように見せるかなど、細かな調整ができます。

スライダー

「スライダー」では写真が紙芝居のように切り替わる設定ができます。いろいろな会社やお店のページで見たことがある方もいるのではないでしょうか。トップページのメインとなる写真に使うと効果的です。

スライダーの設定画面では、写真切り替えの自動/手動の設定や、自動的に切り替わる場合の速度の調整などができます。

写真に説明文を入れたいとき

フォトギャラリーでは、それぞれの写真に対する説明文を入れることもできます。説明文を入れるときは、設定画面の写真一覧表示を「リスト表示」に切り替える必要があります。

表示を変えると、設定画面の写真が縦並びの表示に切り替わります。こうすることで、それぞれの写真に対する説明文を設定できます。「キャプションを入力してください」のところに説明文を入れます。

説明文は、「縦並び」「横並び」「タイル」のときはそれぞれの写真をクリックして拡大表示をしたときに表示されます。「スライダー」の場合は、写真の下のほうに表示されます。

フォトギャラリーを使ってたくさんの写真を載せると、ホームページをさらにかっこよくできると思います。写真で勝負!というホームページを運営している方はぜひチャレンジしてみてくださいね。

おたよりお待ちしています!

ナビゲーター

「はじめて相談室」では、みなさまからの「はじめてWEB」の素朴な疑問をお待ちしています!
「こんなこと聞いたら恥ずかしいかも。。。」というご質問大歓迎です!
「はじめてWEB」ナビゲーターがなんでもお答えしちゃいます!
おまちしてまーす!

ナビゲーターへの質問はこちらから!

このコラムでは、パソコン初心者の方からの
「こんなこと聞いてもいいのかしら?」という質問にお答えしています。

  • ※毎月1回程度のコラムですので、急を要する質問にはお答えできません。
  • ※すべての質問にお答えできるわけではありませんので、あらかじめご了承ください。
  • ※Jimdoの操作や、はじめてWEBに関する質問はQ&Aコーナーもご活用ください。

お名前(ペンネーム)

メールアドレス

質問

確認する

はじめてWEB

「はじめてWEB」でホームページを作成しよう!

「はじめてWEB」のホームページ開設支援サービスとは、7つのステップで簡単に無料で作成ができ、さらにその後1年間無料でご利用いただけるサービスです。

さあ、はじめよう!

さあ、はじめよう!

はじめてWEB ホームページ公開の7ステップとポイントを動画でご紹介!!

  • ホームページ公開の7ステップ

    ホームページ公開の7ステップ

    ホームページ公開の7ステップ
  • はじめてWEB サービス紹介

    はじめてWEB サービス紹介

    はじめてWEB サービス紹介
  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

#fc0(株式会社エフシーゼロ)

#fc0(株式会社エフシーゼロ)

JimdoExpert
http://fc0.vc/

「もっと多くの人に、"Webへの入口"を」をコンセプトに、中小企業や個人商店をメインとしたWebサイトの企画・制作・運営アドバイスなどの業務を行う。また、主に初心者を対象とした講師・執筆も多数。

主な著書に『デザインの学校 これからはじめるFireworksの本』(技術評論社)、『デザインの学校 これからはじめるDreamweaverの本』(同)、『ああしたい、こう変えたいが手にとるようにわかるCSS基礎』(共著、エムディエヌコーポレーション)など。

小さなお店&会社のホームページ Jimdo入門

  • 「はじめてWEB」でホームページをはじめよう!
  • Jimdoリメイク | プロがあなたのホームページを50,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

ホームページを作るのがはじめてのかたはまずこちらをご覧ください

コラム週間アクセスランキング[期間:2018/2/11~2018/2/17]

おすすめコンテンツ

はじめてWEBおすすめ本

創業・経営のお役立ち情報

  • ソウギョウノート

    飲食・小売・サービス業の開業スケジュールから、融資申込に必要な書類までをカンタン作成

  • 経理通信

    経営者と経理ご担当者必見!中小企業・小規模事業者のための経理サポートサイト

  • まとめてオフィス

    文具、通信、オフィスのことなら何でもお任せ

  • フリーコールS

    問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ